CSS的盒子模型，padding，margin，box-sizing

• CSS的盒子模型
  • 一个盒子具备四个属性：
    • content（内容）：元素的内容width，height
    • padding（内边距）：元素和内容之间的间距
    • border（边框）：元素自己的边框
    • margin（外边距）：元素和其他元素的间距
    • 除内容content外，其他的margin/padding/border有top/right/bottom/left四个边
    • 盒子模型示例图：

      

    • 注意：对于行内级非替换元素，设置宽高是无效的
    • width的默认值：auto
    • 最大，最小宽度示例

      

  • padding属性
    • padding缩写属性顺序：上，右，下，左

      

    • 如果padding只有三个值，相当于省略left ，使用right的值
    • 如果padding只有两个值，相当于省略left ，使用 right的值，省略bottom，使用top值
    • 如果padding只有一个值，相当于top/right/bottom/left都使用10
  • 边框 border
    • 可以设置width，style，color
    • border样式常见属性：

      

    • 示例：

      

  • 外边距-margin
    • 用于设置盒子的外边距。
    • padding和margin的区别：

      

  • padding的使用事项：（常用）
  • （为防止盒子的宽度变大，需要设置box-sizing: border-box;）

    

• 上下margin的传递
  • margin-top传递
    • 如果块级元素线重叠的顶部线和父元素的顶部，并且父元素的高度是auto，那么这个块级元素的margin-top值会传递给父元素
    • 如何防止出现传递问题？（产生问题原因是因为margin和padding不能区分）
      • 法一、给父元素设置padding-top/padding-bottom （详见上图）
      • 法二、给父元素设置border
        • 示例：

          

      • 法三、触发BFC：设置overflow为auto
        • 在父级元素设置溢出值为auto

          

  • margin-bottom（了解）
    • 垂直方向上两个相邻的margin有可能会合并成1个margin，这种现象叫做collapse（折叠）
    • 水平方向上的margin，永远不会collapse
    • 折叠后，两个值进行比较，取较大的值
    • 示例：

      

  • 块级元素（block box）
    • （盒子大小）block box width = width + padding + border + margin
    • 水平居中：工作中居中常用flex布局

      

    • text-align: center用于父元素中，margin：0 auto 用于子元素中
• 外轮廓-outline
  • 不占据空间
  • 行内级元素设置margin-top 无效
  • 外轮廓基本很少使用，一般会将默认地方的外轮廓去除
  • input{ outline： none} //可以将输入框的外轮廓去调
• 阴影效果
  • box-shadow示例，可以去相关网站在线调整字体，盒子阴影效果 : CSS Code Generators

    

  • text-shadow文字阴影：

    

• 行内非替换元素的特殊性
  • content、padding、border、margin对于行内非替换元素（如，span、a、i 、strong等）

    

• CSS属性-box-sizing
  • box-sizing用来设置盒子模型中宽高的行为
    • box width = width + padding + border
    • content-box（设置宽高只是内容的宽高，盒子大小不固定）
      • padding、border都布置在width，height外边
    • border-box（盒子大小是固定的，对于同样的内容，设置的宽高不一样，内容也会压缩变化）
      • padding、border都布置在width，height里边
    • 示例：

      

• 元素的水平居中方案
  • 行内级元素（包括inline-block元素）
    • 水平居中：在父元素中设置text-align：center
  • 块级元素
    • 水平居中：margin：0 auto（还得设置宽度，auto才能平均分配）
• 案例实战（细节问题）
  • 单行显示省略号，固定写法：

    

  • 样式调用 易错点：

    

  • 多行保存，省略文字写法：

    

• 网页的背景
  • background-image 背景图
    • 注意要点：
      • 第一张图在最上面，依次层叠排放
      • 背景图只有具体的宽高才能正常显示
  • 背景平铺重复
    • 平铺的三种方式：

      

  • 网页背景的设置图，具体属性值：background-size：****

    • 

  • 背景的位置
    • 示例：

      

    • background-position：背景图片位置：

      

    • background是一系列相关属性的简写属性