前言

大雪纷飞，继续读书。

神奇的text-decoration

做全局样式往往要把：

a {
  text-decoration: none;
}

却很少有人真的认真取去学习这个属性，首先text-decoration是不被继承的，看这段：

<div>
      <p>
        123123sadw <strong>insdawh</strong>
        wdwasassssssss
      </p>
      <p>do<em>1231231</em>2222</p>
    </div>

p {
  text-decoration: underline;
  color: aqua;
}

strong {
  color: blanchedalmond;
}

我们会发现，strong下面的下划线还是aqua颜色，也就是说，strong其实是没有下划线的，只不过p元素的下划线正好经过strong元素而已。

因此应用到父元素的上的下划线在子元素上是无法取消的，只能通过颜色的改变来近似取消效果。

text-rendering

关于这个属性，其实是一个SVG属性，传达的是显示文本时优先考虑的方面。关于SVG的内容，我们后面再详谈。

text-shadow

一般传递四个属性，颜色，右偏移，下偏移以及模糊半径。其中模糊半径指的是阴影轮廓到模糊效果边界的距离。

white-space

对于默认来说，我们写了一段话，并且故意在单词间多留了几个空格，浏览器的渲染会把连续的多个空格压缩为一个空格。我们如果不需要浏览器压缩的话，可以赋予这个属性：

p{white-space: pre;}

CSS2.1又更加细化了pre。

关于文本属性，还有很多相关属性，如hyphens（换行断字）,tab-size(制表符长度)。除此之外还有overflow-wrap，相对来说十个很简单的属性，只有normal和break-word两个选择。

横向格式化

关于盒模型横向格式化，我们只需要记住，横向布局中:

扫描二维码关注公众号，回复： 8704293 查看本文章

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=father-width

其中，margin和width是可以赋值auto的，当然，当margin和width都没有auto值时，这就是过约束情况，而如果没有赋予auto值的情况下，默认会设置margin-right为auto。

当然也正是因为这个原因的存在，margin-left和margin-right是可以允许被赋值负数的。

纵向格式化

相对于比较固定的横向格式化，纵向格式化相对来说更加灵活，如一定内容的情况下，宽度越窄，为了显示更多的内容，高度自然也会越高。

关于纵向格式化，这里有个很多人都没注意的小BUG：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Title</title>
    <style>
      .father {
        background-color: #1ef;
        width: 300px;
        height: 400px;
      }
      .son {
        background-color: #e1e;
        margin: 25% 100px 25% 100px;
        width: 60px;
        height: 70px;
        overflow: hidden;
      }

      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">111asdwwdwf, we will succeed</div>
    </div>
  </body>
</html>