CSS盒子模型

HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性

属性值	描述
内容(content)	元素的内容width/height
内边距(padding)	元素和内容之间的间距
边框(border)	元素自己的边框
外边距(margin)	元素和其他元素之间的间距

因为盒子有四边,所以margin/padding/border都包括top/right/bottom/left四个方向的值:

content

我们可以设置内容的宽度和高度

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

属性	描述
`width`	元素的宽度
`min-width`	元素的最小宽度，无论内容多少，宽度都大于或等于`min-width`
`max-width`	元素的最大宽度，无论内容多少，宽度都小于或等于`max-width`
`height`	元素的高度
`min-height`	元素的最小高度，无论内容多少，宽度都大于或等于`min-height`
`max-height`	元素的最大高度，无论内容多少，宽度都小于或等于`max-height`

当元素的宽度和元素的最小宽度或最大宽度冲突的时候，以最小宽度或最大宽度为同样，这适用于元素的高度

padding

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

padding包括四个方向,所以有如下的取值:

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

padding是padding-top、padding-right、padding-bottom、padding-left的简写属性（shorthand property）

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

在实际开发中，各个位置上margin的值可以被设置为正整数，零 （不可以被设置为负整数）

如果在padding-top, padding-left, padding-right, padding-bottom中使用百分比作为值，那么这个值相对的是其包含块（一般是父元素）的宽度

border

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

因为border具备 宽度width，颜色color，样式style三个特性

border-width

border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性，缩写方式和padding的缩写方式一致

border-color

border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性，缩写方式和padding的缩写方式一致

border-style

border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性，缩写方式和padding的缩写方式一致

border-style的可选值如下：

一般常用的值是 solid, dashed,dotted

border

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

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

border 在mdn上的设置规则如下

1.也就意味着边框颜色、宽度、样式的编写顺序任意

2.同时除了line-style之外的其余2个属性是可以省略的

3.line-width可以使用3个表示粗细的关键字分别为 thin(约1px), medium（约3px）, thick（约5px）

4.line-width的默认值是medium

5.color的默认值是如果设置了前景色，就是要前景色，如果没有设置前景色，默认值是#fff

一般推荐的编写顺序是 || ||

 一般推荐的编写顺序是 <line-width> <line-style> <color><line-width> || <line-style> || <color>

border-radius

border-radius一般用于设置盒子的圆角

值	描述
数值	通常用来设置小的圆角, 比如6px --- 常见
百分比	通常用来设置一定的弧度或者圆形 --- 除50%外，其余设置较少

border-radius本质上是border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom- left-radius的简写属性

border-radius的本质是在盒子的四个定角按照一定的半径做圆，取圆和盒子相交的部分

margin

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

margin包括四个方向, 所以有如下的取值:

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

margin是margin-top、margin-right、margin-bottom、margin-left的简写属性

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

在实际开发中，各个位置上margin的值可以被设置为正整数，零和负整数

margin也可以有四个，三个，两个和一个值的写法，其规则和padding一致

如果在margin-top, margin-left, margin-right, margin-bottom中使用百分比作为值，那么这个值相对的是其包含块（一般是父元素）的宽度

margin 的传递

margin-top传递

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

margin-bottom传递

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

如何防止出现传递问题？

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

给父元素设置border

触发BFC: 设置overflow为auto

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

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

只有上下外边距会进行传递，左右外边距并不会产生任何的传递
父子元素必须贴边，且设置了子元素的上下margin

解决方法(任意一种皆可)：

移除子元素的margin-top，改用父元素的padding-top
为父元素设置透明的1px的border-top
使用overflow: auto或display: flow-root等方法开启父元素的BFC

--- 也就是让父元素产生独立的渲染空间，与父元素外的渲染空间隔离

margin 折叠问题

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

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

垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
水平方向上的margin(margin-left、margin-right)永远不会collapse

合并规则: 两个值进行比较，取较大的值

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

兄弟块级元素之间的margin折叠

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    .box {
      width: 300px;
      height: 300px;
    }
    
    .box1 {
      background-color: red;
      margin-bottom: 10px;
    }

    .box2 {
      background-color: blue;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
   <div class="box box2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    .container {
      width: 300px;
      height: 300px;
      background-color: red;
      margin-top: 10px;

    }

    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 30px;
       /* 左右是不会传递 */
      /* margin-left: 30px; */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

