1.text-transform,font-style,ch,font-size，line-height和vertical-align
text-transform
text-transform 也是为英文字符设计的，
要么全大写 text-transform:uppercase，
要么全小写 text-transform:lowercase，
font-style
font-style: normal;
font-style: italic;
font-style: oblique;
italic 是使用当前字体的斜体字体，而 oblique 只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为 oblique，也就是单纯形状倾斜。 我们平常在 Web 上使用比较多的中文字体，如“宋体”“微软雅黑”等，是没有专门的倾斜字体的，因此，从最终表现上来看 font-style:italic 和 font-style:oblique 是没有区别的。
ch
ch 和 em、rem、ex 一样，是 CSS 中和字符相关的相对单位。和 ch 相关的字符是 0，没错，就是阿拉伯数字 0。1ch 表示一个 0 字符的宽度，所以 6 个 0 所占据的宽度就是 6ch。但是我们网页内容的字符不可能都是 0，所以这个单位乍看就显得很鸡肋。但是，如果和等宽字体在一起使用，它就可以发挥不一样的威力。由于 ch 是个 CSS3 单位，且 IE9 浏览器的宽度和其他浏览器明显不一样，因此此处不展开，但可以提一提一些不错的应用场景。例如，有些输入框是输入手机号的，在中国，手机号是 11 位，因此我们可以设置该输入框宽度为 11ch，同时让字体等宽，则用户一眼就能看出自己是否少输入或者多输入了 1 位数字。又如，我们想实现一个屏幕上代码一个一个出现的动效，如果代码是等宽字体，此时使用 ch 单位来控制宽度
font-size
实际上，并不是所有小于12px的font-size都会被当作12px
处理，有一个值例外，那就是 0，也就是说，如果 font-size:0 的字号表现就是 0，那么文字会直接被隐藏掉，并且只能是 font-size:0，哪怕设置成 font-size:0.0000001px，都还是会被当作 12px 处理的。
因此，如果希望隐藏 logo 对应元素内的文字，除了 text-indent 缩进隐藏外，还可以试试下面这种方法：
.logo {
font-size: 0;
}
line-height行高
设置数字和百分比都是相对于当前字体。
vertical-align
属性设置元素的垂直对齐方式。 line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的
2.我们要为一个元素添加一道 10px 宽的边框，但左侧不加边框。
border-width: 10px 10px 10px 0;
只要这一条声明就可以搞定了，但如果日后要改动边框的宽度，你需要同时改三个地方。如果它拆成两条声明的话，改起来就容易多了，而且可读性或许更好一些：
border-width: 10px;
border-left-width: 0
3.inherit
可以用在任何 CSS 属性中，而且它总是绑定到父元素的计
算值（对伪元素来说，则会取生成该伪元素的宿主元素）。
举个例子，在创建提示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式
.callout { position: relative; }
.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
4.outline
是在border之外和border很类似的属性，但是扩大outline不影响内部和外部布局。可以在button高亮的时候，在周围加一层outline
5.direction和writing-mode
direction
其中，ltr 是初始值，表示 left-to-right，就是从左往右的意思。目前东亚以及欧美文字书写就 是从左往右的；rtl 表示 right-to-left，就是从右往左的意思。
<p dir="rtl">
<img src="1.jpg" alt="美女">
<img src="2.jpg" alt="美景">
</p>
展示结果是左边是风景，右边是美女。
writing-mode
是用于修改位置方向
/* 关键字值 */
writing-mode: horizontal-tb; /* 默认值,水平方向 */
writing-mode: vertical-rl; /* 竖直方向，从右往左 */
writing-mode: vertical-lr;/* 竖直方向，从左往右 */
6.absolute和float都会使元素块状化
元素一旦 position 属性值为 absolute 或 fixed，其
display 计算值就是 block 或者 table。例如，元素默认是 inline 水平，但是一旦设置 position:absolute，其 display 计算值就变成了 block
7.margin作用
1）.自适应布局 在文档流方向使用margin:auto可以自适应布局 margin:auto 的填充规则如下。
（1）如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
（2）如果两侧均是 auto，则平分剩余空间。 2）.影响自身布局，相对于兄弟元素或者父元素 3）.影响兄弟元素布局 ，若想使
用 margin 属性改变自身的位置，必须是和当前元素定位方向一样的 margin 属性才可以，否则，margin 只能影响后面的元素或者父元素
