盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline
css盒模型
![](https://images2015.cnblogs.com/blog/707617/201608/707617-20160802113956747-626137869.jpg)
width : <length> | <percentage> | auto | inherit
max-
min-
height:
max-height:
min-height:
内边距
padding:[<length>|<percentage>]{1,4}|inherit
TRBL top,right,bottom,left
可以单个设置,如:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:20px; == padding:20px 20px 20px 20px;
padding:20px 10px == padding:20px 10px 20px 10px;
padding:20px 10px 30px == padding:20px 10px 30px 10px
外边距
margin : [ <length> | <percentage> | auto ] {1,4} | inherit
margin合并
相邻的元素之间的margin会合并,选择两个相邻元素的最大值。
水平居中
margin:0 auto;
边框
border: [<border-width> || <border-style> || <border-color>] | inherit
border-width : [<length> | thin | medium | thick ] {1,4} | inherit
border-style : [solid | dashed | dotted | …] {1,4} | inherit
border-color:[<color> | transparent ] {1,4 } |inherit
border还可以分为:border-top, border-right, border-buttom, border-left
例子:
border:1px dashed blue;
圆角边框
border-radius:[<length>|<percentage>]{1,4}[/[ <length> | <percentage>] {1,4}]?
border-radius:
0px 5px 10px 15px/
20px 15px 10px 5px;
/前面的是水平半径,/之后的是垂直半径 ,感觉就是类似椭圆的1/4
border-radius: 50%; /*正圆*/
border-radius可以分成:
border-top-left:
border-top-right:
border-buttom-right:
border-buttom-left:
内容超出
overflow:visible | hidden | scroll | auto
visible : 超出部分仍然显示
hidden:隐藏
scroll:出现滚动条(水平和垂直)
auto:没有超出的时候,不显示滚动条,超出的时候显示滚动条
从overflow:scroll 的两个滚动条,可以引申出 overflow-x,overflow-y
设置两个方向上的显示效果
盒子大小
box-sizing:content-box|border-box|inherit
默认是content-box,是不计算padding的,width的长度加上两边的padding再加上两边边框的宽度
border-box,是边框的宽度等于width的长度
盒子阴影
box-shadow:none|<shadow>[ , <shadow>]*
shadow:inset? && <length>{2,4} && <color>?
box-shadow : 4px 0px 0px 0px red;
第一个值: 水平偏移
第二个值:垂直偏移
第三个值:模糊半径
第四个值:阴影大小
第五个值:颜色
栗子:
box-shadow:inset 0px 0px 5px red;内阴影
box-shadow:3px 3px 5px 2px, inset 0px 0px 5px red;(多阴影)
不会占用空间
边界
outline : [<outline-width>|| < outline-style> || <outline-color>] | inherit
outline-width : <length>|thin|medium|thick|inherit
outline-style:solid|dashed|dotted
outline-color:<color>|invert|inherit
注:不占用空间,在border以外,outline的使用方法和border一样
关于CSS属性的浏览器兼容性,可以通过 caniuse 查询。(http://caniuse.com/)
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持