水平居中方法

在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)

元素	方式	描述
行内级元素和行内块级元素	`text-aligin: center`
块级元素	`margin: 0 auto`	虽然默认情况下`margin`的默认值是0 但是块级元素的一个特性是独占父元素的一行显示所以此时如果我们设置了块级元素的宽度但浏览器还是需要让块级元素独占一行此时就会将`margin-right`设置为`auto`，也就是由浏览器来决定当我们设置了`margin: 0 auto` 那么就意味着`margin-left`和`margin-right`的值都是`auto` 也就是左右外边距都由浏览器来自行决定此时块级元素就水平居中了

注意: margin: auto 0 并不能使块级元素垂直居中对齐

margin和padding 的默认值都是0

块级元素水平方向独占一行 auto表现为填满所以 0 auto 可以水平居中

但是垂直方法是依次排列的，auto表现为0，所以auto 0 不可以让块级盒子垂直局中

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;

      /* inline-level box */
      /* 行内级: 行内非替换元素span/a 行内替换元素 img input inline-block */
      /* text-align: center; */
    }

    .container {
      width: 800px;
      height: 150px;
      background-color: #0f0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* display: inline-block; */

      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

行内非替换元素在盒子模型中的注意事项

属性	描述
width、height、上下外边距	不起作用
上下内边距和上下方向的border	起作用但是不占空间
左右外边距和左右内边距和左右方向的border	正常起作用

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      background-color: #f00;
      color: white;

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

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

      /* 边框: border */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      /* border: 50px solid orange; */

      /* 外边距: margin */
      /* 特殊： 上下的margin是不生效的 */
      margin: 50px;
    }
  </style>
</head>
<body>
  
  <span class="content">
    我是span内容, 哈哈哈
  </span>
  aaaaaaa
  <div>bbbbbb</div>

</body>
</html>

背景和前景色设置的是哪些

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      1> 背景色有没有设置到border下面(有设置)
      2> 前景色会在border没有设置颜色的情况下, 显示出来color颜色
    */
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      color: orange;
      padding: 30px;
      border: 10px solid;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

box-sizing

值	描述
`content-box`	设置的宽高就是内容的宽高 --- 默认值
`border-box`	设置的宽高是以border为基准的宽高

content-box的示意图如下：

box-sizing: content-box

box-sizing: border-box

一般情况下，在为盒子设置了边框和内边距的时候，如何盒子设置了具体的宽度或高度

为了避免盒子被撑开，影响整体布局

此时一般推荐将当前元素的box-sizing设置为border-box

outline

outline表示元素的外轮廓 --- 效果和border类似

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

和outline相关的属性:

outline-width: 外轮廓的宽度
outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color: 外轮廓的颜色
outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似

在开发中outline的主要作用是，清除inputt, a这类元素在被选中的时候

(也就是处于:focus状态)下默认添加的outline

shadow

box-shadow

box-shadow属性可以为块级元素设置一个或者多个阴影

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

      box-shadow: 5px 5px 10px orange, 10px 10px 10px green;

box-shadow中各个属性的值

属性	描述	备注
offset-x	水平方向的偏移，正数往右偏移, 负数往左偏移	必填
offset-y	垂直方向的偏移，正数往下偏移, 负数往上偏移	必填
blur-radius	模糊半径	可选默认值: 0
spread-radius	延伸半径	可选默认值: 0
`<color>`	阴影的颜色	可选默认值: 1. 如果没有设置前景色color，即为#000 2. 如果设置了前景色color，即使用color属性的值
inset	外框阴影变成内框阴影	可选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      box-shadow: 5px 5px 10px orange, 10px 10px 10px green;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

text-shadow

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

但是text-shadow在设置值的时候没有spread-radius和inset

 text-shadow: 5px 5px 5px orange, 10px 10px 5px blue, 15px 15px 5px green;

06_CSS盒子模型

CSS盒子模型

content

padding

border

border-width

border-color

border-style

border

border-radius

margin

margin 的传递

margin 折叠问题

水平居中方法

行内非替换元素在盒子模型中的注意事项

box-sizing

outline

shadow

box-shadow

text-shadow