10、Controlling Layout with CSS

 

1、采用css+div布局，一般在最外层会有一个wrapper的div，然后里面有header、maincontent、sidebar、footer四部份。

 

2、box model主要包括五个属性：width、height、padding、border、margin。如果不设置heiht/width，那它会自动扩充致它容器的高度/宽度(加上留白）。

 

3、把一个容器内的控件的margin设为x auto，即该控件会在容器内居中，如果设为auto x,即该控件会上下居中。

 

4、left(margin+border+padding)+width+right(padding+border+margin)=实际宽度。

 

5、当一个控件的float设置为left/right后，它会在上级容器中向left/right放在它前面的float元素的后面。

 

6、block/inline区别。inline元素只能放inline元素而block元素有可能可能放blocck和inline元素。默认情况下block元素会自动换行，而inline元素不会。在strict的dtd下，body只能放block元素。垂直方向的margin、padding、height等只影响外观而不影响布局。也就是说如果设置了垂直方向的padding，即背景色、边框看起来是起作用的，但后面的元素如果有换行，那元素会覆盖垂直部份。常用的block元素有：div/form/table/p/pre/h1-6/dl/ol/ul。inline元素有：span/a/strong/em/label/input/select/textarea/img/br。

 

7、css定义的selector中id、elementName等可以用空格格开，但id/elementname与class之间不能有空格。例如a.myClassName这样才正确。

 

8、在一个block元素内，不float的元素会影响float元素的位置，但float元素不会影响不float元素的位置。也就是说如果第一个元素没有float属性，而后面的元素有，那所有的元素都会有序地排放（第一个元素后会换行）。但如果第一个元素float，后面的不float，那这些元素会有部份重叠。

 

9、因为同一容器内前面float的元素不会影响到后面不float元素的布局，所以这样会出现float盖住不float的效果，如果要把后面的不float元素自动在前面float元素后换行，可以在不float元素中加入clear:both样式。clear的作用就是把自已排在前面float元素换行的后面。

 

10、把position设为relative，然后结合left/top/right/bottom使用就是把这个控件定位到相对于原来位置的left/top/right/bottom的值。这样使用后，该控件和别的控件可能会出现重叠。

 

11、如果把position设为absolute并结合left等四参数使用。那该控件就会定位到离它最近的设置了position的容器的left等四参数设置的位置。如果外面没有，即定位到body容器下。

 

12、如果一个box的宽度设置为100%，它就不能再设置margin/padding/border。如果设置了，它会撑大父容器。垂直毗邻的margin会引起坍塌问题。例如上面的box为40,下面的为20，合在一起的结果是40。拥有相对位置和绝对位置的对像拥有不同的行为。

 

13、block对像会自然地水平充满其父容器，因此没必要为之设置100%的宽度。inline级对像会忽略其宽度和高度设置。inline级对像会随着文字排版，并受排版属性影响(white-space,font-size,letter-spacing)。inline级对像可以使用vertical-align属性控制其垂直对齐，block级对像不可以。inline对像会在下方保留一些空间，以适应例如g一类字母的下探笔画。一个设置为float的inline对像将会变block对像。

 

14、ie6中不可滥用float，否则会带来内容消失、文字重复等问题。ie6中，float对像在float方向出现双倍的margin，所以在布局时中间的两排一边float:left,另一个float:right，这样就避免了双倍margin。将display设置为inline会解决这个问题。ie6/7中一个没有直接设置hasLayout的对像会出现很多问题，这时可以设置zoom为除normal外的其它值。ie6不支持min-width等min/max属性。ie6不支持固定位置背景图。ie6/7不支持很多display属性值，例如inline-table,inline-cell,table-row。ie6中只有a这个对像可以使用:hover这个伪类。

 

15、使用清零代码可以解决很多浏览器默认行为的兼容问题。

 

16、所有元素的默认定位都为static,即position:static。一般来说，不用指定position:static,除非想要覆盖之前设置的定位。position:static的意思是元素没有被定位，元素出现在它默认该出现的地方。

 

17、position总结。所有元素的默认定位都是position:static,这意味着元素没有被定位，而且在文档中出现在它应该在的位置。absolute:生成绝对定位元素，相对于static定位外的第一个父元素进行定位。元素的位置通过left等四个属性进行规定。fixed生成绝对定位元素，相对于浏览器窗口进行定位。但ie6不支持fixed。relative生成相对定位的元素，相对于其正常位置进行定位。例如left设为20，即该元素会在它原位置上向左偏移 20。inherit从父元素中继承position属性的值。

 

18、使用dw工具栏眼睛标签中的css layout backgroud时，dw会用不同的颜色展示不同的布局区域。

 

19、在live view状态时按下inspect按钮后，在鼠标经过控件时会显视该控件的box模形。此时如果按下alt+click可以直接打开并编辑css。另外可同时打开tag inspector面版一起使用。

 

20、window-extendtion-adobe lab可以让页面在不同的浏览器上预览。