荐 CSS重中之重------盒子模型

盒子模型（重中之重------毕竟重量级的总是最后出场嘛！ (国之重器 绝世无双)）

盒子模型常用属性：width;height;border;padding;margin;background;

盒模型详解

关于盒模型的解析，一直存在两种方式：

• IE盒模型
• 标准盒模型

在HTML文档头部引入文档头，就可以保证使用标准盒模型来进行解析。
在标准盒模型中（以块级元素为例）：

• 水平方向占据的总宽度：
  margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
• 垂直方向上占据的总高度：
  margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

1.width和height

• 对于块元素和行内块元素，表示内+ 区域。
• 对于行内元素，width和height+ 效。

[注意]：

• 如果没有doctype头，在ie6以下览器中，规则不太一样。
• width属性默认值为auto，块元素贪婪性和行内元素的懒惰性。
• 实际上，对于行内元素而言，其宽有内容本身决定，而其高度则font-size决定。
• width和height可以设置百分比，对于父元素的width和height而言。

2.border特性及设置

border的基本使用：
我们描述一个border有如下三个方面：

• 边框大小（粗细）border-width
• 边框的样式 border-style
• 边框颜色 border-color

border是一个简写的属性，是border-width、border-style、border-color的简写。

• 三个属性之间没有固定的顺序，怎写都行
• 属性之间使用空格隔开
• 针对border-widthborder-style、border-color，分别有四个方向的子属性,border-top-widthborder-top-style，一般很少使子属性来设置边框。

border-width的设置

表示边框的大小（粗细），我们有两种方式设置：

• 具体的像素值，如5px，推荐使用
• 使用表示粗细的英文，thin，thick，medium，很少会使用，不同的浏览器解析的大小不一致。

border-style的设置

表示边框的样式，有如下几种：

• solid，实线
• dotted，点画线
• dashed，虚线
• none 没有
• double：定义边框为双边框线。
• groove：定义边框为3D凹槽。
• ridge：定义为边框3D凸槽。
• inset：定义边框为3D凹边。
• outset：定义边框为3D凸边。
• hidden：隐蔽边框，IE不支持。
• double 及以下的部分，一般使用不多，因为它们在不同的浏览器中有不同的表现。

同理，border-style也分为上右下左四个方向的子属性
border-color的设置

border-color就是边框的颜色，可以使用如下三种方式来设置：

• 颜色英文名称
• rgb函数
• 十六进制

border-color也分为四个方向的子属性，如border-top-color。

在border中的三个属性中，其实它们都有默认值，

• border-width，默认是medium，一般是3px
• boder-color，默认是字体的颜色，
• border-style，默认是none

3.padding特性及设置

padding，表示内边距，或者叫补白。
所表示的区域是边框 到 内容之间的 那块空间。

padding有四个方向上的子属性：

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

具体写法有如下几种：

• 单独的设置某一个子属性
• padding：一个值 四边相同
• padding：两个值 第一个值表示上下的，第二个值表示左右的
• padding：三个值 第一个值表示上的，第二个值表示左右的，第三个值>+表示下的
• padding：四个值 分别是上、右、下、左。

注意：

• padding可以使用百分比，是相对于父元素的width值，一般在响应式we>+b中使用。
• 有些标签有默认的padding值，如ul、ol等。
• 对于行内元素，padding在垂直方向上不影响行高。

在开发页面的时候，为了保证所有的这些标签都有统一的一个padidng值，采取一刀切，
* {padding:0;}

对于padding而言，如果是行内元素，它在垂直方向上不影响行高。

注意对上面代码的理解：

• padding表示边框和内容之间的空间，所以边框会向四周延展。
• 但是由于行内元素的paddng在垂直方向是不影响行高的，所以整体的行与行之间的距离并没有拉开

4.margin特性及设置

margin表示边界，外边距。当前元素和另一个元素之间的距离，在border之外的。

margin的使用

margin也是简写的属性，实际上它又分为四个方向上的子属性：

• margin-top
• margin-right
• margin-bottom
• margin-left

具体的设置有如下几种：

• 使用子属性来设置某个具体的外边距
• margin：一个值，表示四个外边距都是一样的
• margin：两个值，第一个值表示上下的，第二个值表示左右的
• margin：三个值，第一个值表示上，第二个值表示表示左右的，第三个值>+表示下
• margin：四个值，分别对应上、右、下、左

