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

   自实习也有几个月的时间了，以爱奇艺实习为敲门砖。进入了眼下这家公司。假设说当初能进爱奇艺是暂时袭击DIV+CSS的话，眼下在这家公司体验到。不论什么技术都必须悉知原理，这样才干做到庖丁解牛。做一个内行的人。css属性和使用方法都摆在那里，但假设用得好。除了躬身实践。提高理论积淀就特别必要了，这本《写给大家看的css书》高速扫过一遍之后，之前工作遇到过不清楚的问题，一扫而空，所以有必要总结下。

   css层叠的理解

   css是层叠样式表的英文缩写。层叠意味着样式从文档结构中一个层次传递到还有一个层次，浏览器来决定，某个标签应用来自哪个来源的样式属性。

   样式的来源有三种：默认浏览器样式表、用户样式表、设计者样式表。

   默认浏览器的样式表依据浏览器不同而不同，编写样式时。须要编写重置样式表，以便设计者样式表现统一。

   用户样式表则是用户在浏览器中进行的个性化设置。

   设计者样式表则是设计者编写的。这当中又分为内联样式、嵌入样式、链接样式。内联样式和嵌入样式并没有做到样式与内容的分离。由于样式仍然包括在同一个文档中。

链接样式是唯一一种可以真正将表现样式与结构化标记分离的方式。设计者这三种样式的优先级由高到低为：内联样式、嵌入样式、链接样式。

   有了以上样式来源，层叠的工作原理：首先，找到应用每一个元素和属性的所有声明。按次序和重要性排序，次序即顺序，重要性则是属性的权重和各样式的优先级，而且先按重要性排序再按顺序排序。

   
在文档层次中对准标签

   一个选择符能够再多条规则中使用。

选择符以自右向左的标签顺序相应。上下文选择符中仅仅要标签前面选择符在文档层次中位于它上方某处，并以同样顺序出现就有效。

类和ID选择符的优点是无需考虑文档层次的样式。类和ID应该有克制的使用，常见的是加入给包括标记主要部分的块级元素，然后以响应的ID和类名开头的上下文选择符。訪问该块级元素中的标签。

   子选择符、相邻同辈选择符、属性选择符、伪类、伪元素都能为高速定位提供帮助。

规则声明

   em计算根据是一种字体中字符的宽度。ex等于给定字体中字母x高度。在PC开发中使用em指定字体大小的原因有二：能够充分利用继承性，其次。方便视力障碍者使用。

但乐帝操心重构中，改变嵌套层级easy引发连带问题，到眼下为止乐帝仍然採用像素单位。

字体和文本样式

   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是盒子内容的宽度，而不是盒子本身的宽度，假设再设置内边距和边框，盒子宽度会添加，这个须要特别注意。

   
浮动和清除

    浮动的原理：仅仅要设置了宽度的元素。并且页面有足够空间，那么对应元素就会像栏一样排列在一起。

    在非常多布局情况下。我们不想不论什么元素都向上浮动元素旁边。也就是让它保持在浮动元素下方。即

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属性。