3. 盒模型
-
CSS将页面中的所有元素都设置为一个矩形的盒子,对页面的布局就相当于将不同的盒子摆放到不同的位置。
-
盒模型组成部分:
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
3.1 内容区
- 元素中的所有子元素和文本内容都在内容区中排列
3.2 边框
-
边框处于盒子边缘,是盒子内部和外部的分界线。边框的大小会影响到整个盒子的大小
-
边框的常用属性:
-
边框的宽度
border-width
-
边框的颜色
border-color
-
边框的样式
border-style
- 实线
solid
- 点状虚线
dotted
- 虚线
dashed
- 双线
double
- 实线
.box{ /*content部分属性设置*/ width: 200px; height: 200px; backgroud-color: green; /*设定边框宽度*/ border-width: 10px; /*设定边框颜色*/ border-color: orange; /*设定边框样式*/ border-style: solid; /*以下三个属性都可以被设置为none*/ border-width:none; border-color:none; border-style:none; /*border简写设置*/ border: solid 10px orange; border-top:solid 10px orange; }
-
3.3 内外边距
-
内容区和边框之间的距离称为内边距(padding)
- 内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距上
边框之外的区域称为外边距(margin)
-
外边距不会影响可见框的大小,但是外边距会影响盒子的位置和实际占用空间
-
默认情况下设置的左和上外边距会移动盒子自身,而设置的下和右边距会移动其它元素
.box{ padding: 10px; padding: 10px 20px 30px 40px; margin: 10px; margin-bottom: 10px; }
3.4 行内元素的盒模型
-
行内元素不支持设置宽度和高度
行内元素可以设置padding,但垂直方向padding不会影响页面的布局
行内元素可以设置border,但垂直方向的border不会影响页面的布局
行内元素可以设置margin,但垂直方向的margin不会影响页面的布局