Python全栈开发学习--HTML--CSS盒模型--Day3

css盒模型概述

盒模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

每个盒模型都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。盒模型结构如下图所示， 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置

以下几点需注意：
（1）在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
（2）外边距默认是透明的，不会遮挡其后的任何元素
（3）设置一个CSS元素的背景时，该背景只会覆盖内容和内边距两部分
（4）总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
（5）总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
（6）外边距可以是负值，而且在很多情况下都要使用负值的外边距。
（7）内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

0.1 CSS的两种盒模型

0.1.1 标准盒模型

在标准的盒子模型中：
width指content部分的宽度
height指content部分的高度

0.1.2 IE盒模型

在IE盒模型中：
width表示 content.width + padding-left + padding-right + border-left + border-right
height表示 content.height + padding-top + padding-bottom + border-top + border-bottom

0.1.3 box-sizing的使用

如果想要切换盒模型需要借助css3的box-sizing属性

box-sizing: content-box    W3C标准盒模型
box-sizing: border-box     IE盒模型
/*box-sizing的默认属性是content-box*/

一、border边框属性

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许规定元素边框的样式、宽度和颜色，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。。

1.1 定义border-style(边框样式)

边框样式可以分开对每一条边进行设置：

（1）border-top-style：上边界样式
（2）border-bottom-style：下边界样式
（3）border-left-style：左边界样式
（4）border-right-style：右边界样式

属性值	描述
none	默认无边框
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

/*简写*/

border-style:dotted ;  /*定义上下左右都为dotted*/               
border-style:dotted solid ;   /*定义上下为dotted*, 左右为solid*/
border-style:dotted solid double ; /*定义上为dotted, 左右为solid，下为double*/
border-style:dotted solid double dashed ; /*定义上为dotted, 右为solid，下为double， 左为dashed*/ 

1.2 定义border-width(边框宽度)

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。边框宽度也可以分开对每一条边进行设置：

（1）border-top-width：上边界宽度
（2）border-bottom-width：下边界宽度
（3）border-left-width：左边界宽度
（4）border-right-width：右边界宽度

border-top-width:0.2em;         /*定义顶部边框的宽度为元素内字体大小的 0.2倍*/
border-bottom-width: 12px;      /* 定义底部边框宽度为12px*/

/*简写*/
border-width:2px;                      /* 定义4个边都为2px*/
border-width:2px 4px;                  /* 定义上下边为2px,左右边为4px*/
border-width:2px 3px 4px;              /* 定义上边为2px,左右边为3px,下边为4px*/
border-width:2px 3px 4px 5px;          /* 定义上边2px,右边为 3px,下边为 4px，左边为5px*/

1.3 定义border-color(边框颜色)

边框颜色也可以分开对每一条边进行设置：

（1）border-top-color：上边界颜色
（2）border-bottom-color：下边界颜色
（3）border-left-color：左边界颜色
（4）border-right-color：右边界颜色

可以设置的颜色：

（1）name - 指定颜色的名称，如 "red"
（2）RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
（3）Hex - 指定16进制值, 如 "#ff0000"

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

/*简写*/
border-color:red;                      /* 定义4个边都为red*/
border-color:red blue;                  /* 定义上下边为red,左右边为blue*/
border-color:red blue green;              /* 定义上边为red,左右边为blue,下边为green*/
border-color:red blue green withe;          /* 定义上边red,右边为 blue,下边为green，左边为withe*/

简写总结：
（1）border-style：属性1，属性2，属性3，属性4

上->右->下->左

（2）border-style：属性1，属性2，属性3

上->左右->下

（3）border-style：属性1，属性2

上下->左右

（4）border-style：属性1

上下左右属性相同

border属性对照表

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

1.4 总结

1.4.1综合写法

border : border-width || border-style || border-color

border 是一个复合属性，可以把3个子属性结合写在一起。
注意：顺序不能错误。

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;

1.5 拓展（css3 圆角边框：border-radius）

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

例如：

border-radius: 15px;

表示同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为15px


这是一个简写属性，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。

（1）border-top-left-radius：左上角
（2）border-top-right-radius：右上角
（3）border-bottom-left-radius：左下角
（4）border-bottom-left-radius：右下角

简写
border-radius值的个数以及每个值对应控制的位置：

border-radius 15px /*设置四个角的边界半径为15px*/
border-radius 15px 20px  /*设置左上角和右下角的边界半径为15px，右上角和左下角为20px*/
border-radius 15px 20px 25px  /*设置左上角的边界半径为15px，右上角和左下角为20px，右下角为25px */
border-radius 15px 20px 25px 30px  /*设置左上角为15px，右上角为20px，右下角为25px，左下角为30px*/

1.6 拓展（css3 图形边框：border-image）

border-image 属性是一个简写属性，用于设置以下属性：

属性	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image:url(border-image.png) 40  10px  20px round;

/*其中border-image属性可以用以下一组属性代替*/
border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;

1.7 拓展（css3 盒子阴影： box-shadow）

语法：

box-shadow: h-shadow v-shadow blur spread color inset

属性	描述
h-shadow	必需。水平阴影的偏移量。允许负值。
v-shadow	必需。垂直阴影的偏移量。允许负值。
blur	可选。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
spread	可选。阴影的尺寸。取正值时，阴影扩大；取负值时，阴影收缩。默认为0。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下

box-shadow: 10px 10px 5px #888888;

二、内边距（padding）属性

padding属性用于设置内边距。是指边框与内容之间的距离。padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片

• （1）padding-top：上内边距
• （2）padding-right：右内边距
• （3）padding-bottom：下内边距
• （4）padding-left：左内边距

padding: 3px;   /*上下左右都是3px*/
padding: 3px 5px;  /*上下：3px   左右：5px*/
padding: 3px 5px 7px;   /*上：3px   左右：5px    下：7px*/
padding: 3px 5px 7px 9px;  /*上：3px   右：5px    下：7px   左：9px*/

三、外边距（margin）属性

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。

（1）margin-top：上外边距
（2）margin-right：右外边距
（3）margin-bottom：下外边距
（4）margin-left：上外边距
（5）margin：上外边距 右外边距 下外边距 左外边

margin: 3px;   /*上下左右都是3px*/
margin: 3px 5px;  /*上下：3px   左右：5px*/
margin: 3px 5px 7px;   /*上：3px   左右：5px    下：7px*/
margin: 3px 5px 7px 9px;  /*上：3px   右：5px    下：7px   左：9px*/

3.1 外边距的扩展知识

3.1.1 外边距的合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

解决方法：

可以为上面元素的添加margin-bottom，或者为下面的元素添加 margin-bottom

3.1.2 盒模型元素水平居中

让一个盒子实现水平居中，需要满足一下两个条件：

（1）必须是块级元素。

（2）盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中

.div{ width:960px; margin:0 auto;} 
/* margin:0 auto 相当于 left:auto;right:auto */

四、盒模型使用注意事项

4.1 内容(content)宽度和高度（width 和 height）

使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值

注意：

1、宽度属性 width 和高度属性 height 仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小

4、根据稳定性来分，建议如下：按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）

特别鸣谢以下文章的内容支持
css盒子模型
w3school