CSS学习笔记 | 盒子模型
CSS盒子模型
本文内容
CSS盒子模型：
1. 看透网页布局的本质
2. 盒子模型的组成
3. 边框border
3.1 边框属性
3.2 边框的复合写法
3.3 边框分开写法
3.4 小作业
3.5 表格的细线边框
3.6 边框会影响盒子实际大小
4. 内边距padding
4.1 内边距属性
4.2 内边距复合写法
4.3 内边距会影响盒子的实际大小
4.4 注意点
5. 外边距margin
5.1 外边距属性
5.2 外边距的典型应用
5.3 外边距合并情况
5.3.1 相邻块元素垂直外边距的合并
5.3.2 嵌套块元素垂直外边距的塌陷
6. 清除内外边距
7. 边框圆角
8. 盒子阴影
9. 文字阴影
页面布局要学习三大核心，盒子模型、浮动和定位，学习好盒子模型能非常好的帮助我们进行页面布局。
1、看透网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子Box
- 利用CSS设置好盒子样式，然后摆放到相应位置
- 往盒子里面装内容
网页布局的核心本质：利用CSS摆盒子。
2、盒子模型的组成
它包括：边框border、外边距margin（设置盒子与盒子直接的距离）、内边距padding（设置内容和边框的距离）和实际内容content
3、边框 border
border可设置元素的边框
3.1 边框属性
| 属性 | 作用 |
|---|---|
border-width |
边框粗细，单位是px |
border-style |
边框的样式，常用的：实线solid 虚线dashed 点线dotted |
border-color |
边框颜色 |
3.2 边框的复合写法
border: 3px solid red; /*没有规定顺序*/
3.3 边框分开写法
可以通过 border-top border-bottom border-left border-right 分别设置上、下、左、右边框。
3.4 小作业
如何将一个200*200的盒子，设置上边框为红色，其余边为蓝色。
一般思路，分别设置上下左右：
<style>
div {
width: 200px;
height: 200px;
border-style: solid;
border-top-color: red;
border-left-color: blue;
border-right-color: blue;
border-bottom-color: blue;
}
style>
head>
<body>
<div>
div>
body>
上面这么写显然很麻烦，可以运用样式的层叠性进行修改：
<style>
div {
width: 200px;
height: 200px;
border-style: solid;
border-color: blue;
border-top-color: red; /*会覆盖blue*/
}
style>
head>
<body>
<div>
div>
body>
3.5 表格的细线边框
boder-collapse属性控制相邻单元格的边框
border-collapse: collapse;
表示相邻边框合并在一起，否则会出现相邻单元格变粗的情况。
3.6 边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此存在两种解决方案：
-
测量盒子大小的时候，不量边框
-
如果测量的时候包含了边框，那么则需要减去左右边框的大小
例如：想要设置加上边框是200px，而边框的大小是10px，那么 width 和 height 就需要设置成180px
4、内边距 padding
padding用于设置内容与边框之间的距离
4.1 内边距属性
padding-top padding-bottom padding-left padding-right 分别用于设置上下左右内边距。
4.2 内边距的复合写法
| 值的个数 | 意义 |
|---|---|
| padding: 5px; | 表示上下左右的内边距都是5px |
| padding: 5px 10px; | 表示上下内边距是5px，左右10px |
| padding: 5px 10px 20px; | 表示上内边距是5px，左右内边距是10px，下内边距是20px |
| padding: 5px 10px 20px 30px; | 表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px（顺时针） |
4.3 内边距会影响盒子的实际大小
如果盒子已经有了实际的大小，那么设置内边距会撑大盒子。
举个栗子
<style>
div {
width: 200px;
height: 200px;
padding: 10px;
}
style>
那么实际上盒子的大小是 220px * 220px
如果要保持原来的大小，那么需要设置成
4.4 注意点
如果遇到嵌套的情况，子元素没有设定宽高度，那么设置padding不会撑开父元素的盒子。
如：
<style>
div {
width: 200px;
height: 200px;
}
p {
height: 30px;
padding: 10px; /*由于宽度没有设定，因此宽度上不会撑到父盒子的外面*/
}
style>
<div>
<p>
p>
div>
上面的表述可能不够直观，可以给背景设定颜色，实际实验下。
5、外边距 margin
5.1 外边距属性
margin用于设置属性外边距，用于控制盒子与盒子之间的距离
| 属性 | 意义 |
|---|---|
margin-top |
上外边距 |
margin-bottom |
下外边距 |
margin-left |
左外边距 |
margin-right |
右外边距 |
margin的复合写法和padding一致
5.2 外边距的典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定宽度（width）
- 盒子左右边距都设置成
auto
例如：
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
style>
<body>
<div>我想居中div>
body>
常见写法：
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;（常用写法）
注意：以上方法是让块级元素水平居中，而行内元素和行内块元素的水平居中可以给父元素添加text-algin: center;
5.3 外边距合并情况
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
5.3.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素设置了下外边距margin-bottom，下面的元素设置了上外边距margin-top，则它们之间的垂直间距并不是 margin-bottom + margin-top，而是取两个值中的较大者。这种现象称为相邻块元素垂直外边距的合并。
例如：
<style>
.one {
width: 200px;
height: 200px;
background-color: balck;
margin-bottom: 20px;
}
.two {
width: 200px;
height: 200px;
background-color: balck;
margin-top: 10px;
}
style>
<body>
<div class="one">
我是盒子1
div>
<div class="two">
我是盒子2
div>
body>
这个例子中，两个盒子之间的间距并不会是30px，而是20px 。
所以，尽量只给一个盒子添加margin值
5.3.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，当父元素和子元素同时都设置了上外边距时，父元素会向下塌陷较大的外边距值，并且子元素并不会和父元素隔开，即子元素设置的上外边距没有效果。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加
overflow: hidden
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面会总结。
6、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先要清除网页元素的内外边距
代码如下：
* {
padding: 0;
margin: 0;
}
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，如果要设置，需要转换成块级元素或行内块元素。
7、边框圆角
在CSS3中，新增了边框圆角的样式，可以使得方方正正的边框变得圆润
border-radius属性用于设置元素的外边框圆角
语法：
border-radius: 10px;
具体效果可自己敲一敲尝试下
注意它的一些使用：
- 参数值可以为数值和百分比的形式
- 如果想要设置一个圆形的盒子，那么需要准备一个正方形的盒子，使它的边长等于圆的直径。然后再设置
border-radius: 50%就可以得到一个圆形的盒子了 - 如果想要设置圆角矩形，那么只需将圆的半径设置成矩形高度的一半就可以了
border-radius: 高度的一半值 - 该属性是一个简写属性，如果只设置一个值，那么四个角的效果都相同。它可以设置四个值，分别代表左上角、右上角、右下角和左下角（顺时针），分别用
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius来设置
8、盒子阴影
CSS3中，新增了盒子阴影属性，通过box-shadow为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
h-shadow |
必需，水平阴影的位置，允许负值 |
v-shadow |
必需，垂直阴影的位置，允许负值 |
blur |
可选，模糊距离 |
spread |
可选，阴影的尺寸 |
color |
可选，阴影的颜色 |
inset |
可选，将外部阴影（outset）给为内部阴影 |
具体的效果可以自己调试查看，但是需要注意：
-
通常blur等属性都需要自己设置，因为默认的会比较丑
-
outset 是默认值，如果不写inset，那么就不需要写outset，否则阴影效果无法显示
例如，像这样写就无法显示阴影效果box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3) outset;应该改成：
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); -
盒子阴影不占用空间，不影响其他盒子的排列
9、文字阴影
CSS3中，可以通过text-shadow属性设置文本的阴影
语法：
text-shadow: h-shadow v-shadow blur color;
| 属性 | 描述 |
|---|---|
h-shadow |
必需，水平阴影的位置，允许负值 |
v-shadow |
必需，垂直阴影的位置，允许负值 |
blur |
可选，模糊距离 |
color |
可选，阴影的颜色 |
文字阴影在实际开发中使用的其实并不多