css3复习P3（盒子模型）

---

文档中的所有元素其实都是一个个的矩形盒子，对页面文档的布局也就是通过css将一个个盒子放在不同的位置上。

一、盒子组成

margin 外边距

代表盒子四周的区域，相邻元素的边距会合并

格式：
margin-top：；
margin-right：；
margin-bottom：；
margin-left：；
浏览器是默认左对齐的。看起来margin-right没有生效，其实有效果的，只是在默认即标准流的情况的下显示不出来效果。
简写：margin：（上 右 下 左）；
注意点:
​ 外边距的那一部分是没有背景颜色的；
外边距合并：
①兄弟合并
相邻兄弟元素之间的下外边距以及上外边距会折叠，两者之间取较大值；
特殊情况：
如果相邻的外边距一正一负，则取两者的和；
如果相邻的外边距都是负值，则取两者中绝对值大的；
解决办法：
①只给其中一个元素设置外边距；
②开启BFC，即给其中一个元素包裹一个容器，给此容器设置overflow：hidden；
②父子合并：
当父子元素在同一个方向都设置了外边距时，此时会发生外边距合并现象；
父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断 一层一层的找自己父元素的麻烦。会把自己的margin-top当成父元素的margin-top执行。
解决办法：
①给父元素设置内边距；
②给父元素设置边框；
③给父元素设置overflow：hidden；

border 边框

设定介于padding的外边缘与margin的内边缘之间，默认值为0
边框宽度
​ border-width: 5px;
边框样式
​ border-style: solid;
边框样式取值：
​ 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 的值。
​ 边框颜色
​ border-color: red;
​ 连写(同时设置四条边的边框)
​ border: 边框的宽度 边框的样式 边框的颜色;

​ 快捷键:
​ bd+ border: 1px solid #000;

​ 注意点:
​ 1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
​ 2.连写格式中样式不能省略, 省略之后就看不到边框了
​ 3.连写格式中宽度可以省略, 省略之后还是可以看到边框

​ 连写(分别设置四条边的边框)
​ border-top: 边框的宽度 边框的样式 边框的颜色;
​ border-right: 边框的宽度 边框的样式 边框的颜色;
​ border-bottom: 边框的宽度 边框的样式 边框的颜色;
​ border-left: 边框的宽度 边框的样式 边框的颜色;

​ 快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
​ bl+

​ 连写(分别设置四条边的边框)
​ border-width: 上 右 下 左;
​ border-style: 上 右 下 左;
​ border-color: 上 右 下 左;

​ 注意点:
​ 1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
​ 2.这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 - 左边的取值和右边的一样
上 右 下 左 > 上 右 - 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 - 右下左边取值和上边一样
非连写(方向+要素)

​ border-left-width: 20px;
​ border-left-style: double;
​ border-left-color: pink;
border-radius
为元素指定圆角边框的半径取值：绝对值 px、mm 、cm 相对值 em 、rem %

padding 内边距

内间距 在任何定义的边界内的元素内容周围生成空间
格式：
​ padding-top: ;
padding-right: ;
​ padding-bottom: ;
​ padding-left: ;

​ 注意点:
​ 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
​ 2.给标签设置内边距之后, 内边距也会有背景颜色

连写
​ padding: 上 右 下 左;

这三个属性的取值省略时的规律

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

内容区

元素中所有的子元素都在内容去中排列，内容区的大小由width、height两个属性设置，盒子高度默认为内容的高度。
width
内容宽度，块级元素默认 100%，单位可以：px em %
height
内容高度，默认 0 ，由子元素填充，单位可以： px em %
max-width
定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
min-height
属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

二、盒模型

w3c盒子（内容盒子/标准盒子）

w3c盒子是默认盒子模型，通过box-sizing可以设置盒子模型，取值为“content-box”的盒子为默认盒子模型。
width 属性仅表示盒子内容所占的宽度；
height 属性仅表示盒子内容所占的高度；

盒子的宽：
border-left+padding-left+width+padding-left+border+left；
盒子的高：
border-top+padding-top+height+padding-bottom+border-bottom；
盒子在页面中占据的宽：
margin-left+border-left+padding-left+width+padding-left+border+left+margin-right；
盒子的页面中占据的高：
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom；
当为该盒子指定width和height时，两个属性仅是设置内容区的大小，指定padding/border/margin时，盒子的内容区大小不会变大，而是盒子的宽高以及盒子在页面所占据的宽高发生变化；

边框盒子（IE盒子/怪异盒子）

将box-sizing的值设置为border-box可以将盒子从w3c盒子变为边框盒子；
内容区的宽：
border-left+padding-left+width+padding-left+border+left；
内容区的高：
border-top+padding-top+height+padding-bottom+border-bottom；
盒子的宽：
width
盒子的高：
height
盒子在页面中占据的宽：
margin-left+width+margin-right；
盒子的页面中占据的高：
margin-top+height+margin-bottom；

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

盒子模型注意点

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

在嵌套关系的盒子中:
我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto；
margin: 0 auto; 只对水平方向有效, 对垂直方向无效

三、盒子背景样式

background-color 背景颜色

专门用来设置标签的背景颜色的
​ 取值:
​ 具体单词
​ rgb
​ rgba
​ 十六进制

​ 快捷键:
​ bc background-color: #fff;

background-image 背景图片

专门用于设置背景图片的
​ 快捷键:
​ bi background-image: url();

​ 注意点:
​ 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
​ 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

background-repeat 背景平铺属性

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

​ 取值:
​ repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
​ repeat-x 只在水平方向平铺
​ repeat-y 只在垂直方向平铺

 快捷键
		bgr background-repeat:

background-position 背景定位属性

专门用于控制背景图片的位置
​ 格式:
​ background-position: 水平方向 垂直方向;

​ 取值
​ 具体的方位名词
​ 水平方向: left center right
​ 垂直方向: top center bottom

​ 具体的像素
​ 例如: background-position: 100px 200px;
​ 记住一定要写单位, 也就是一定要写px
​ 记住具体的像素是可以接收负数的

 快捷键:
		bp background-position: 0 0;

​ 注意点:
​ 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

背景属性的缩写

背景属性缩写的格式
​ background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

​ 快捷键:
​ bg+ background: #fff url() 0 0 no-repeat;

​ 注意点：
​ background属性中， 任何一个属性都可以被省略

什么是背景关联方式？

​ 默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么 我们就可以修改背景图片和滚动条的关联方式.

如何修改背景关联方式？

​ 在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

​ 格式
​ background-attachment：scroll;

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

​ 快捷键:
​ ba background-attachment:;

​ -背景图片和插入图片区别?
​ 背景图片仅仅是一个装饰, 不会占用位置
​ 插入图片会占用位置

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

​ 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片