盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding 内边距
padding-top
padding-right
padding-bottom
padding-left
margin 外边距
margin-top
margin-right
margin-botoom
margin-left
border 边框
border-width 为元素指定边框的宽度
关键字 thin 、medium、thick
单位 px、em
border-style 为元素指定边框样式
none 不设置
hidden 隐藏
dotted 显示一系列的点
dashed 显示一系列小线段
solid 显示一条单一的实心直线
double 显示两条实心直线
groove 边框雕刻效果(与ridge相反)
ridge 与groove相反
inset 嵌入式边界框(与outset相反)
outset 突出的边界框
border-color 为元素指定边框颜色
关键字、十六进制、rgb函数、rgba函数
border-radius 为元素指定圆角
background 为元素设置背景
background-color 为元素设置一种颜色
background-image 为元素设置一个背景图片
background-size 设置背景的大小
background-repeat 设置背景图片的重复方式
background-origin 设定背景的起始点
background-clip 设定背景的覆盖范围
background-attachment 设置背景图片的固定点
background-position 设置为背景图像初始位置,可以实现图片精灵
盒子模型
所有的元素都可以看作一个盒子
内容盒子(w3c盒子、标准盒子)
box-sizing:content-box
width = 内容的宽度
边框盒子(怪异盒子、IE盒子)
box-sizing:border-box
width = 内容 + padding + border