前端编程提高之旅（五）----写给大家看的css书

   自实习也有几个月的时间了，以爱奇艺实习为敲门砖，进入了目前这家公司。如果说当初能进爱奇艺是临时突击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属性定义了元素在页面中的位置关系。这里要了解一个关键概念：定位环境。定位环境就是当我们使用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属性。