css盒子模型|背景色

盒子模型、css设置背景色

四、盒子模型

1、盒子模型(Box Model）

内容（content）
- 元素的内容width/height，min-width/max-width
内边距（padding）
- 元素和内容之间的间距
边框（border）
- 元素自己的边框
外边距（margin）
- 元素和其他元素之间的间距
外轮廓（outline）
- 不占据空间被focus的时候会出先多数用来去除a标签button的外轮廓的

2、内容（content）宽高

设置宽度和高度是设置的内容的宽度和高度不包含内边距、外边距和边框: 宽度设置: width

注意：正常情况下，width100% 但父级没有设置宽度的时候、会最大程度的撑到有设置宽度的祖先级元素的大小，但是当设置text-overflow、overflow 和 flex-shrink=0的时候这个时候一定要给父级元素宽度，不然没有办法浏览器是不知道要撑起多大的元素内容会超出元素失效

flex冲突的情况下给父级添加overflow：hidden；

高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!

min/max-width*

min-width：最小宽度，无论内容多少，达到了最小宽度元素就不会在根据浏览器缩小了，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width,

注意-媒体查询的范围特征-min-width会覆盖：*

min-width 的值会同时覆盖 max-width 和 width。
移动端适配时, 会有媒体查询的范围特征不要和元素的min/max-width混为一谈
移动端范围特征的min-width和max-width，遵守css层叠性，后面覆盖前面

min/max-height

下面两个属性不常用:
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height

重要：height百分比问题*

一定要注意height设置100%直接使用父元素的高度，没有固定父元素的大小不要使用百分比。 避免出现空白的高度 这样的会相当难排查

3、内边距（padding）

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;

padding 的css属性padding属性值px
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
- padding: padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
  
  当只有3个值的时候就是上，左右，下
- padding-inline-start: 2.75rem; 行开始的内边距

一、margin-外边距

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

使用方法同padding
参数：像素和百分比

注意：margin和padding的 precentage

不管父元素有没有height，margin-top设置百分比的话不是高度的百分比而是父级元素 width 的百分比

1.1、margin上下边距的传递

margin-top/bottom传递

如果块级元素的顶部线和父元素的顶部线或者底部线重叠，那么这个块级元素的margin-top/bottom值会传递给父元素
如何防止出现传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 设置overflow为auto
  
  block formating context给父元素添加一个隔离层会防止margin向外传递
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距
- 注意使用场景这样会避免margin传递

1.2、上下margin的折叠

概述：垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）会比较margin大小取较大得值

水平方向上的margin（margin-left、margin-right）永远不会collapse
折叠后最终值的计算规则
- 两个值进行比较，取较大的值
如何防止margin collapse？
- 只设置其中一个元素的margin

1.3、外轮廓 - outline

outline表示元素的外轮廓
不占用空间
默认显示在border的外面
outline相关属性有和border相似 style,color,width
- outline-width: 外轮廓的宽度
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
应用场景
- 用于去除a，input，button的fcous轮廓的效果

1.4、margin负值(重点)

（重点) : 当元素不存在width属性，或者（width：auto）的时候，负margin的值才会增加元素的宽度

元素的width默认值就是auto，
- 如果父级元素设置了flex的话，flex-item就不会严格区分块级元素和行内元素，宽高将由内容决定这样设置两边的负值会增加元素的宽度
  
  这个问题主要是提醒：当flex 默认的 flex-direction: flex-start 由于内容不够父元素的宽度的话，视觉上只会看到了向start方向的margin的变换
当元素有宽度限制的时候，设置负值的话只会移动元素并不会增加元素的宽度，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。
注意：
- margin-top为负值不会增加高度，只会产生向上位移
- margin-bottom为负值不会产生位移，看上去没有什么变化，还是原来大小，实际上的布局会减少自身高度的占位，下面的元素会覆盖上来

Margin注意事项(重点)

margin不论上下左右的百分比都是相对于父元素的width， 后面垂直居中的时候还会说

已测试
translateX/Y 是对应的 自身元素 width和height

已测试
绝对定位中定位元素的百分比是相对于 父元素 的 width和height

已测试

二、阴影 – box-shadow、text-shadow

1、盒子阴影-box-shadow

box-shadow: 5px 5px blur5px red 10px inset

在线测试盒子的阴影工具： https://html-css-js.com/css/generator/box-shadow/

box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下
第1个<length>：offset-x, 水平方向的偏移，正数往右偏移
第2个<length>：offset-y, 垂直方向的偏移，正数往下偏移
第3个<length>：blur-radius, 模糊半径
第4个<length>：spread-radius, 延伸半径（可有可无）
<color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影（可有可无）
示例：box-shadow: 5px 5px (blur)5px (spread)5px color inset

1.1、只允许下面存在阴影

理解：x 阴影有15px 默认会扩散px，收回等量的扩散值就可以了

box-shadow:0px 15px 10px -15px rgba(99, 99, 99, 0.2);

2、文本阴影-text-shadow

使用：相当于box-shadow, 它没有spread-radius和inset的值可以设置多个
示例：text-shadow：5px 5px 5px color，.....

3、浏览器坐标系

4、技巧

需求：在 hover 状态下，给紧挨着的两个 input 框添加边框

使用 shadow 可避免 border 将输入框顶开，因为不占据空间

四、box-sizing 盒子模型

4.1、W3C标准盒子模型、content-box

box-sizing的默认值content-box

盒子容器的大小就是内容的大小

4.2、IE盒子模型(IE8以下浏览器)border-box 应该也叫css3盒子模型

box-sizing：border-box

盒子容器的大小是content+padding+border

五、文字多行溢出样式案例、盒子案例、注意事项

5.1、间距 div换行会有一定间距，去除间距

方法1

  、
*{
     font-size: 0;
   }
   div{
      background-color: aqua;
      display: inline-block;
      font-size: 16px;
   }

方法2：通过浮动去除
方法3：

通过设置父节点 word-spacing: -4px; 解决。弊端在于根据字体的大小，word-spacing 的值应该相应的调整，可能会有兼容性问题。
方法4

通过设置子节点 margin-left: -4px; 解决。相比于第3种，这种兼容性比较好。

六、元素的水平居中方案

在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
行内级元素(包括inline-block元素)
水平居中：在父元素中设置text-align: center
块级元素
水平居中：margin: 0 auto

块级元素占据一行两边设置auto，使浏览器均等分配

七、css设置背景 background(6个)

background-color（包括padding、border）

背景色是设置到border下面的，border没有设置边框的前景色的时候会使用color前景色、可以设置dashed虚线试下

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

background-repeat用于设置背景图片是否要平铺
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺
background-size

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

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

使用场景：当浏览器放大缩小的时候，我们想要背景图片中间的文字一直处于中间的状态可以设置center
- 可以设置具体的数值比如 20px 30px;
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top/100%、center、bottom
- 如果只设置了1个方向，另一个方向默认是center
background-attachment（附加）

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
- scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动
- local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
- fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
- 测试：在over-flow：中试下
- font：
background 简写属性

background-size可以省略，如果不省略，background-size必须紧跟在background-position的后面以”/“分割其他属性也都可以省略，而且顺序任意

1、background-image和img对比

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

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

2、使用技巧

2.1、body背景图片固定大小

固定高度之后利用w100%和hauto，设置bgsz 之后不会根据滚轮的缩小放大而发生变化

background: url("../images/bgi.jpg") no-repeat center top/100% auto ;