1、浮动
1、浮动
块级元素
独占一行
若块级元素宽度较少时，导致后续是空白
布局
先整体，后局部
先简单，再复杂
复杂再划分
整体布局
局部
2、float属性
浮动==飘
float属性
让网页元素按照标准文档流方式显示
自上到下，自左向右
left
元素向左浮动
right
元素向右浮动
none
默认值，不浮动
重置默认样式，否则无法实现像素级精确控制
clear 属性
clear属性
使用浮动之后，导致后续元素显示异常
清除之前的浮动特性
none
默认值
left
清除左浮动
right
清除右浮动
both
清除左右浮动
4、整体布局示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .container { width: 1196px; margin: 0 auto; } .header { float: left; width: 100%; height: 50px; background-color: #1f78b5; } .left { float: left; width: 200px; height: 600px; background-color: #90ef90; } .main { float: left; margin-left: 5px; width: 990px; height: 600px; background-color: lightpink; } .footer { clear: left; width: 100%; height: 120px; background-color: red; } </style> </head> <body> <div class="container"> <div class="header">top</div> <div class="left">left</div> <div class="main">main</div> <div class="footer">footer</div> </div> </body> </html>
5、overflow属性
overflow属性
溢出处理
visible
默认值，超出范围显示
hidden
内容超出部分不显示
scroll
出现滚动条，方便内容查看
auto
如果超出范围，自动显示滚动条方便查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .book { width: 200px; height: 100px; background-color: lightpink; overflow: hidden; } </style> </head> <body> <div class="book"> <div>一77事变，打倒小日本！77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本</div> <div>二77事变，打倒小日本！77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本</div> <div>三77事变，打倒小日本！77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本</div> <div>四77事变，打倒小日本！77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本77事变，打倒小日本</div> </div> </body> </html>
6、局部布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 1196px; margin: 0 auto; } .header { float: left; width: 100%; height: 50px; background-color: #1f78b5; } .finder { float: left; width: 100%; height: 120px; } .finder li { float: left; } .finder .f_logo { width: 300px; text-align: center; line-height: 120px; } .f_logo img { vertical-align: middle; } .finder .f_search { margin: 0px 50px; width: 700px; background-color: lightpink; } .f_search form { width: 100%; height: 60px; border-radius: 60px; border: solid 5px red; } .finder .f_download { width: 75px; height: 80px; background-color: white; } .f_download img { width: 70px; height: 60px; } .left { float: left; width: 200px; height: 600px; background-color: #90ef90; } .main { float: left; margin-left: 5px; width: 990px; height: 600px; background-color: lightpink; } .footer { clear: left; width: 100%; height: 120px; background-color: red; } </style> </head> <body> <div class="container"> <div class="header">top</div> <div class="finder"> <ul> <li class="f_logo"><a href="#"><img src="images/taobao.png"/></a></li> <li class="f_search"> <form> <span>宝贝</span> <input type="search" name="keyword" /> </form> <ul> <li><a href="#">新款连衣裙</a></li> <li><a href="#">四件套</a></li> <li><a href="#">潮流T恤</a></li> <li><a href="#">时尚女鞋</a></li> <li><a href="#">短裤</a></li> <li><a href="#">半身裙</a></li> <li><a href="#">男士外套</a></li> </ul> </li> <li class="f_download"><a href="#"><span>下载淘宝</span> <img src="images/download_taobao.png"/></a></li> </ul> </div> <div class="left">left</div> <div class="main">main</div> <div class="footer">footer</div> </div> </body> </html>
