css盒子
总结
一、 页面的制作过程
设计师制作设计图→前端工程师制作页面:1划分区域,2填充内容。
二、 如何划分区域
用合适的元素来表示不同的区域;设置区域的位置、尺寸、背景样式。
三、 划分区域中的CSS知识
- 每个元素都会在页面中生成一个矩形区域CSS称该矩形区域为盒子。
- 盒子的相关知识:
a) 盒模型:单个盒子的组成。
b) 视觉格式化模型:多个盒子的排列(盒子之间的相互作用和影响)。
c) 布局:实际应用。
四、 盒模型概述
- 盒子的分类:
a) 不同的元素产生的盒子类型可能不同。
b) 一个元素,产生什么样的盒子,取决于它的display属性。
- 盒子的组成
a) Margin:外边距(与其他盒子的距离)。
b) Border:边框。
c) Padding:内边距(边框与内容之间的距离)。
d) Content:内容(内容的宽度和高度)。
e) 一个盒子由:margin、border、padding、content组成。
五、 补充知识
1、 CSS的尺寸单位:在CSS中,有很多属性的取值,需要表示为一个尺寸,一个尺寸,由数值和单位组成。
2、 CSS常见的尺寸单位:px、em、%。
Px:像素,绝对尺寸(计算机屏幕有很多的小点组成,每个点,就是一个像素)。
em:相对尺寸(相对于当前元素的字体大小)。
%:百分比(在不同的CSS属性中,有不同的含义)。
所以其他尺寸单位,在经过浏览器计算后。都会变为px。
六、 盒模型
1、 Content 内容:
含义:用于存放文本或其他元素的区域,类似于一个箱子中存放东西的空间。
2、 相关CSS属性
Width:含义宽度;不可继承;默认值auto(暂认为撑满整个可用区域)
Height:含义高度;不可继承;默认值auto(暂认为适应内容的高度);其他取值px、em、%。
Owerflow:含义内容溢出时的处理方法;不可继承;默认值visible(溢出部分任然显示);其他取值hidden(溢出部分隐藏);scroll(在水平和垂直方向上出现滚动条,若溢出,则滚动条可用,否则不可用);auto(当内容在水平或垂直方向上溢出时,才在该方向上出现滚动条,否则不可用。)
Min-width:含义最小宽度(保证width属性的值不小于该属性值);不可继承;默认值0px,其他取值em、%
Max-width:含义最大宽度(保证width属性的值不大于该属性值);不可继承;默认值none(表示未设置最大宽度。可视为width属性可以无限放大);其他取值px、em、%,
Min-height:含义:最小高度(保证height属性的值不小于该属性值);不可继承;默认值:0px;其他取值em、%。
Max-height:含义:最大高度(保证height属性的值不大于该属性值);不可继承;默认值:none(表示未设置最大高度,可视为height属性可以无限大);其他取值px、em、%。
3、 Padding内边距、填充区
A、 含义:表示边框到内容之间的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向;类似于箱子和内部空间之间的填充物
B、 相关CSS属性
padding-top:含义:上内边距;不可继承;默认值:0px;其他取值em、%。
padding-right:含义:右内边距;不可继承;默认值:0px;其他取值em、%。
padding-bottom:含义:下内边距;不可继承;默认值:0px;其他取值em、%。
padding-left:含义:左内边距;不可继承;默认值:0px;其他取值em、%。
Padding:速写属性、简写属性(速写属性不是真实的CSS属性,它只是CSS提供的一种快速的写法);
书写格式:1. padding:上内边距 右内边距 下内边距 左内边距
padding:上内边距 左右内边距 下内边距
padding:上下内边距 左右内边距
padding:上下左右内边距
4、 Border边框
含义:分割内部和外部的界限,由上(top)、右(right)、下(bottom)、左(left)四个部分组成;类似于箱子壁。
相关CSS属性:
上边框:边框样式:border-top-style
边框厚度:border-top-width
边框颜色:border-top-color
border-top:书写格式:border-top:厚度 样式 颜色
右边框:border-right-XXX
下边框;border-bottom-XXX
左边框:border-left-XXX
border-width:速写属性:同时设置所有边框的厚度
border-style:速写属性:同时设置所有边框的样式
border-color:速写属性:同时设置所有边框的颜色
border:速写属性:同时设置所有边框的厚度、样式、颜色;
书写格式:border:厚度 样式 颜色
5、 margin 外边距
含义:表示边框和相邻盒子的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向;类似于箱子与箱子之间的距离;具体规则比较复杂,视觉格式化模型详细讲解。
相关CSS属性:
margin-top:含义:上外边距;不可继承;不可继承;默认值:0px;其他取值em、%。
margin-right:含义:右外边距;不可继承;不可继承;默认值:0px;其他取值em、%。
margin-bottom:含义:下外边距;不可继承;不可继承;默认值:0px;其他取值em、%。
margin-left;含义:左外边距;不可继承;不可继承;默认值:0px;其他取值em、%。
Margin:书写格式:1. margin:上外边距 右外边距 下外边距 左外边距
margin:上外边距 左右外边距 下外边距
margin:上下外边距 左右外边距
margin:上下左右外边距
浏览器默认样式中的margin:-webkit-XXX;-webkit-是浏览器厂商前缀
盒模型知识补充
子盒子:边框盒(border-box):由border、padding、content组成:background-clip属性:含义:背景覆盖范围;不可继承;默认值:border-box;
取值:border-box:背景覆盖边框盒;padding-box:背景覆盖填充盒;content-box:背景覆盖内容盒
填充盒(padding-box):由padding、content组成:严格意义上,overflow指代的溢出,是指溢出填充盒
内容盒(content-box):由content组成:默认情况下,width和height属性,是指内容盒的宽度和高度;width和height的设置范围,可通过box-sizing属性修改
box-sizing属性:含义:盒子宽高的设置范围;不可继承;
取值:content-box:表示内容盒的宽高;border-box:表示边框盒的宽高
盒子尺寸的计算:box-sizing:content-box的情况下;box-sizing:border-box的情况下;
outline属性:外边框,用法和border完全一致