CSS学习笔记（三）

---

七、盒子模型

1.定义：

​ 盒子模型又叫盒模型、框模型 英文名：box model

​ CSS将页面中的所有元素都设置为了一个矩形的盒子

​ 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置。

每一个盒子都由以下几个部分组成：

​ 内容区（content）

​ 内边距（padding）

​ 边框（border）

​ 外边距（margin）

内容区、内边框、边框决定了盒子的大小，外边距决定了盒子的位置

2.内容区（content）

​ 元素中的所有的子元素和文本内容都在内容区中排列

内容区的大小由width和height两个属性来设置

width 设置内容区的宽度

height 设置内容区的高度

width：100px
height：100px

3.边框（border）

​ 边框属于盒子的边缘，边框里边属于盒子内部，出了边框都属于盒子的外部

要设置边框，需要至少设置三个样式：

①边框的宽度：border-width
②边框的颜色：border-color
③边框的样式：border-style

边框的大小会影响到整个盒子的大小

3.1边框的宽度（border-width）

​ 默认值：3px

border-width可以用来指定四个方向的边框的宽度

border-width:10px 20px 30px 40px;

值的情况：

​ 四个值：按照顺时针的方向设置，上 右 下 左

​ 三个值：上 左右 下

​ 两个值：上下 左右

​ 一个值：上下左右

除了border-width之外，还有border-xxx-width

border-top-width		设置上边框的宽度
border-right-width		设置右边框的宽度
border-bottom-width		设置下边框的宽度
border-left-width		设置左边框的宽度

3.2边框的颜色（border-color）

​ border-color用来指定边框的颜色，同样可以分别指定四个方向的边框的颜色

border-color:red blue yellow green;

​ border-color也可以省略不写，如果省略了则自动使用color的颜色值。如果没设置color值，则默认为black。

设置边框颜色也可以通过border-xxx-color来设置

border-top-color		设置上边框的颜色
border-right-color		设置右边框的颜色
border-bottom-color		设置下边框的颜色
border-left-color		设置左边框的颜色

3.3边框的样式（border-style）

​ border-style 指定边框的样式

​ ①solid 表示实线

​ ②dotted 表示点状虚线

​ ③dashed 表示虚线

​ ④double 双实线

<注意>一般边框的四个方向style相同

border-style的默认值是none 表示没有边框

3.4 border简写属性

border可以简写属性，通过该属性来同时设置边框所有的相关样式，并且没有顺序要求 用空格隔开

border： 10px orange solid；

除了border以外，border-xxx也可以设置一个方向上的边框属性

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

当我们设置某三个方向的时候，可以通过设置

border：
border-xxx：none

4.内边距（padding）

​ 内边距就是内容区和边框之间的距离是内边距

​ 内边距的默认值为0

一共有四个方向的内边距：

padding-top
padding-right
padding-bottom
padding-left

​ 内边距的设置会影响到盒子的大小

​ 背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区、内边距和边框共同决定

​ 再计算盒子大小的时候，需要将三个区域加到一起计算。

padding 内边距的简写属性，可以同时指定是个方向的内边距

​ 规则和border-width一样

padding：10px 20px 30px 40px;

5.外边距（margin）

​ 外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置

一共有四个方向的外边距：

margin-top		//上外边距	设置一个正值，元素会向下移动
margin-right	//右外边距	设置一个正值，
margin-bottom	//下外边距	设置一个正值，其下边的元素会向下移动
margin-left		//左外边距	设置一个正值，元素会向左移动

​ 元素在页面中是按照自左向右的顺序排列

所以默认情况下，如果我们设置的是左和上外边距，则会移动元素自身；而设置下和右外边距会移动其他元素

​ margin也可以设置负值，如果是设置负值，则元素会向相反的方向移动。

margin的简写属性：

​ margin可以同时设置四个方向上的外边距，用法和padding相同

margin：10px 20px 30px 40px;

​ margin会影响到盒子实际占用空间的大小

6.水平方向的布局（left/right）

​ 元素在其父元素中的水平方向的位置由以下几个属性共同决定

​ margin-left

​ border-left

​ padding-left

​ width

​ padding-right

​ border-right

​ margin-right

一个元素在其父元素中，水平布局必须满足以下的等式

margin-left + border-left + padding-left + width +

padding-right + border-right + margin-right =其父元素内容区的宽度

​ 如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

调整的情况：

​ 如果这七个值中没有为auto（自动）的情况，则浏览器会自动调整margin-right的值以使等式满足

这七个值中有三个值可以设置为auto

​ width

​ margin-left

​ margin-left

如果某个值为auto，则会自动调整为auto的值以使等式成立。

​ 当width为auto时，这个元素的width会等于它父元素的width

​ 如果margin-left和margin-right都为auto，width为固定值，则此时左边距值=右边距值。

​ 这个元素的width和height都没设置的时候，其默认为auto，与其父元素的width和height相等。

​ 如果将width和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

​ 如果将三个值都设置为auto，则外边距都为0，width会调整到最大，和其父元素相等。

​ 所以我们经常利用这个特带你来使一个元素在其父元素中水平居中

