1、企业开发中,垂直布局一般使用标准流布局,水平布局一般使用浮动流布局。
2、练习步骤(本练习为网页布局的超级精华,理解了这个布局,就理解了网页布局的精髓!!!)
2.1 清除默认边距(使用企业开发方式,不要使用*选择器)
2.2 布局网页原则,从上到下,从外向内布局
2.3从上到下分为三个布局类名分别为header、content、footer
2.4分别给这三个布局设置宽高、相对于浏览器的对齐以及背景颜色
2.4在header内部设置三个布局,分别是logo(标识)、language(语言)、nav(导航),然后为每个区域设置宽高和背景夜色,然后将logo左浮动,将language和nav右浮动(这两个均右浮动却造成上下布局有些难以理解,不过这是由于nav宽度过长无法使得language和nav两个区域横向并列显示,所以nav就被挤下来了。这是我们明知道的结果,这叫做巧用浮动元素贴靠现象。当然也可以按照常规的垂直用标准流的写法写,不过代码量会增大)
2.5在content内部先分为左右两部分区域(左侧为aside,右侧为article)设置好宽高和背景颜色后分别左右浮动,然后在右边区域article中分为上下两个区域(用标准流分上下,上为articleTop,下为articleBottom),接着在articleTop中添加左右两个区域分别左右浮动(articleTopLeft、和articleTopRight),最后在articleTopLeft中添加两个区域news1和news2(上下排列,用标准流即可)。
总结:页面布局时,宽高计算一定要事先总体规划,确定好再实现代码,不要写着代码估摸着宽高,那样会效率很低,而且往往不太好成功。
3、书写css代码中,企业开发的做法往往是把某个区域的CSS代码放在一起,而且要用后代选择器以分清层次,以便于后期的维护
4、在标准流中,内容的高度可以撑起父元素的高度,但是在浮动流中,浮动元素的高度无法撑起父元素的高度。
5、清除浮动的方式一,给父元素设置高度。但是在企业开发中,能不写高度就不写高度,所以这种方式在企业开发中不常用。
6、清除浮动的方式二,在当前元素中设置clear属性( 取值为left,right,both),含义,表示不要找前面的浮动元素,而是从在新一行重新开始。
7、在某个元素中设置clear属性后,他的margin属性会失效,所以也不完美,还有第三种清除浮动的方式
8、清除浮动的方式三,外墙法、内墙法,外墙法指的是在两个需要重新换行浮动标签之间加上一个div标签用于隔离两个(好像一堵墙),同时新添加的这个div标签还要设置clear属性。外墙法可以让第二个盒子使用margin-top属性,但是外墙法不可以让第一个盒子使用margin-bottom属性。所以,在企业开发中,如果使用外墙法,不要使用第二个盒子的margin-top属性,更不要使用第一个盒子的margin-bottom属性,一般情况下,我们最好使用中间隔离墙的height属性用于隔离两个盒子。
内墙法指的是在第一个盒子内部所有元素的最后添加一个div用于隔离两个盒子。内墙法比外墙法改进的地方是,可以让第一个盒子使用margin-bottom属性,而且可以撑起第一个盒子的高度。
在企业开发中,不常用外墙法和内墙法。!!(白学了吗,呵呵,其实并没有,看下面)
9、伪元素选择器的作用:给指定标签的内容前面添加子元素或者给指定标签的内容后面添加子元素。
10、清除浮动的方式四:伪元素选择器清除浮动:本质上属于内墙法,不过是在CSS中添加这堵墙而已。注意:伪元素选择器清除浮动可能存在IE6兼容性问题。添加*zoom:1;即可解决。
10、清除浮动的方式五:overflow:hidden;在第一个盒子里面设置这个属性即可达到清除浮动的目的。注意:该方式清除浮动同样存在IE6兼容性问题。添加*zoom:1;即可解决。
11、总结overflow:hidden;的作用
11.1 将超出标签范围的内容裁剪掉
11.2 清除浮动
11.3 里面的盒子设置margin-top属性之后,外面的盒子不被顶下来
12、