块级元素（block-level）和行内元素（inline-level）
块级元素：div、h1～h6、p、hr、from、ul、ol、li、dl、dd、dt、table、th、tr、td、pre
行内元素：em、strong、span、br、a、img、button、input、label、select、textarea、script、code
区别：1. 块级可以包含块级和行内，行内只能包含行内和文本
2. 块级元素占据一整行空间，行内元素占据自身的宽度空间
3. 块级可以设置width和hight大小，行内的宽高由内容撑开
4. 块级可以设置所有的margin和padding，行内只有上下margin和padding没有左右margin、padding（设置会显示，但其它元素不会受此影响）
注：input和img是inline-block不会独占一行空间但是可以设置block-level的属性
CSS的继承
继承性：给父元素设置某些属性，它的子元素在浏览器会渲染出同样的属性
标签之间发生嵌套关系时会有继承性
注浏览器的默认样式会层叠掉继承的样式如：a标签、h1...
不可继承的属性
display规定元素生成框的类型；文本属性：vertical-algin垂直文本对齐、text-decoration规定添加到文本的装饰、text-shadw文本阴影效果、white-space空白的处理、unicode-bidi设置文本的方向；盒模型属性：width、heigth、margin、border、padding；背景属性：background、background-color／image／repeat／position／attachment；定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index；生成内容属性：content、counter-reset、counter-increment；轮廓样式属性：outline-style、outline-width、putline-color、outline；页面样式属性：size、page-break-before、page-break-after；声音样式属性pause、cue、play-during
可以继承的属性
文字属性：font；颜色：color；文本属性：text-index／align／transform；行高：line-height；增加单词间隔：word-spacing；增加字幕间隔：letter-spacing；规定文本书写方向：direction；元素课件性：visibility；表格属性：caption-side、border-collapse／spacing、list-style-position、list-style；生成内容属性：quotes；光标属性：cursor；页面样式属性：page、page-break-inside、windows、orphans
块级和行内的居中
垂直居中：line-height=height（inline-level居中可继承，给父盒子或者居中元素设置都可以）
水平居中：text-align：center；（同上）
水平居中margin：0 auto；（块元素居中）
垂直居中：vertical-align：middle
单行文本溢出
p{
white-space: nowrap; //规定p内容不换行显示
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
}
单位px、em、rem
px是像素固定大小
em是相对于父元素的大小 2em就是2倍的父元素大小
rem是相对于根元素的大小
代码作用
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
设置body的字体为12px行高是18px后面的是字体如用户未安装tahoma字体则查找是否安装arial字体，'Hiragino Sans GB'中的''是因为中间有空白添加''不让浏览器误判，\5b8b\4f53是字体的编码形式兼容性好。
网友评论