CSS中盒子模型介绍

盒子模型就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型包括：边框、外边距、内边距、实际内容。

码农浅知-CSS中的盒子模型及内外边框处理学习总结

CSS中边框

border属性可以设置元素的边框，包括边框宽度（粗细）、边框样式、边框颜色。

语法：

border : border-width border-style border-color; —— （没有顺序）

border-top : border-width border-style border-color; —— （只设定上边框，其余同理）

1
2
3
4
5
6
7
8
div {
    /*
    solid——实线边框
    dashed——虚线边框
    dotted——点线边框
    */
    border: 2px solid red;
}

border-collapse属性可以用来设置表格单元格细线。

1
border-collapse: collapse;/*表示相邻边框合并在一起*/

border-radius属性可以设置圆角边框样式，语法：border-radius : length;

属性值可以为数值或百分比。

如果是正方形，把数值设置为边长一半即可变为圆形边框，或直接写 50%。

如果是矩形，设置为高度的一半即可变为圆角边框。

该属性是一个简写方式，可以跟4个值，分别代表左上角、右上角、右下角、左下角。

也可以分别设置各个角的圆角边框效果：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

1
2
3
4
5
6
div {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    border-radius: 51px;
}

注意：边框会改变盒子的实际大小。

码农浅知-CSS中的盒子模型及内外边框处理学习总结

CSS中边框内边距

padding属性用于设置内边距，即边框和内容的距离。
padding属性可以有1到4个值：

1
2
3
4
5
6
7
8
9
padding : 5px;    ——上下左右都是5px内边距。
padding : 5px 10px;   ——上下内边距为5px，左右内边距为10px。
padding : 5px 10px 20px;   ——上内边距为5px，左右内边距为10px，下内边距为20px。
padding : 5px 10px 20px 30px;  ——上右下左内边距（顺时针）。
也可以**分别设置**上下左右的内边距：
padding-top
padding-bottom
padding-left
padding-right

注意：如果盒子本身没有指定宽高属性，此时padding不会撑开盒子大小。

CSS中边框外边距

margin属性用于设置外边距，即盒子和盒子的距离。

margin属性可以有1到4个值（写法和意义同padding一致）。
也可以分别设置上下左右的外边距：

1
2
3
4
margin-top
margin-bottom
margin-left
margin-right

外边距可以让块级盒子水平居中，满足以下条件即可：

盒子必须指定了宽度。

盒子左右的外边距都设置为auto。

1
margin: 0 auto;

相邻块元素垂直外边距的合并：

定义：当上下相邻的两个块元素（兄弟关系）相遇，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直距离不是下外边距和上外边距之和，而是取其较大值。

解决方案：尽量只给一个盒子添加margin值。

码农浅知-CSS中的盒子模型及内外边框处理学习总结

嵌套块元素垂直外边距的塌陷：

定义：对于两个嵌套关系（父子）的块元素，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
可以为父元素定义上边框。

可以为父元素定义内边距。

可以为父元素添加overflow:hidden;

码农浅知-CSS中的盒子模型及内外边框处理学习总结

CSS中边框清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一样。因此我们在布局前，先要清除下网页元素的内外边距。

1
2
3
4
* {
    padding: 0;
    margin: 0;
}

CSS3中盒子阴影

CSS3中新增了box-shadow属性，可以为盒子添加阴影。
语法：box-shadow : h-shadow v-shadow blur spread color inset;
h-shadow —— 必须，水平阴影的位置，允许负值。
v-shadow —— 必须，垂直阴影的位置，允许负值。
blur —— 可选，模糊距离。
spread —— 可选，阴影的尺寸。
color —— 可选，阴影的颜色。
inset —— 可选，将外部阴影改为内部阴影。
注意：
默认的是外部阴影（outset），但不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子的排列。

1
2
3
div {
    box-shadow:0px 0px 10px 20px #06C
}

CSS3中文字阴影

CSS3中新增了text-shadow属性，可以为文字添加阴影。

语法：text-shadow : h-shadow v-shadow 阴影模糊半径默认为0 blur color;

1
2
3
4
h1{
 color:powderblue;
 text-shadow: 2px 3px 1px pink;
}

CSS3中box-sizing

CSS3中可以通过box-sizing属性来指定盒子模型，这样我们计算盒子大小的方式就发生了变化。
box-sizing:content-box; —— 盒子大小为 width + padding + border （以前默认的）。
box-sizing:border-box; —— 盒子大小为 width。
如果盒子模型改为了box-sizing:border-box;那padding 和 border就不会撑大盒子了（前提是padding 和 border不会超过width）。

没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。
加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整。