CSS笔记04
css布局三种机制:
1、普通流normal flow:
元素从上到下,从左到右。
2、浮动 float:
脱离标准流,飘在普通流上边,不占位置,只能在水平线上浮动和对齐
.class{
float:none/left/right;
}
- navigation通常用ul和li来制作。
父子级的盒子浮动仍受padding和border的影响
标准流的盒子自己独占一行,也不会被下面浮动的盒子所覆盖!上为浮则下上,下为浮则上不变,若浮动影响布局,则对于影响布局的浮动盒子,设置父盒子装起来。
浮动只会影响当前的和后面的盒子,不会影响之前的,转为浮动的盒子自动转为行内块(若不设置宽和高,则取决于内容的大小,空内容则不显示)~~
很多情况父级不方便给高度
清除浮动(的影响):解决父级元素高度为0的问题
选择器{
clear:both;
}
清除浮动的四种方法:
1、额外标签法
在最后一个浮动的元素后面添加一个新的标签
<style>
.clear{
clear: both;
}
</style>
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<!-- 添加 -->
<div class="clear"></div>
</div>
2、overflow法
给父级添加 overflow 为hidden/auto/scroll
<style>
.father{
……
overflow: hidden;
}
</style>
3、after伪元素方法
<style>
.clearfix:after{
content: "";
display: block;
visibility: hidden;;
clear: both;
height: 0px;
}
.clearfix{
*zoom:1;
}
</style>
<!-- 谁清除浮动谁调用 -->
<div class="father clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
4、双伪元素法
<style>
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
</style>
页面布局原则:
1.确定可视区(版心)
2.先上后下,先左后右 “平时只看行”
表单类默认有边框
input,button{
border: 0px ;
}
错行需要检查浮动失效(浮动自动转为行内块)
父级盒子如果也是浮动,可以不给宽度,其宽度会根据包含的子级内容自动调整。
图片和一行文字居中:
vertic-align: middle ;