1.浮动
1.1传统网页布局的三种方式
- 标准流:是指标签在不借助任何特殊的css排列规则元素的排布规则
- 浮动:通过浮动的方式使得元素脱离标准流控制,灵活调整位置
- 定位:通过添加定位使得元素脱标,位置更加灵活
1.2浮动的语法格式
div{
float:left;
/* 设置float属性,可以控制元素左浮动或右浮动,属性值:none/left/right */
}
1.3浮动的特性
- 浮动元素会脱离标准流,不再保留原来的位置
- 浮动的元素会在一行内显示,并元素顶部对齐,且浮动元素之间互相贴靠
- 浮动的元素会具有行内块元素的特性
- 浮动元素的默认宽度与内容相关
- 设置浮动以后元素会向父元素的左侧或右侧移动,直到触碰边界
- 浮动元素为文字环绕提供支持,为元素设置浮动,文字会自动环绕在浮动元素的周围
<style>
.father{
width: 200px;
height: 200px;
background-color: skyblue;
}
.son{
float: right;
width: 50px;
height: 50px;
background-color: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
如图所示即实现了元素脱离标准流控制的右浮动效果,不会脱离父元素的边界。
2.清除浮动
当我们的父盒子高度不固定,会随着其内部元素的增多而动态变化时,内部脱标的浮动元素不占据实际的位置,因此父盒子的高度会被认作是0。当父盒子后方有新的内容出现时,新的内容会占据父盒子原本应在的位置。这时候我们就需要清除浮动的影响。
<style>
*{
margin: 0;
padding: 0;
}
.father{
margin:0 auto;
width: 1200px;
background-color: skyblue;
}
.son{
margin-left: 50px;
float: right;
width: 50px;
height: 50px;
background-color: red;
}
.container{
width: 1200px;
margin: 0 auto;
height: 300px;
background-color: yellow;
}
</style>
<body>
<div class="father">
<div class="son"></div>
/*div.son*10 布置若干个内容*/
</div>
<div class="container">
后续内容
</div>
解决方法:
1).在需要清除浮动的元素后面加上一个空的块级盒子,并设置属性clear:both;
2).给父元素添加 overflow:hidden;
3).给父元素添加after伪元素
4).双伪元素法,为父元素添加before,after伪元素
/* 双伪元素清除浮动 */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }.clearfix {
*zoom:1;
}
/* 单伪元素 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
3.CSS属性书写顺序
为了使我们的代码具有更高的可读性,提升代码质量和写作风格,在书写元素属性时,尽量按照一定顺序书写。
1).布局定位属性:display/position/float/clear/overflow
2).自身属性:width/height/margin/padding/border/background
3).文本属性:color/font/text-decoration/text-align/vertical-align
4).其他属性:content/cursor/border-radius/box-shadow/background-color
4.导航栏实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a{
display:inline-block;
width: 120px;
height: 58px;
font-size: 20px;
background-color: pink;
text-decoration: none;
line-height: 58px;
text-align: center;
color :white;
}
.nav .bg1 {
background: url(images/bg1.png) no-repeat;
}
.nav .bg2 {
background: url(images/bg2.png) no-repeat;
}
.nav .bg3 {
background: url(images/bg3.png) no-repeat;
}
.nav .bg4 {
background: url(images/bg4.png) no-repeat;
}
.nav .bg5 {
background: url(images/bg5.png) no-repeat;
}
.nav .bg1:hover {
background: url(images/bg11.png) no-repeat;
}
.nav .bg2:hover {
background: url(images/bg22.png) no-repeat;
}
.nav .bg3:hover {
background: url(images/bg1.png) no-repeat;
}
.nav .bg4:hover {
background: url(images/bg2.png) no-repeat;
}
.nav .bg5:hover {
background: url(images/bg3.png) no-repeat;
}
ul li{
float: left;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li> <a href="#" class="bg1">五彩导航</a></li>
<li> <a href="#" class="bg2">五彩导航</a></li>
<li> <a href="#" class="bg3">五彩导航</a></li>
<li> <a href="#" class="bg4">五彩导航</a></li>
<li> <a href="#" class="bg5">五彩导航</a></li>
</ul>
</div>
</body>
</html>
Tips:
- 导航类一般使用ul+li,li中包含a标签的形式来做
- 文字垂直居中:line-height=块的height
- 浮动的盒子没有外边距塌陷的问题
- 利用:hover伪类,设置鼠标悬浮时元素的样式,即可实现导航栏的效果