注意：

• margin可以使用百分比，是相对于父元素的width值。
• 有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等。
• 对于行内元素，margin在垂直方向上无效。
• margin的auto设置。 块状元素在垂直方向上有重叠现象。
• margin可以使用负值。

关于某些标签具备默认的margin，在我们布局的页面，会造成一些不好的影响。为了简单起见，采取一刀切的方式，把凡是有默认margin值的这些元素都置0。使用即可。
*{margin:0;}*

• 对于行内元素，margin值在垂直方向上无效.
• 关于margin，有一个auto的值，比较特殊，经典应用之一就是用来实现元素的水平居中效果。

5.块级元素特点

水平方向：

• margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
• width、margin-left和margin-right可以设置为auto，其余必须为特定值，或默认为0
• 如果margin-left/right都设置为auto，它们会设置为相同的长度，因此将元素在其父元素中居中
• 如果3个属性都设置为auto，则两个外边距都会设置为0，而width尽可能宽，这是默认情况
• 如果width、margin都是auto的话（这个前提不能少），我们再来设置padding或border，相应的width就会减小，保证整个块级元素的大小不要超过父元素。

垂直方向

• margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom
• 默认高度由其内容决定，它会受内容宽度的影响，内容越窄，相应的就会越高
• 相邻元素垂直相邻外边距会重叠
• 父子元素间的重叠（同向margin、父元素没有border或padding、重叠是对外而言）

6.行级元素特点

水平方向

• margin-left、border-left、padding-left、padding-right、border-right、margin-right
• width无效，由内容本身决定

垂直方向

• height无效，有font-size和line-height决定
• 内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响元素行内框的高度，也不会影响包含该元素的行框的高度

7.background深入（重难点）

在css中，和背景有关的属性，有如下5个：

• background-color;background-image;background-repeat;background-position;background-attachment;

background-color
作用，设置当前元素的背景颜色

background-image
作用：用来给当前元素添加背景图片

• 默认情况下，如果图片小于元素，在水平和垂直方向都会重复该图片。
• 默认情况下，图片的左上角和元素的左上角对齐。

实际上，上述两个默认值，是可以修改的。

background-repeat
作用：用来控制背景图片在元素中水平和垂直方向上是否重复

取值有如下四个：

• repeat，也是默认的值
• no-repeat，完全不重复，有仅有一个
• repeat-x，水平方向上重复
• repeat-y，垂直方向上重>>+ （向下为正）

注意点：
在重复背景图片的时候，有多少空间，就重复多少内容，并不需要说要完整的图片大小空间才行。

background-position
作用：用来设置背景图片的位置。

格式：background-position :position-x position-y

具体在设置的时候，有如下三种设置方式：

• 使用关键字，top、left、right、bottom
• 使用百分比，0%、50%、100%
• 使用像素值，25px、100px

除了像素值，还可以使用关键字

• 水平方向：left、center、right
• 垂直方向：top、center、bottom

注意：当我们使用关键字的时候，比如使用top，它的意思是元素的顶端和背景图片的顶端对齐。比如使用center，其含义是元素的中心点和背景图片的中心点是对齐的。

关于百分比的使用

• 0%，水平方向相当于 left，>+ 直方向相当于top
• 50%，水平方向相当于center垂直方向相当于center
• 100%，水平方向相当于right垂直方向相当于bottom

友情提示：background-position理解起来确实有点困难，一定要自己写对应代码，分析定位的过程，并加以理解。

background-attachment

作用：定义背景图片是随元素滚动还是固定

有两个值：

• scroll，表示背景图片会随着滚动条的滚动而滚动
• fixed，固定不变

在实际开发中，background-attachment基本上不会用到。

上面我们讲到了关于背景的几个属性，background-color，background-image，background-repeat，background-position。
实际上它们有一个简写的属性：background

注意细节：

• background中的背景颜色，默认值是transparent，透明的。
• background所覆盖的区域，包括padding和内容区域。>+ （border先放一下，应用比较>+ 少）
• 在设置背景的时候，很容易覆盖前面的设置。
• background的顺序有要求，按照顺序来写。

本文地址：https://blog.csdn.net/m0_46412825/article/details/107283593