一. 盒子模型

1.1. margin

margin的设置问题
- top/right/bottom/left
margin和padding的选择
margin的传递和折叠
- 父子的传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
- 兄弟的折叠：如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题？

给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto margin进行水平居中：
- 0 auto;

补充：

上下margin的折叠：

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

水平方向上的margin（margin-left、margin-right）永远不会collapse

折叠后最终值的计算规则

两个值进行比较，取较大的值

1.2. outline

外轮廓：不占用空间

1.3. box-shadow

box-shadow: offset-x offset-y blur-radius spread-radius color

第1个：offset-x, 水平方向的偏移，正数往右偏移
第2个：offset-y, 垂直方向的偏移，正数往下偏移
第3个：blur-radius, 模糊半径
第4个：spread-radius, 延伸半径
：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影每个阴影用表示，多个阴影之间用逗号,隔开，从前到后叠加

补充：盒子阴影 – 在线查看

html-css-js.com/css/generat…

1.4. text-shadow

text-shadow用法类似于box-shadow，用于给文字添加阴影效果

text-shadow: offset offset-y blur color;

我们可以通过一个网站测试文字的阴影: html-css-js.com/css/generat…

1.5. box-sizing

content-box：padding、border都布置在width、height外边
border-box(常用)：padding、border都布置在width、height里边

*box-sizing: content-box（元素的实际占用宽度 = border + padding + width）

1.6. 注意事项

width/height/margin-top/margin-bottom 对于行内非替换元素是无效的
padding-top/bottom, border-top/bottom 对于行内非替换元素有特殊效果

1.7. 水平居中

行内级元素
- text-align: center
块级元素有宽度
- margin: 0 auto;

三. 背景设置

3.1. background-image

background-image用于设置元素的背景图片
- 会盖在(不是覆盖)background-color的上面
如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

3.2. background-repeat

background-repeat用于设置背景图片是否要平铺；

常见的设值有：

repeat：平铺
no-repeat：不平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直平方向平铺

3.3. background-size

background-size用于设置背景图片的大小

auto：默认值, 以背景图本身大小显示
cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
：百分比，相对于背景区（background positioning area）
length：具体的大小，比如100px

3.4. background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置总结

总结

可以设置具体的数值比如 20px 30px;
水平方向还可以设值：left、center、right
垂直方向还可以设值：top、center、bottom
如果只设置了1个方向，另一个方向默认是center

3.5. background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

可以设置以下3个值

scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动
local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

3.6. background-image和img区别和选择

利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

总结

img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

前端体系复习-html和css(六)