前端学习笔记-CSS系列(三)盒模型

这章我们讨论CSS里面比较重要的一个概念：盒模型 顾名思义 我们可以把CSS中每一个元素都想象成一个盒子 盒子里包含他的相关内容。浏览器就好像一个大的盒子 装着这些小盒子。每一个盒子都有他特定的属性。下面让我们以一个示例图开始今天要分享的内容。

CSS盒模型图形样例

让我们先从content说起

|content

盒模型概念中，由width*height决定congtent大小

1. width||auto

需要注意的是用百分比表示时 绝大部分时候以自己的父元素为参照
一般只给块级元素设置宽度
2. height||auto
同width，不同的是默认高度为内容高度

|内边距

padding[|]{1,4}

四个值的顺序为 上右下左顺时针方向 并遵守对面相等，后者省略。4面相等，只设1个的缩写原则.

|外边距

margin[||auto]{1,4}

用法同padding

margin合并
对同一个margin设定多个值时会合并取较大值
详见MDN合并

margin水平居中

margin:0 auto  

表示为上下margin为0，auto代表浏览器会根据宽度大小自动设置左右距离

|边框

border:[||||]

边框样式
border-style:[solid|dashed|dotted]{1,4}
solid:实线
dashed:虚线
dotted:点线

边框宽度
border-width:[]{1,4}

边框颜色
boerder-color[|transparent]{1,4}

也可以用border-top/bottom/left/right:分别设置各边框样式

|圆角边框

border-radius

|处理content内容超出部分

overflow:visible|hidden|scroll|auto

visible:显示
hidden:隐藏
scroll:显示滚动条
auto:根据内容自动显示滚动条

|指定盒子

box-sizing:content-box|border-box

|盒子阴影

box-shadow:[,]*

阴影不占空间

|轮廓

outline:[||||]

与border的区别

1. 不占空间
2. 在border外

|兼容

关于CSS属性的浏览器兼容性，可以通过 caniuse 查询。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持