自实习也有几个月的时间了，以爱奇艺实习为敲门砖，进入了目前这家公司。如果说当初能进爱奇艺是临时突击DIV+CSS的话，目前在这家公司体验到，任何技术都必须悉知原理，这样才能做到庖丁解牛，做一个内行的人。css属性和用法都摆在那里，但如果用得好，除了躬身实践，提高理论积淀就特别必要了，这本《写给大家看的css书》快速扫过一遍之后，之前工作遇到过不清楚的问题，一扫而空，所以有必要总结下。
css层叠的理解
css是层叠样式表的英文缩写，层叠意味着样式从文档结构中一个层次传递到另一个层次，浏览器来决定，某个标签应用来自哪个来源的样式属性。
样式的来源有三种：默认浏览器样式表、用户样式表、设计者样式表。
默认浏览器的样式表根据浏览器不同而不同，编写样式时，需要编写重置样式表，以便设计者样式表现统一。
用户样式表则是用户在浏览器中进行的个性化设置。
设计者样式表则是设计者编写的，这其中又分为内联样式、嵌入样式、链接样式。内联样式和嵌入样式并没有做到样式与内容的分离，因为样式仍然包含在同一个文档中。链接样式是唯一一种能够真正将表现样式与结构化标记分离的方式。设计者这三种样式的优先级由高到低为：内联样式、嵌入样式、链接样式。
有了以上样式来源，层叠的工作原理：首先，找到应用每个元素和属性的全部声明，按次序和重要性排序，次序即顺序，重要性则是属性的权重和各样式的优先级，并且先按重要性排序再按顺序排序。
在文档层次中对准标签
一个选择符可以再多条规则中使用。选择符以自右向左的标签顺序对应，上下文选择符中只要标签前面选择符在文档层次中位于它上方某处，并以相同顺序出现就有效。类和ID选择符的好处是无需考虑文档层次的样式。类和ID应该有节制的使用，常见的是添加给包含标记主要部分的块级元素，然后以响应的ID和类名开头的上下文选择符，访问该块级元素中的标签。
子选择符、相邻同辈选择符、属性选择符、伪类、伪元素都能为快速定位提供帮助。
规则声明
em计算依据是一种字体中字符的宽度，ex等于给定字体中字母x高度。在PC开发中使用em指定字体大小的原因有二：可以充分利用继承性，其次，方便视力障碍者使用。但乐帝担心重构中，改变嵌套层级容易引发连带问题，到目前为止乐帝仍然采用像素单位。
字体和文本样式
css产生的意义在于实现了网页结构与样式的分离。说到字体的范畴中，类似分形学，依然有结构与样式分离的属性。字体属性主要涉及文字的大小和外观。文本属性则主要涉及对字体的处理，例如行高和字母间距。
字体集合又分为衬线和无衬线两种，主要区别在于字符笔画末端。无衬线sans-serif，更适合web设计。
字体属性font-variant将所有字母转换成小型大写字母。其他相关字体属性如font-weight、font-size、font-style font-family从字面上就可以看出这些均为字体属性。
文本属性中需要理解一个概念，即css会把一个盒子放到位于元素中文本周围。这个盒子叫文本盒子。text-indent用于设置文本盒子相对于包含元素的相对位置。常用的首行缩进即此属性实现。并且text-indent属性有继承值，div中设置text-indent值，则所有段落都会继承这个text-indent值，并且段落继承缩进值是基于父元素计算之后的结果。
letter-sapacing用于调整字母间的距离，word-spacing用于调整单词之间的距离。
text-align设置水平方向上与包含元素对齐方式，因此必须在包含元素上设置此属性。
line-height除了设定行距外，还有实现单行文本居中的技巧。方法是将行高设置为包含元素高度，来实现垂直居中效果。
text-transform改变元素中国文本大小写形式。
vertical-align可以相对于基线将文本向上方或下方移动。例如可以构造化学表达式或者方程式。
盒模型
定位元素分为三部分：盒模型描述标记中存在的每个元素的定位控制。position属性定义了这些元素在页面上的位置关系。display属性定义元素在页面上是堆叠还是并排及是否出现。
盒模型中涉及三个概念：边框、外边距（margin）、内边距（padding）。
边框有三个属性：宽度、样式、颜色。边框会增大元素的尺寸，因此边框会改变布局。
盒子内边距（padding）指盒子内容与盒子边框之间的距离。内边距处于盒子内部，设置背景色延伸可以用内边距。
盒子外边距（margin）设置盒子与相邻元素之间的距离。多数块级元素有默认外边距，因此需要初始化。
*{margin：0;padding:0;}
盒子外边距有折叠外边距的问题，即上下外边距相遇时，会相互折叠，直到一个元素外边距接触到另外一个元素，通俗讲即最后外边距效果是较大的外边距，而不是累加。
盒子的大小，通过以上内边距与外边距的定义，我们知道内边距与边框属于盒子大小，而外边距不属于，通常情况下，设置元素的width是盒子内容的宽度，而不是盒子本身的宽度，如果再设置内边距和边框，盒子宽度会增加，这个需要特别注意。
浮动和清除
浮动的原理：只要设置了宽度的元素，而且页面有足够空间，那么相应元素就会像栏一样排列在一起。
在很多布局情况下，我们不想任何元素都向上浮动元素旁边，也就是让它保持在浮动元素下方。即清除浮动。
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}
position属性
如上所述，position属性定义了元素在页面中的位置关系。这里要了解一个关键概念：定位环境。定位环境就是当我们使用top、left、right、bottom时移动元素时，我们会参照另外一个元素移动它，而这个作为参照的元素就是定位环境。即相对于哪个元素移动。
通常开发时，经常设置需要作为需定位元素祖先元素的position属性为relative，就可以使需要定位的元素修改定位环境。
相对定位作为静态元素，所占据空间及其他元素位置都不变，即只是视觉上移动，并没有脱离文档流，文档中，仍然有此元素的位置。
绝对定位与相对定位不同之处在于，它会把元素完全移出文档流。其他文档流的内容，会随着abosolute的设置而紧跟文档流移动。
固定定位也是脱离文档流，只不过定位环境是视口，即浏览器显示网页的窗口。
display属性
display：none与visiblity：hidden区别在于，前者原先占据的空间都会被移除，而后者元素占据空间会得到保留，只是不显示。
display：block和inline可以根据语义化需要，来针对性的修改默认元素的display属性。
浮动布局
对带有关键宽度的元素，好的布局方法是嵌套一层内部div。别为那些构成主分栏的div直接添加视觉样式，要添加就给他们内部div添加。这也是结构与样式分形学，进一步细分。
#main_wrapper {
width:840px; /* widths of columns will change proportionately as this width is changed */
margin-left:auto; /* centers layout in browser */
margin-right:auto; /* centers layout in browser */
text-align:left; /* resets the centering hack for IE6 on the body tag */
}
#header {
}
#nav {
width:22%; /* this width + content width must total 100% */
float:left; /* floats on nav and content divs make them sit side by side */
}
#content {
float:left; /* floats on nav and content divs make them sit side by side */
width:78%; /* this width + nav width must total 100% */
top:0px;
}
#footer {
clear:both; /* makes the footer sit below whichever column is longest */
}
overflow属性用于控制元素如何处理它们包含的内容，overflow：hidden规则能够使较窄分栏在上述情况下保持宽度不变。之前乐帝处理图片等比例放缩就用到此属性。
两栏流动式布局
两栏流动式布局，设置min-width和max-width属性，以使布局不会失控，同时给导航栏设置定宽，使内容栏动态改变宽度。
三栏布局
三栏固定宽度布局，设置浮动同时设置每栏所占百分比宽度大小即可。
三栏流动式布局文档流及关键样式如下：
#threecolwrap {
float:left;
width:100%;
background:url(../../../chapter_5/code/images/3_col_faux_art_right.gif) repeat-y right;
}
#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling margin on float*/
<span style="color:#ff0000;">margin-right:-170px; /* CWS - neg margin move */</span>
background: url(../../../chapter_5/code/images/3_col_faux_art_left.gif) repeat-y left;
}
#nav {
float:left;
<span style="color:#ff0000;">width:150px;</span>
display:inline; /* stops IE doubling margin on float*/
}
#content {
width:auto;
<span style="color:#ff0000;">margin-left:150px;
margin-right:170px;</span>
}
#promo {
float:left;
<span style="color:#ff0000;">width:170px;</span>
}
通过设置#nav和#promo定宽，并设置content外边距，实现流动三列布局。
设计界面组件
表格：表格涉及标签语义化，添加样式的目标是尽量添加最少的视觉因素，以保证用户对数据的理解。table标签使用border-collapse可以将默认的两个单元格双边框减少到单边框。
表单：表单需要注意的是并列排列的表单控件，从语义关系上，可以使用无序列表来实现对齐等操作。
列表：列表也会根据浏览器不同而不同，弥补差异的方法是，将列表的外边距和内边距都重设置为0，然后重新添加样式。
行内元素应用内边距和边框时，不会影响包含元素，解决方法是设置display属性。