目录
CSS与DIV进行的页面布局
1、页面布局
(1)确定版心:页面的主体内容,在页面中水平居中显示
(2)分析页面中的模块:分析页面中的版块成分以及位置
(3)控制页面中各个模块
2、CSS的定位机制
(1)普通流方式:由元素在html文件中的位置决定(由标签在文件中的位置来决定)
(2)浮动方式:元素在页面中可以左右移动,直到碰到包含框或其他浮动框
(3)绝对位置:直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)
3、浮动属性
(1)浮动:元素脱离原有的标准文档流,移动到其父元素中指定的位置
(2)浮动的实现:在元素的CSS中添加float属性
left | 向左浮动 |
right | 向右浮动 |
none | 不浮动(默认值) |
浮动元素不占据空间:以两个div为例,正常状态时,是两个都能显示出来,占据的是两个孔家,若是加了浮动后,div就会叠加,两个就会显示在一个位置上,此时若是想要两个div又可以正常的显示出来,可以对浮动的div加margin-left属性,或者是让另一个也加浮动属性。当量div叠加在一起时,他们的内容不会被覆盖,如果后面的div没有指定宽度则自动横向填充完整,文字过多就会跑到第一个div下方,形成文字环绕的效果。
<style>
#d1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
#d2{
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
<style>
#d1{
width: 100px;
height: 100px;
background-color: aquamarine;
float: left;
}
#d2{
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>