CSS-4 外边距margin；外轮廓outline；盒子阴影box-shadow；行内非替换元素注意事项； box-sizing；背景background

1_外边距margin

1.1_设置盒子的外边距, 用于元素和元素的间距

1.2_margin包括四个方向

• margin-top：上内边距

• margin-right：右内边距

• margin-bottom：下内边距

• margin-left：左内边距

1.3_margin一个缩写属性：

• 包括margin-top、margin-right、margin-bottom、margin-left

• margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

  【跟padding一样，可以按需求设置值得个数】

1.4_上下margin的传递问题【重要】

（左右margin不会传递）

• margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

• margin-bottom传递

如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素；

当父元素的height为auto，或者未设置height（默认为auto）时会出现Bottom传递

• 如何防止出现传递问题？

  • 给父元素设置padding-top\padding-bottom

  • 给父元素设置border
    ​父元素会出现黑色边界线，若不想显，则给border附加设置透明度transparent或rbga(0,0,0,0)，但是该边界会客观存在,占用空间

  • 触发BFC: 设置overflow为auto

• 关于overflow 的值【补充】

  • visible：内容不会被截断，且可以显示在内容盒之外。

  • hidden：内容会被截断，且不会显示滚动条。

  • scroll：桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。

  • auto：取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。

• 建议

  • margin一般是用来设置兄弟元素之间的间距

  • padding一般是用来设置父子元素之间的间距

1.5_上下margin的折叠现象collapse

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

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

• 折叠后最终值的计算规则：​两个值进行比较，取较大的值

• 如何防止margin 上下折叠？
  ​ 只设置其中一个元素的margin-top或者margin-bottom

1.6_块级元素水平居中

• 块级元素div如何消除块边界与浏览器的缝隙，

  在style中选择元素body，令padding、margin值同时为0

body{
	margin:0;
	padding:0;
}

• 父子关系的两个块级元素，让子元素居中

margin:  0 auto；/*选中子元素，加上这个样式*/

2_外轮廓 - outline

2.1_outline表示元素的外轮廓

• 不占用空间

• 默认显示在border的外面

2.2_outline相关属性有

• outline-width: 外轮廓的宽度

• outline-style：取值跟border的样式一样，比如solid、dotted等

• outline-color: 外轮廓的颜色

• outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

2.3_去除a、input元素的focus轮廓效果

outline: none；

去除的原因是：a和input默认外轮廓比较丑，按Tab键选中该元素会出现外轮廓

3_盒子阴影box-shadow

3.1_box-shadow属性可以设置一个或者多个阴影

• 每个阴影用表示

• 多个阴影之间用逗号,隔开，从前到后叠加

3.2_常见格式如下

下图是官网文档的格式

• 第1个length：offset-x, 水平方向的偏移，正数往右偏移

• 第2个length：offset-y, 垂直方向的偏移，正数往下偏移

• 第3个length：blur-radius, 模糊半径

• 第4个length：spread-radius, 延伸半径

• color：阴影的颜色，如果没有设置，就跟随color属性的颜色

• inset：外框阴影变成内框阴影

3.3_文字阴影 text-shadow【不常用】

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

3.4_盒子/文字阴影 – 在线查看网站

https://html-css-js.com/css/generator/box-shadow/

4_行内非替换元素的注意事项

行内非替换元素例如：span、i、p

4.1_以下属性对行内级非替换元素不起作用

width、height、margin-top、margin-bottom

4.2_以下属性对行内级非替换元素的效果比较特殊

• padding-top、padding-bottom、
  • 特殊: 上下会被撑起来, 但是不占据空间
  • 即上下有其他块级元素时，二者会重合
• 上下方向的border
  • 上下会被撑起来, 但是不占据空间 , border: 50px solid orange;

5_CSS属性 - box-sizing

box-sizing用来设置盒子模型中宽高的行为

5.1_box-sizing: content-box

• padding、border都布置在width、height外边

5.2_box-sizing: border-box

• padding、border都布置在width、height里边

6_CSS设置背景

6.1_background-image

• 设置元素的背景图片： 盖在(不是覆盖)background-color的上面
• 设置了多张图片： 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
• 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

6.2_background-repeat

• 设置背景图片是否要平铺

• 常见的设值有

  repeat：平铺

  no-repeat：不平铺

  repeat-x：只在水平方向平铺

  repeat-y：只在垂直平方向平铺

6.3_background-size

• 设置背景图片的大小

  auto：默认值, 以背景图本身大小显示

  span：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

  contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比

  percentage：百分比，相对于背景区（background positioning area）

  length：具体的大小，比如100px

6.4_background-position

• 设置背景图片在水平、垂直方向上的具体位置

  • 设置具体的数值 比如 20px 30px;

  • 水平方向还可以设值：left、center、right

  • 垂直方向还可以设值：top、center、bottom

  • 如果只设置了1个方向，另一个方向默认是center

6.5_background-attachment

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

• 有以下3个值

  scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动

  local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.

  fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。【随着浏览器的大滚动条移动】

6.6_background缩写属性

• 是上面一系列背景相关属性的简写属性

• background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面

  其他属性也都可以省略，而且顺序任意

• 总之具体格式可以去查官方文档

6.7_background-image和img对比

• 总结： img属性，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片