这章我们讨论CSS里面比较重要的一个概念：盒模型 顾名思义 我们可以把CSS中每一个元素都想象成一个盒子 盒子里包含他的相关内容。浏览器就好像一个大的盒子 装着这些小盒子。每一个盒子都有他特定的属性。下面让我们以一个示例图开始今天要分享的内容。
CSS盒模型图形样例
让我们先从content说起
|content
盒模型概念中，由width*height决定congtent大小
1. width<length>|<percentage>|auto
需要注意的是用百分比表示时 绝大部分时候以自己的父元素为参照
一般只给块级元素设置宽度
2. height<length>|<percentage>|auto
同width，不同的是默认高度为内容高度
|内边距
padding[<length>|<percentage>]{1,4}
四个值的顺序为 上右下左顺时针方向 并遵守对面相等，后者省略。4面相等，只设1个的缩写原则.
|外边距
margin[<length>|<percentage>|auto]{1,4}
用法同padding
margin合并
对同一个margin设定多个值时会合并取较大值
详见MDN合并
margin水平居中
margin:0 auto
表示为上下margin为0，auto代表浏览器会根据宽度大小自动设置左右距离
|边框
border:[<border-width>||<border-style>||<border-color>]
边框样式
border-style:[solid|dashed|dotted]{1,4}
solid:实线
dashed:虚线
dotted:点线
边框宽度
border-width:[<length>]{1,4}
边框颜色
boerder-color[<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:<shadow>[,<shadow>]*
阴影不占空间
|轮廓
outline:[<outline-width>||<outline-style>||<outline-color>]
与border的区别
- 不占空间
- 在border外
|兼容
关于CSS属性的浏览器兼容性，可以通过 caniuse 查询。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
网友评论