盒子模型

盒子属性

content是通过宽度和高度设置的

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距，缩写是从零点钟方向顺时针转动的, 也就是上右下左

border用于设置盒子的边框，具备：width、style（常用solid视线、dashed虚线、dotted点缀）、color

border-radius用于设置盒子的圆角。常见值：数值、百分比，如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.

outline：通常给a和input去掉focus轮廓效果，不占用空间用法和boder一样

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距

父子之间的距离用padding,兄弟之间的间距用margin

行内非替换元素对width,height,margin上下无效 ,但是对border/padding上下有特殊,会撑开盒子,但是不占空间

上下margin的传递

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

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

   解决方案：

   1. 给父元素设置padding-top\padding-bottom
   2. 给父元素设置border
   3. 触发BFC: 设置overflow为auto

margin一般是用来设置兄弟元素之间的间距 , padding一般是用来设置父子元素之间的间距

上下margin的折叠

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

水平方向上的margin永远不会collapse

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

阴影

测试盒子的阴影：html-css-js.com/css/generat…

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

box-shadow: x右偏移, y下偏移, 模糊半径，延伸半径，阴影颜色，inset外边框变内边框

text-shadow用法类似于box-shadow，用于给文字添加阴影效果, 它没有延伸spread-radius的值

box-sizing

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

• content-box（默认）：实际占用宽高 = border + padding + width/height
• border-box：元素的实际占用宽高 = width/height

元素水平居中

• 行内级元素(包括inline-block元素)： 在父元素中设置text-align: center
• 块级元素（有宽度）：margin: 0 auto
• absolute（有宽度）：left:0； right:0； margin:0 auto
• flex: justify-content: center

元素垂直居中

• absolute（有高度）：top:0；bottom:0；margin:auto 0

  弊端：

  1. 必须使用定位，脱离标准流
  2. 必须设置高度

• flex布局：align-item: center

  弊端：

  1. flex布局中所有的元素都会被垂直居中

• trancform: position: relative；top:50%；trancform:tranclete(0 , 50%)

让元素向下移动父元素的50%，让元素移动自身的50%

为什么不用margin-top：margin-top的百分比是相对于包含块（父元素）的宽度

设置背景

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

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

• background-image，可有可无，能让网页更加美观，也不影响用户获取完整的网页内容信息

background-image用于设置元素的背景图片，会盖在(不是覆盖)background-color的上面,元素没有具体的宽高，背景图片是不会显示出来的

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

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