盒子模型常用属性：width;height;border;padding;margin;background;
关于盒模型的解析，一直存在两种方式：
- IE盒模型
- 标准盒模型
在HTML文档头部引入文档头，就可以保证使用标准盒模型来进行解析。
在标准盒模型中（以块级元素为例）：
[注意]：
- 如果没有doctype头，在ie6以下览器中，规则不太一样。
- width属性默认值为auto，块元素贪婪性和行内元素的懒惰性。
- 实际上，对于行内元素而言，其宽有内容本身决定，而其高度则font-size决定。
- width和height可以设置百分比，对于父元素的width和height而言。
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
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在垂直方向是不影响行高的，所以整体的行与行之间的距离并没有拉开
margin表示边界，外边距。当前元素和另一个元素之间的距离，在border之外的。
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的值，比较特殊，经典应用之一就是用来实现元素的水平居中效果。
水平方向：
- 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、重叠是对外而言）
水平方向
- margin-left、border-left、padding-left、padding-right、border-right、margin-right
- width无效，由内容本身决定
垂直方向
- height无效，有font-size和line-height决定
- 内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响元素行内框的高度，也不会影响包含该元素的行框的高度
在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
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
我要评论
网友评论