7.垂直方向的布局（top/bottom）

​ 当不对父元素高度进行设置时，如果子元素的大小超过父元素，默认情况下父元素的高度被内容撑开

子元素是在父元素的内容区中排列的，如果子元素的大小超过父元素，，则子元素会从父元素中溢出。

​ 使用overflow属性来设置父元素如何处理溢出的子元素

（1）overflow可选值：

​ ①visible：默认值

​ 子元素会从父元素中溢出，在父元素外部的位置显示。

​ ②hidden：隐藏

​ 溢出的内容将会被裁剪隐藏，不会显示

​ ③scroll：

​ 生成垂直方向和水平方向两个滚动条，通过滚动条来查看完整的内容

​ ④auto：

​ 根据需要生成滚动条

（2）overflow-x：

​ 单独处理水平方向

（3）overflow-y

​ 单独处理垂直方向

8.外边距的折叠（重叠）

​ 相邻的垂直方向的外边距会发生重叠现象

<注意>①必须是相邻的盒子

​ ②只有垂直方向的外边距才能发生重叠现象。水平方向不会。

8.1 兄弟元素：

​ 兄弟元素间的相邻垂直外边距会取两者之间的较大值。（两者都是正值）

​ margin-top 和 margin-bottom 取最大值

​ 特殊情况：如果相邻的外边距一正一负的时候，取两者的和

​ margin-top + margin-bottom

​ 如果相邻的外边距都是负值的时候，取二者中绝对值较大的

​ |margin-top| 和 |margin-bottom| 取最大值

​ 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要处理

8.2 父子元素：

​ 父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）

​ 父子元素间的外边距的折叠会影响到页面的布局，必须要进行处理

9.行内元素的盒模型

​ ①行内元素不支持设置宽度（width）和高度（height）

​ ②行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局

​ 即padding-top和padding-bottom不会影响页面的布局

​ ③行内元素可以设置border，但是垂直方向的border不会影响页面的布局

​ 即border-top和border-bottom不会影响页面的布局

​ ④行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局

​ 即margin-top和margin-bottom不会影响页面的布局

​ 两个盒子模型的margin会进行相加，不会进行折叠。

当我们需要对行内元素进行设置的时候，我们就需要将行内元素设置为块元素

9.1 display：

​ 用来设置元素显示的类型

可选值：

​ *①inline：将元素设置为行内元素 （很少）

​ *②block：将元素设置为块元素 块元素会独占一行

​ *③inline-block：将元素设置为行内块元素 （少用）

​ 既可以设置元素的宽度和高度，但是又不会独占一行

​ ④table：将元素设置为一个表格

​ ⑤table-cell：将元素设置为单元格（td）元素

​ *⑥none：设置元素，使其不在页面中显示

​ 用于隐藏元素

9.2 visibility：

​ 用于设置元素的显示状态

可选值：

​ ①visible 默认值 元素在页面中正常显示

​ ②hidden 元素在页面中隐藏，不显示

​ 当隐藏元素时，元素依然占据页面中的位置。

10.浏览器的默认样式

​ 通常情况下，浏览器都会为元素设置一些默认样式

​ 默认样式的存在会影响到页面的布局

​ 通常情况下编写网页时必须要去除浏览器的默认样式（PC端页面）

​ 用list-style:none去除项目符号

去除页面默认样式的方式：

*{
    margin：0；
    padding：0；
}
ul{
    list-style:none
}

重置样式表：

​ 专门用来对浏览器的样式进行重置

reset.css:直接去除了浏览器的默认样式 （常用）

normalize.css：对默认样式进行统一

11.盒子的尺寸（box-sizing）

​ 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

​ content-box 默认值 宽度和高度用来设置内容区的大小

​ border-box 宽度和高度用来设置整个盒子的可见框的大小

​ 内容区、内边距和边框的总大小

12.轮廓阴影和圆角

12.1轮廓（outline）

outline：用于设置元素的轮廓线，用法与border相同

​ outline和border的不同点：轮廓不会影响到可见框的大小

12.2 阴影（box-shadow）

box-shadow：用来设置元素的阴影效果，不会影响到页面布局

​ 第一个值：水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动

​ 第二个值：垂直偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动

​ 第三个值：隐形的模糊半径 值越大，阴影越模糊

​ 第四个值：阴影的颜色 常用rgba（0 ，0，0，.3）

12.3圆角(border-radius)

​ border-radius: 用来设置圆角 圆角设置的圆的半径大小

border-top-left-radius：		用来设置左上角为圆角 
border-top--right-radius：	用来设置右上角为圆角
border-bottom-left-radius：	用来设置左下角为圆角
border-bottom-right-radius：	用来设置右下角圆角

圆角值越大，圆的半径越大，弧度越大

当对一个角设置两个值的时候，第一个值为水平方向，第二个值为竖直方向

border-top-left-radius： 10px 50 px;

border-radius可以分别指定四个角的圆角

四个值： 左上角 右上角 右下角 左下角

三个值： 左上角 右上角/左下角 右下角

两个值： 左上角/右下角 右上角/左下角

一个值： 四个角统一