布局三种机制
普通流:块级 独占一行 行内 一行共存多个
浮动:普通流浮起 多个块级 一行显示
定位
浮动
页面效果布局,多个盒子一行显示
float:left right none
特点:脱离了标准流
不占位
行内块 没有缝隙 父级宽不够盒子掉下一行
常见布局
左右布局: 左浮动 右浮动
左中右布局:左浮动 左浮动 右浮动
实际导航nav: ul嵌套li,li嵌套a
li左浮动,a转块级
清除浮动 有时不能给父级盒子设置高度
<1>最后一个浮动子元素,加上
<div style=“clear:both;”></div>
<2>父级加 overflow:hidden;
<3>after伪元素 标签加上 class=“clearfix”
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
<4>双伪元素 标签加上 class=“clearfix”
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
简单了解overflow
overflow:hidden; 溢出隐藏
overflow:auto; 溢出滚动,滚动条
CSS第五天
css属性书写顺序
布局定位——自身属性——文本属性——其他属性(CSS3)
基线对齐 vertical-align
行内元素、行内块、文字
中心基线对齐:vertical-align: middle;
底线对齐: vertical-align: bottom;
顶线对齐: vertical-align: top;