【前端体系课】-- CSS盒子模型

我们可以把 HTML 每一个元素看出一个个的盒子, 可以具备这 4 个属性

内容（content）: 元素的内容 width/height
内边距（padding）: 元素和内容之间的间距
边框（border）: 元素自己的边框
外边距（margin）: 元素和其他元素之间的间距

盒子有四边, 所以 margin/padding/border 都包括 top/right/bottom/left 四个边:

在浏览器的开发工具中:

content

设置内容可以通过宽度和高度设置

宽度设置: width
高度设置: height

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

还可以设置最大最小属性:

min-width：最小宽度，无论内容多少，宽度都大于或等于 min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于 max-width

移动端适配时, 可以设置最大宽度和最小宽度;

padding

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

padding 包括四个方向:

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

以上四个可以简写为一个属性: padding

赋值是的顺序是: 从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左, 也可简写

border

设置盒子的边框

边框相对于 content/padding/margin 来说特殊一些

边框具备宽度 width;
边框具备样式 style;
边框具备颜色 color;

赋值方式:

边框宽度
- border-top-width、 border-right-width、 border-bottom-width、 border-left-width
- border-width 是上面 4 个属性的简写属性
边框颜色
- border-top-color、 border-right-color、 border-bottom-color、 border-left-color
- border-color 是上面 4 个属性的简写属性
边框样式
- border-top-style、 border-right-style、 border-bottom-style、 border-left-style
- border-style 是上面 4 个属性的简写属性

边框的样式有很多

groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge：山脊, 和 grove 相反，边框看上去好象是从画布中凸出来

对某一边同时设置宽度样式颜色, 可以进行如下设置:

border-top
border-right
border-bottom
border-left
border：统一设置 4 个方向的边框

边框颜色、宽度、样式的编写顺序任意

border-radius
- 设置盒子的圆角

常见的值:

数值: 通常用来设置小的圆角, 比如 6px;
百分比: 通常用来设置一定的弧度或者圆形

border-radius 事实上是一个缩写属性:
将这四个属性 border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius，和 border-bottomleft-radius 简写为一个属性。
开发中比较少见一个个圆角设置;

如果一个元素是正方形, 设置 border-radius 大于或等于 50%时，就会变成一个圆

margin

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

margin 包括四个方向:

margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距

赋值顺序同样是: 从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

margin 传递

margin-top 传递:
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素, 即整体向下移动, 而父子元素没有分开
margin-bottom 传递
如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素

解决:
给父元素设置 padding-top/padding-bottom
给父元素设置 border
触发 BFC: 设置 overflow 为 auto

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

margin 折叠

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

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

折叠后最终值的计算规则

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

解决:
只设置其中一个元素的 margin

两个兄弟块级元素之间上下 margin 的折叠

父子块级元素之间 margin 的折叠

outline

外轮廓, 不占用空间, 默认显示在 border 的外面

box-shadow

设置一个或者多个阴影

每个阴影用<shadow>表示
多个阴影之间用逗号, 隔开，从前到后叠加

格式如下:

inset：外框阴影变成内框阴影
第 1 个<length>： offset-x, 水平方向的偏移，正数往右偏移
第 2 个<length>： offset-y, 垂直方向的偏移，正数往下偏移
第 3 个<length>： blur-radius, 模糊半径
第 4 个<length>： spread-radius, 延伸半径
<color>：阴影的颜色，如果没有设置，就跟随 color 属性的颜色

在线设置:
https://html-css-js.com/css/generator/box-shadow/

text-shadow

给文字添加阴影效果, 类似于 box-shadow

格式如下:

相当于 box-shadow, 它没有 spread-radius 的值;

行内非替换元素的注意事项:
无效属性:
width、 height、 margin-top、 margin-bottom
特殊属性:
padding-top、 padding-bottom、上下方向的 border

无效属性-width、 height

<style>
.content {
  background-color: #f00;
  color: white;

  /* 内容: width/height(压根不生效) */
  width: 300px;
  height: 300px;
}
==========================
<body>
  <span class="content">
    我是span内容, 哈哈哈
  </span>
</body>

效果如下: 只是内容撑起的长宽

无效属性-margin-top、 margin-bottom

<style>
.content {
  background-color: #f00;
  color: white;

  /* 内容: width/height(压根不生效) */
  width: 300px;
  height: 300px;
  /* 外边距: margin */
  /* 特殊： 上下的margin是不生效的 */
  margin: 50px;
}
==========================
<body>
  <span class="content">
    我是span内容, 哈哈哈
  </span>
</body>

效果如下: 设置了 margin 四个方向的值, 但是只有左右生效, 上下无效

特殊属性-padding-top、 padding-bottom

<style>
    .content {
      background-color: #f00;
      color: white;

      /* 内容: width/height(压根不生效) */
      width: 300px;
      height: 300px;

      /* 内边距: padding */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
       padding: 50px; 
    }
  </style>
===========================================
<body>
  
  <span class="content">
    我是span内容, 哈哈哈
  </span>
  aaaaaaa
  <div>bbbbbb</div>

</body>

效果如下: 设置了 padding 四个方向的值 , 左右有效占据空间, 但上下无效不占据空间

<style>
    .content {
      background-color: #f00;
      color: white;

      /* 内容: width/height(压根不生效) */
      width: 300px;
      height: 300px;

      /* 内边距: padding */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
       padding: 50px; 

      /* 边框: border */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      border: 50px solid orange;
    }
  </style>
===========================================
<body>
  
  <span class="content">
    我是span内容, 哈哈哈
  </span>
  aaaaaaa
  <div>bbbbbb</div>

</body>

效果如下: 设置了 padding 和 border 上下无效 , 不占据空间

思考: 为什么不会生效??
行内元素会与其他内容在一行显示, 如果对其设置属性, 就会影响整体效果

box-sizing

设置盒子模型中宽/高的行为

content-box

默认情况下, 我们在设置 width、 height 的时候, 其实是在设置盒子中 context 的 width、 height
然而, 当我们想要美观想设置内边距 padding 的时候, 就会发现 box 的 size 变大了, 因为默认是 content-box, 设置的是 context 的 width、 height, 这并不是我们想看到的结果, 于是可以设置成 border-box

border-box

与 content-box 的区别就是盒子的 padding、 border 都布置在 width、 height 里边

content-box
- padding、 border 都布置在 width、 height 外边
border-box
- padding、 border 都布置在 width、 height 里边