CSS基础样式

什么是 CSS 继承?哪些属性能继承，哪些不能？

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。

• 有继承性的属性：

1. 字体系列属性
2. 文本系列属性
3. 元素可见性：visibility
4. 表格布局属性：
5. 列表属性：
6. 设置嵌套引用的引号类型：quotes
7. 光标属性：cursor

• 无继承的属性

1. display
2. 文本属性：vertical-align text-decoration
3. 盒子模型的属性:宽度、高度、内外边距、边框等
4. 背景属性：背景图片、颜色、位置等
5. 定位属性：浮动、清除浮动、定位position等
6. 生成内容属性:content、counter-reset、counter-increment
7. 轮廓样式属性:outline-style、outline-width、outline-color、outline
8. 页面样式属性:size、page-break-before、page-break-after
   继承中比较特殊的几点

• a 标签的字体颜色不能被继承
• <h1>-<h6>标签字体的大下也是不能被继承的
  因为它们都有一个默认值

块级元素和行内元素分别有哪些？

• 块级元素（block-level）

div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th

• 行内元素（inline-level）

em strong span a br img
button input label select textarea
code script

区别与联系

1. 块级元素可以包裹块级元素和行内元素，而行内元素只能包含行内元素
2. 块级元素占据一整行空间，行内元素占据自身宽度空间
3. 在宽高的设置、内外边距的设置上有一定的差异
4. css属性宽高，只对块级元素设置生效，对行内元素设置无效

如何让块级元素水平居中？如何让行内元素水平居中?如何让 inline-block 元素水平居中？

• 块级元素
  .center-children { margin: 0 auto; }
• 行内元素，行内块元素。
  .center-children { text-align: center; }

单行文本溢出加 ...如何实现?

white-space:nowrap不折行
overflow:hidden 溢出之后隐藏
text-overflow:ellipsis显示三个点

px, em, rem,vw 有什么区别

1. px

• px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点

2. em

• 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3. rem

• css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

4. vw

• css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

解释下面代码的作用? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

这是css中font的简写写法。

• 代表body的字体大小12px，字体行高为默认行高的1.5倍，使用的字体为tahoma、arial、"Hiragino Sans GB"、宋体、sans-serif，依次从前向后选取

一些小demo

• 导航条居中
  代码地址
  预览地址
  1.png
• css实现三角形
  代码地址
  预览地址
  1.png
• css实现表格
  代码地址
  预览地址
  1.png
• 简单页面
  代码地址
  预览地址
  1.png