前言

大雪纷飞，继续读书。

神奇的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两个选择。

横向格式化

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

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>

这里我们发现父子组件都会有100px的margin而不是我们想象中子组件上方对于父组件有100px的margin。

这里可以使用：

.father {overflow: hidden;
}

.father {position: absolute;
}

等方式来解决，此外，外边距的折叠问题也是我们需要注意的，总之关于BFC我们后面再谈。

精读CSS权威指南第四版（3）相关推荐

css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
《JavaScript权威指南第四版》电子版电子书下载
JavaScript权威指南第四版图书评价:★★★★☆ 图书语言:简体图书图书大小:19.11MB 图书格式:PDF 图书作者:David Flanagan 更新日期:2006-05-23 下载次 ...
《CSS权威指南第三版》第二章的读书笔记
第2章选择器 CSS的主要优点,就是很容易向所有同类型的元素应用一组样式. 1. 基本规则修改所有h2: h2{color:gray;} a. 规则结构每个规则有两个基本部分:选择器 ...
CSS权威指南第五版-第17章变形
17.1 坐标系在变形中使用两种类型的坐标系,熟悉这两种坐标系是一个好主意. 第一种是笛卡尔坐标系,或者通常称为x/y/z坐标系.这种坐标系使用两个数字(二维)或三个数字(三维)表示一个点在空间中的 ...
CSS权威指南第五版-第18章过渡
CSS过渡允许我们对CSS属性进行动画处理,使其随着时间的推移从一个原始值变成一个新的值.这些变化使一个元素从一个状态过渡到另一个状态,以响应某种变化.这通常涉及到用户的交互,但也可能是由于类.ID或 ...
【hadoop权威指南第四版】第六章MR的工作原理【笔记+代码】
6.1 运行MR作业工作原理四大模块: 客户端,提交MR作业. jobtracker,协调作业的运行.jobtracker 是一个java应用程序,主类是Jobtracker. tasktrack ...
【hadoop权威指南第四版】第七章MR的类型与格式【笔记+代码】
7.1MR类型 7.2 输入格式 7.2.1输入分片与记录 InputFormat类的层次结构每一个map操作只处理一个输入分片,并且一个一个地处理每条记录,也就是一个键值对. 在数据库中,一个输入 ...
【hadoop权威指南第四版】第三章hadoop分布式文件系统【笔记+代码】
3.1块显示块信息 % hdfs fsck / -files -blocks 3.5 Java接口 3.5.1从hadoop URL读取数据使用java.net.URL 对象来打开一个数据流 In ...
【hadoop权威指南第四版】第五章MR应用【笔记+代码】
5.1 API的配置配置文件 <?xml version="1.0"?> <configuration> <property> <nam ...
JavaScript权威指南(第6版)
JavaScript权威指南(第6版) 编辑推荐经典权威的JavaScript工具书本书是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手 ...

精读CSS权威指南第四版（3）

前言