CSS盒模型

盒模型参数

宽度
width：<length> | <percentage> | auto

高度
height：<length> | <percentage> | auto

内填充
padding：[ <length> | <percentage> ]{1,4}

外边距
margin：[ <length> | <percentage> ]{1,4}

• margin合并
  • 相邻两个盒子下面盒子的margin-top会和上面元素的margin-bottom合并
  • 父元素与第一个子元素的margin-top会合并
  • 父元素与最后一个子元素的margin-bottom会合并
• 水平居中

  • `marging:0 auto`
    

边框 border

边框可以分别设置四个方向的边框

border：<line-width> || <line-style> || <color>
border-width：<line-width>{1,4}
border-style：<line-style>{1,4}
border-color：<color>{1,4}

可以单独设置一个方向的边框

border-top border-top-width border-top-style border-top-color
border-right border-right-width border-right-style border-right-color border-bottom border-bottom-width border-bottom-style border-bottom-color border-left border-left-width border-left-style border-left-color

圆角边框

可以设置8个方向的参数，css3属性，不兼容ie8以下的浏览器

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

//提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

盒子内容溢出

overflow：<overflow-style>;
<overflow-style> = visible | hidden | scroll | auto 

overflow-x //x轴方向
overflow-y //y轴方向

visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

内容区域设置

box-sizing:content-box | border-box

// 用来改变默认的 CSS 盒模型 对元素宽高的计算方式。

content-box：默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

border-box： width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的 盒模型 。

ie支持ie8以上浏览器

盒子阴影

CSS3属性，盒子阴影只有修饰性效果，不占用空间

box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?

inset:
内阴影

<length>:
第一个值：水平偏移值。可以为负值
第二个值：垂直偏移值。可以为负值
第三个值：阴影模糊值。不允许负值
第四个值：阴影大小，可以为负值
<color>:
设置阴影颜色

阴影可以设置多个值，多个叠加叠加

描述轮廓

outlines相关属性不占据布局空间，不会影响元素的尺寸；

outline：<' outline-width '> || <' outline-style '> || <' outline-color '>

语法跟border差不多
不允许类似 <' border '> 属性那样能将自身拆分为 <' border-top '> , <' border-right '> , <' border-bottom '> , <' border-left '>