网页布局基础
运用DIV加CSS进行网页布局是基础中的基础,本节课程老师主要讲解流式布局、浮动布局、绝对定位布局,其中包含盒子模型、float属性、position属性等知识点。老师运用三个案例让我们更加容易的理解了这几个知识点。
运用盒子模型可以实现自动居中一列布局,用float属性实现横向两列甚至多列布局,以及如何解决浮动给其他模块带来的影响,绝对定位的方法可以和float属性达到相同的效果,我们可以根据不同的需求来选择。
下面摘记一些我做的笔记,也就是自己需要掌握的地方:
1、如果一个元素没有设置宽度,而设置了float属性,宽度会随着内容的变化而变化,而且,设置浮动后,会对相邻的元素(特指紧邻后面的元素)产生影响。
2、清除浮动的方法:a 运用clear:both,可以清除影响,但是有些情况下不能起作用,就需要另外一种方法 b 同时设置width和overflow,例如:width:100%;overflow:hidden。
3、运用绝对定位时,使用absolute实现横向两列布局 ,常用于一列固定宽度,另一列宽度自适应。
主要应用技能: relative----父元素相对定位
absolute----自适应宽度绝对定位
在这里需要注意:固定宽度列的高度要大于自适应宽度的列。
暂时就学了这些,在后面编程挑战的时候运用的还不是特别熟练,需要回去看老师讲解,需要多运用,要学会灵活运用。