css字体与盒子模型

1.字体与文本

字体样式
color:字体颜色
font-size:字体大小
cm,mm,px：绝对值单位
em,rem,% ：相对值单位
font-family：字体类型，例如：“微软雅黑”
font-style：italic 斜体
font-weight：bold 加粗
简写属性：font:font-sytle font-weight font-size/line-height font-family;
line-height：行高（数字、px、百分比）
text-align：行内内容如何相对它的块父元素对齐，例如center水平居中
文本
（1）text-align：水平方向对齐
取值：left，right，center，justify(两端对齐)
（2）vertical-align：垂直方向对齐（文本、图片）
取值：top，bottom，middle，指定px值
（3）text-indent：2em 块元素首行文本内容缩进两个字符
（4）text-decoration 设置文本修饰
取值：underline（下划线）、line-through（删除线）、overline（上划线）
（5）white-space：处理空白
取值：nowrap（不换行）、pre（保留空白）
（6）text-shadow：阴影
同时设置四个值：水平偏移、垂直偏移、阴影大小、颜色

2.盒子模型

组成
内容区content、内边距padding、边框border、外边距margin

1.border-style：solid实线、dotted点状虚线、dashed虚线、double双线
2.margin-top/left：移动自身、margin-bottom/right：移动其他元素

盒子大小
（1）box-sizing:content-box
宽高设置的是内容区的大小
（2）box-sizing:border-box
宽高设置盒子可见度的大小：content+padding+border

IE6之前默认值border-box
IE6之后 默认值 content-box
**其他样式 **
（1）box-shadow：阴影
值：水平偏移量 垂直偏移量 模糊半径 颜色（rgba）
偏移量：正值向右/下，负值向左/上
例：box-shadow：10px 10px 50px rgba(0,0,0,0.3);
（2）border-radius:圆角
x=y:半圆
border-radius:50%圆、、

3.布局

对齐
1.水平居中：margin：0 auto；
2.垂直：overflow：设置溢出
可选值：hidden：溢出内容被裁剪不会显示
scroll：生成两条滚动条
auto：根据需要生成滚动条
行内元素的盒模型
1.display的可选值
inline：将元素设置为行内元素
block：设置为块元素
inline-block：行内块元素，既可以设置宽高又不会独占一行,可以包含块级元素
table：设置为表格
none：隐藏，不在页面中显示
2.visibility：hidden 元素隐藏但依然占据页面中的位置