css的那些事儿--对一些样式额外的理解

text-indent:

常用于文本的首行缩进，单位可以是已知的任何值，可以继承；

text-align:

的值可以是center/left/right/justify/inherit前三个的作用不必多说，第四个justify是将块级元素中的文本内容给两端对齐，inherit是继承父级元素的样式；

line-height:

line-height的值控制了行间距，是文本行超出字体大小的额外空间，也就是说line-height的值和字体大小的差值就是行间距

vertical-align：

用于将行内或者表格的元素垂直对齐；

word-spacing：

规定了文本字与字之间的间距（横向）默认值是normal（相当于设置为0），有继承性，你可以给其指定具体的间长度；
letter-spacing：

和word-spacing的取值一样，只不过作用有所差别，该样式的作用是规定字母之间的间隔（设置为正值的时候可能会导致字母间隔变大），默认是normal（相当与设置为0）
white-space：

是用来处理空格的，取值有normal（合并空白符，忽略换行符）/pre（不合并空白符，保留换行符）/nowrap（合并空白符，忽略换行符）/pre-line（合并空白符，保留换行符）/pre-wrap（不合并空白符，保留换行符）

*所谓保留换行符，其实就是在源码中如果文本换行，那么在渲染的时候也会渲染出换行

unicode-bidi和direction

css中 unicode-bidi和direction属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序

块级元素的width和height是不包括padding的（纯粹的容纳空间），但是块级元素所占的空间可能会包含padding和border的宽度和margin

1.关于块级元素height:auto引起的问题总结；

一般而言，正常块级元素设置高度为auto的时候真实的高度是由内容撑起来的，但是如果子元素也是块级元素并且有外边距，你会发现很奇怪的现象----子元素占据的空间会超出父元素的空间，具体如下描述：

2.完全使用百分比来进行布局，简直就是自杀，而且会出现一些意想不到的效果，不容易控制；

如果仅仅使用百分比作为一切样式的值，那么你会发现很难布局，因为样式的变化有很种，所以传统上的百分比布局往往是“百分比+其他单位（px，em，rem等）”来布局;

3.元素相邻margin的合并情况：

元素在垂直方向上的相邻边距将会合并（大的吞并小的）

4.两个负margin，绝对值大的那个就是两者的间距：
相邻外边距为负值的时候，元素之间的间距为绝对值最大的那个，一正一负，则间距绝对值相减即可；

5.margin的值那些事儿

margin的值如果是百分数，其相对的是父元素的宽度（包括上下外边距），实际上这个也很好理解，正常流中的大多数元素总是足够高以便总是包含子元素（包括其外边距），假如margin是相对于height，就有可能造成无限循环的情况（margin使父元素height增大-->margin实际值增大-->height再次增大......）
对于行内非替换元素（例如span，a，i等）设置margin的时候，其行高不会变化（上下margin没有效果），只会影响左右外边距的效果，但是对于行内替换元素（如各种input等），上下左右都会有效果；

6.padding的那些事儿

padding对于行内元素来说，并不会增加行高，其他跟margin差不多呢，

7.border边框的新见识:

元素的边框的样式border-style，可以是多个值，和margin与padding一样遵循“上右下左”的规则，不想要边框就设置为none；同样的border-color也是一样，transparent（透明边框）,border的width可以设置为 thin，thick，medium；

8.关于浮动
浮动元素周围的外边距不会合并，行内浮动的元素会生成一个包含块（有了块级元素的一些性质，比如说有了宽高）；

9.最大（小）高度/宽度
如果有必要对元素设置最小宽度（min-width），最大宽度（max-width），对高度也是一样的，那就设置吧；
display：none的元素不会影响布局，因为这时候元素已经不存在了，但是visibility:visible/hidden,只不过是看不见，其实依然存在于布局之中，影响布局，并且有继承性

10.列表样式的那些事儿
list-style-type，用来定义列表的标志（如黑点，字母等），list-style-image：用图像作为列表项标志，有继承性，list-style-position：outside（默认，不是列表内容的一部分，也不影响布局），inside（作为列表内容的一部分），inherit（继承）。

11.伪类content
利用伪类：“：before”或者“：after”，设置content属性来在元素的前面或者后面插入内容（不限于文字，也可以是图片），还可以对插入的内容设置样式,例如：
li:before{
content: ":::";
color: green;
display: block
}
还可以插入元素的属性值（例如id，class等等）只需要content：atr(attrName)即可，content："<"atr(attrName)">"最后会生成<attrName的属性值>内容，因为浏览器将前面的“<”和“>”当作了字符串啦

5.mui的那些事儿
mui为了有一个更好的操作体验，可以给数据量比较大或者比较复杂的页面进行预加载，例如在A页面预加载B页面，可以在A页面添加
var page =  mui.preload({
url:'b页面的url',
id:'id自定义' 
})
在打开的预加载页面的时候，mui.openWindow(page)就可以打开了，更多关于预加载的可以参考mui官网；
mui中按钮或者元素的点击效果（比如说添加背景色，改变字体颜色等等）可以利用伪类：active实现
mui-content（主体内容）高度设置为100%，没有效果的原因可能是他的父亲的高度没有设置为100%，所以解决办法就是,html,body高度设置为100%

6.resize的那些事儿

resize，一个可以将任何一个元素转化为用户可以调整大小的元素的样式
resize 属性规定是否可由用户调整元素尺寸。（如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。）none（默认，不可）/horizontal（宽度可调）/vertical（高度可调）/both（两者均可调）

7.用户界面样式（内容轮廓）：
7.1.如果你想让文档的文本颜色和文本背景为默认的系统样式(操作系统)，那就可以添加这样的样式body{background：Windowcolor：WindowText}
7.2.利用outline属性（轮廓），可以为元素添加类似于边框的效果，但是边框和轮廓还是有区别的，一般而言前者不影响布局而后者影响文档布局（是元素的一部分），简写为“outine：颜色 样式 粗细”

8.关于doctype的作用：

doctype定义了当前的文本类型执行的是哪种html文档（html，xml，xhtml），其规定了哪种标签，属性和值对该文档是有效的。