自实习也有几个月的时间了，以爱奇艺实习为敲门砖，进入了目前这家公司。如果说当初能进爱奇艺是临时突击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是盒子内容的宽度，而不是盒子本身的宽度，如果再设置内边距和边框，盒子宽度会增加，这个需要特别注意。** **浮动和清除** **浮动的原理：只要设置了宽度的元素，而且页面有足够空间，那么相应元素就会像栏一样排列在一起。** **在很多布局情况下，我们不想任何元素都向上浮动元素旁边，也就是让它保持在浮动元素下方。即[清除浮动](http://bbs.csdn.net/topics/390342944?page=1)。** ~~~ .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属性。**