当前位置: 代码迷 >> HTML/CSS >> 十、Controlling Layout with CSS
  详细解决方案

十、Controlling Layout with CSS

热度:904   发布时间:2012-10-29 10:03:53.0
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可以让页面在不同的浏览器上预览。

?

  相关解决方案