css常见样式总结

块级元素与行内元素

块级元素：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

块级元素和行内元素的区别

1. 块级元素会独占一行，默认情况下宽度自动填满其父元素的宽度。
   行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
2. 块级元素可以设置宽高
   行内元素不可以设置宽高，高度height可以通过line-height来设置。
3. 块级元素可以设置margin,padding.
   行内元素margin,padding左右生效，上下不生效。
4. 块级元素可以包含块级元素和行内元素
   内联元素只能包含文本和行内元素。

css继承

---

继承的含义

基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。一个 继承值沿着向下传播到后代元素，并一直继续，直到再没有更多的后代元素继承这个值为止。

继承的属性

1. 字体：除text-decoration, text-shadow外都有继承属性。
2. 文本：继承性常见的有：text-indent, text-align
   没有继承性的有：vertical-align, text-overflow
3. 背景：都为无
4. 定位：都为无（position,z-index）
5. 布局：都为无（clear, float, overflow, display,visibility）
6. 尺寸：都为无（height, width,max-height,min-height, max-width, min-height）
7. margin：都为无
8. padding：都为无
9. 边框（border）:都为无
10. 列表（list-style,list-style-image, list-style-position, list-style-type都有）
11. 表格(tabble):继承性有：border-collapse, border-spacing, caption-side, empty-cells, table-layout, speak-header
12. 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