块级元素与行内元素
块级元素：div, h1-h6, p, hr, form, ul, ol, dl, pre, table, li, dd, dt, tr, td, th,
行内元素：em, strong, span, a, br, img(可设置宽高), button, input, label, select, textarea, code, script
块级元素和行内元素的区别
- 块级元素会独占一行，默认情况下宽度自动填满其父元素的宽度。
行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。 - 块级元素可以设置宽高
行内元素不可以设置宽高，高度height可以通过line-height来设置。 - 块级元素可以设置margin,padding.
行内元素margin,padding左右生效，上下不生效。 - 块级元素可以包含块级元素和行内元素
内联元素只能包含文本和行内元素。
css继承
继承的含义
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。一个 继承值沿着向下传播到后代元素，并一直继续，直到再没有更多的后代元素继承这个值为止。
继承的属性
- 字体：除text-decoration, text-shadow外都有继承属性。
- 文本：继承性常见的有：text-indent, text-align
没有继承性的有：vertical-align, text-overflow - 背景：都为无
- 定位：都为无（position,z-index）
- 布局：都为无（clear, float, overflow, display,visibility）
- 尺寸：都为无（height, width,max-height,min-height, max-width, min-height）
- margin：都为无
- padding：都为无
- 边框（border）:都为无
- 列表（list-style,list-style-image, list-style-position, list-style-type都有）
- 表格(tabble):继承性有：border-collapse, border-spacing, caption-side, empty-cells, table-layout, speak-header
- zoom继承性为无。
水平居中
块级元素水平居中
设置margin-left和margin-right为auto,(前提是已经为元素设置了适当的width宽度，否则块级元素会被拉伸为父级容器的宽度)常见的用法如下
.center-me{
margin:0 auto;
}
行内元素或类行内元素（比如文本和链接）水平居中
在块级父容器中让行内元素居中，只需在块级元素上设置text-align:center。
单行文本加...如何实现
.card{
white-space:nowrap;(不折行的意思)
overflow:hidden;（溢出后隐藏掉）
text-overflow:ellipsis;（文本溢出后变为...）
}
px,em,rem的区别
- px 固定单位，在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小。
- em相对单位，相对于父元素的字体的大小，即倍数。
- rem 相对单位，相对于根元素（html）的字体的大小。比如默认的html是16px,那么，想设置12px的文字就是12/16=0.75(rem)。
解释下面代码
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
字体大小为12px,行高是字体的1.5倍。设置的字体 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif从前往后解析，如果系统中都没有的话，则设置为浏览器的默认字体。
代码中引号的作用：第一个如果不加引号，中间的空格则容易被误解为两个，第二个是unicode编码，必须加引号。
'\5b8b\4f53'：代表黑体，是其unicode编码。
看字体unicode编码的方法是在开发者工具中的console中输入：escape('黑体')，然后把%u换成\
编码
编码1
编码2
编码3
编码4
编码5