css盒模型

1.盒子组成

1.1.边框属性

格式： border：宽度  样式（不能省略）  颜色；

border-top: 边框的宽度 边框的样式 边框的颜色 ;

border-right: 边框的宽度 边框的样式 边框的颜色 ;

border-bottom: 边框的宽度 边框的样式 边框的颜色 ;

border-left: 边框的宽度 边框的样式 边框的颜色 ;

省略规律：

右 下 左 > 上 右 下 > 左边的取值和右边的⼀样

上 右 下 左 > 上 右 > 左边的取值和右边的⼀样 下边的取值和 上边⼀样

上 右 下 左 > 上 > 右下左边取值和上边⼀样

border-radius： 为元素指定圆角边框的半径取值：绝对值 px 、 mm 、 cm 相对值，em 、 rem %

                                            50%为圆

1.2.外边距属性

标签和标签之间的距离就是外边距

margin-top: ;  margin-right: ;  margin-bottom: ;  margin-left: ;

外边距这一部分是没有背景颜色的， 在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。水平方向上的外边距会叠加

1.3.内边距属性（padding）

边框和内容之间的距离就是内边距，给标签设置内边距之后, 标签占有的宽度和高度会发生变化，给标签设置内边距之后, 内边距也会有背景颜色。

2.css盒模型

2.1.内容盒子

width 属性仅表示盒子内容所占的宽度

height 属性仅表示盒子内容所占的高度

盒子的宽： width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高： height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕宽： width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕高：

height+paddingTop+paddingBottom+borderTop+borderBottom+mar ginTop+marginBottom

为⼀个盒子指定 width 属性的时候，实际上width 仅为内容的宽度，当 padding 和 border 变大的时

候，内容宽度不变，盒子所占的总体宽度要变大。

2.2.边框盒子

box-sizing: border-box;可以改变盒子模型为边框盒子，这样盒子的宽高就为width与height

内容区的宽： width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高： height-paddingTop-paddingBottom-borderTop-borderBottom

所占屏幕的宽： width+marginLeft+marginRight

所占屏幕的高： height+marginTop+marginBottom

我们为⼀个盒子指定 width 属性的时候，实际上width 包含了 border 和 padding 的宽度，如果 border 不变，padding变大，这时候内容会变小。

盒子注意点： 如果两个盒子是嵌套关系 , 那么设置了里面一个盒子(子 元素 ) 顶部的 外边距 , 外面⼀个盒子( 父元素 ) 也会被顶下来。
 

子元素和父元素的上边框重合在一起，因为父元素的第⼀个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己父元素的麻烦。只要给父元素设置⼀个有效的border或padding就可以有效的管制这个margin-top，防止它越级，把自己的margin-top当成父素的margin-top执行。如果外面的盒子不想被顶下来可以设置一个边框属性。

3.盒子背景样式

3.1.background-color 背景颜色

取值：具体单词   rgb   rgba  十六进制

3.2.background-image 背景图片

background-image: url();

如果图片的大小没有标签的大小大 , 那么会自动在水平和垂直方向平铺来填充

3.3.background-repeat 背景平铺属性

用于控制背景图片的平铺方式的

background-repeat: ;

取值：

repeat 默认 , 在水平和垂直都需要平铺

no-repeat 在水平和垂直都不需要平铺

repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

3.4.background-position 背景定位属性

background-position: 水平方向 垂直方向;

取值：

具体的方位名词

水平方向 : left center right

垂直方向 : top center bottom

具体的像素，⼀定要写单位, 也就是⼀定要写px

同⼀个标签可以同时设置背景颜色和背景图片 , 如果颜色和图片同时存在, 那么图片会覆盖颜色

3.5.背景关联方式

background-attachment ： scroll;

取值： scroll 默认值， 会随着滚动条的滚动而滚动

            fixed 不会随着滚动条的滚动而滚动

背景图片和插⼊图片区别

背景图片仅仅是⼀个装饰 , 不会占用位置，插⼊图片会占用位置

背景图片有定位属性 , 所以可以很方便的控制图片的位置，插入片没有定位属性, 所以控制图片的位置不太方便

插入图片的语义比背景图片的语义要强