CSS 进阶三 盒子模型

作者 Marlous 日期 2018-06-28
CSS
CSS 进阶三 盒子模型

一 概念

盒子模型1
盒子模型2

  • 具体设置方法:
    设置方法

  • 设置值的缩写:
    缩写

二 具体使用

1 margin

  • margin 合并:
    会取两个 margin 中大的值。
    margin 合并

  • margin 的 auto 值巧用:
    利用 auto 值来水平居中。
    auto 值

2 border

  • 边框 border:
    边框 border

  • 圆角边框 border-radius:
    圆角边框 border-radius

/ 来分割水平半径和垂直半径。当水平垂直都是 50% 时为一个正圆 border-radius:50%
水平半径和垂直半径

3 盒子设置

  • 溢出设置 overflow:
    当盒子内内容容纳不下时设置该怎样显示。
    overflow

  • 指定宽高 box-sizing:
    指定宽高代表的含义。
    box-sizing

  • 盒子阴影 box-shadow:
    模糊半径为 3px,则向内 1.5px,向外 1.5px。
    box-shadow

  • 多种阴影:
    多种阴影

  • 轮廓 outline:
    用来描绘轮廓,类似与 border。
    轮廓 outline