CSS 常见样式、属性

一、块级元素和行内元素分别有哪些？动手测试并列出 4 条以上的特性区别

对比	块级元素	行内元素
举例	div、h1~h6、p、form、table（及其之下的元素）、ol、ul、li、address、caption...	span、a、img、b、strong、i、em、samll...
嵌套关系	可以包裹块级元素、行内元素	文本、行内元素
特性一	独占一行	与其他行内元素并排显示，超出父元素宽度自动换行
特性二	可设置宽高	设置宽高是无效的
line-height	有效	有效
margin	有效	只有margin-left和margin-right有效
padding	有效	只有padding-left和padding-right有效

另外，对于行内元素只能包裹文本和行内元素这点的有个补充。在 HTML 中是可以写这种：

你好
  
你好

但通过 Chrome 开发者工具可以看到，其实并不能包裹着

，因为如果包裹着的话，

宽度应该是的 100% 高度，但实际上此时

继承的是的宽度。在不用 CSS 的情况下，要一定遵守这条规则，否则可能会出现预想之外的情况。但假如用上display这个 CSS 属性，行内元素和块级元素就可以相互转换了。

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

每个 CSS 属性都有个Inherited: yes or no（能否继承）属性，定义了该属性是否可以被后代元素基础，详细见 CSS 参考 | MDN 。这里可以查到每个 CSS 属性详细信息。常见的可继承属性有：

* {
  color: red;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  text-align: center;
  text-indent: 2em;
  line-height: 1;
}

它的继承规则是：When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. 当一个元素拥有继承属性，但却没有具体属性，那么这个元素会继承父级元素的计算属性。inheritance -CSS | MDN。什么意思呢？看下面：

  
你好

三、如何让块级元素水平居中？如何让行内元素水平居中?

1. 块级元素居中

我们知道，块状元素是独占一行的，要让它水平居中，意思就是这个块状元素左边与父元素的距离和右边与父元素的距离是一样的，这是块元素外的距离，所以应该用margin属性；然后要左右距离相同，所以用margin-left和margin-right。因此，当

//父元素宽度 = 左边距 + 子元素宽度 + 右边距
parentWidht = margin-left + childWidth + margin-right

水平居中就实现了。但每次都要计算左右边距很不科学啊，所以 CSS 标准就允许我们有margin-left: auto和margin-right: auto来自动计算，自动居中。那为什么不能用margin-top: auto和margin-bottom: auto来实现垂直居中呢？原理应该一样的呀！因为 CSS 标准里面没有给我们提供这个啊！其实主要是因为宽度在页面布局中往往是固定的，而大部分情况下高度是根据内容来撑开的，也就是可变动的。既然高度未知，何来计算呢？

2. 行内元素居中

行内元素的居中，CSS 给我们提供了一个直接的属性text-align: center;，但这个属性应该写在该行内元素的父元素（块级元素）之上。另外，还有text-align: left;和text-align: right等属性。

四、用 CSS 实现一个三角形

目前见到的 CSS 实现三角形都是通过border属性来完成的。所以我们要知道如何实现三角形，先去了解border这个属性。参考：CSS 三角形原理 | 知乎

• border是元素的边框，可以设置边框宽度：

有 border 的元素

• CSS 对border很公平，大家分到的面积是一样的：

均等的 border

• 这时候，假如上、左、右的border都透明的话：

  div {
    width: 100px;
    height: 100px;
    border: 10px solid #000;
    border-color: transparent transparent #000;
  }
  
  

剩下 border-bottom

梯形出现了！

• 如果让border左右缩小一下，不就是三角形了吗，直接width为 0 不就缩小了吗：

三角形

• 如果想让三角形更大点的话，改变一下border的宽度：

更大的三角形

接下来自己动手吧！附上一个 在线演示

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

要实现单行文本溢出添加...效果，先实现单行：

p {
 white-space: nowrap; 
}

那怎么隐藏溢出呢？

p {
  overflow: hidden;
}

好了，隐藏溢出了，那隐藏溢出效果怎么弄啊？

p {
  text-overflow: ellipsis;
}

以上。 在线演示

六、px, em, rem 有什么区别

px

CSS 中的px单位是指CSS pixel，绝对长度单位。在网页的缩放比例是 100% 时，CSS pixel刚刚好与device pixel（屏幕设备像素） 1 : 1 。所以常说px与屏幕设备像素相关。

em

相对长度单位，相对与父元素的长度倍数。如父元素为font-size: 14px，子元素的font-size: 1em;意思就是父元素的一倍也就是14px。例如：每个浏览器给 HTML 里的都定义了一个默认字体大小为16px，所以可以直接用n em来做字体大小。另外，如果换算之后出现小数，会被直接去掉。

rem

相对长度单位。与em很相似，唯一不同的是，rem永远只相对于 HTML 根元素。这个单位的好处在于，只通过修改根元素单位大小，整个页面就会跟着变化。但使用时要注意兼容性 | Can I use问题，不过在每个rem前面直接加换算后的px就好了。

参考：
| MDN
px、em、rem | 菜鸟教程
a tale of two viewports

七、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

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

以上代码意思是，设置字体大小为12px，行高为自身字体大小的 1.5 倍（因为 1.5 没有带单位，此时继承的是缩放因子，动态行高），然后后面一串是字体，浏览器会从第一种字体开始找，直到有其中一种字体为止。\5b8b\4f53是宋体的unicode编码，这样写是防止用户浏览器没有中文字体，无法正确识别该种字体。

八、编程

编程任务整合到一起。

编程任务