知识点
文档流
浮动作用
文本绕图
制作导航
网页布局
清除浮动的三种方式
额外标签法
父元素添加：
overflow:hidden;伪元素法：
.clearfix:afterCSS初始化
overflow
visible
hidden
scroll
auto
定位：position
static：静态定位
absolute：绝对定位
relative：相对定位
fixed：固定定位
文档流（标准流）
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
浮动布局
float: left | right
特点：
元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
浮动的作用
文本绕图
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .content img{ float: left; } </style> </head> <body> <div class="content">  <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> <p>你好，的点点滴滴多多多多多多多多多多</p> </div> </body> </html>注意：文本为什么没有被图片遮挡，因为当img和p一起时，img浮动之后就是这样的。这就叫文本绕图
制作导航
简单导航
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{ margin:0; padding: 0; } ul,li{ list-style: none; } .nav{ width: 800px; height: 40px; background: pink; margin: 20px auto; } .nav ul li{ float: left; } .nav ul li a{ height: 40px; display: inline-block; font:12px/40px 微软雅黑; padding:0 8px; text-decoration: none; } .nav ul li a:hover{ background: #ccc; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">百度一下</a></li> <li><a href="#">百度导航</a></li> <li><a href="#">百度商城</a></li> </ul> </div> </body> </html>上和导航
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body ,ul ,li{ margin: 0; padding: 0; } li{ list-style: none; } .nav{ height: 55px; margin: 10px auto; background: url('head_bg.jpg'); border-top: 1px solid #999; } .nav .nav-con{ width: 1000px; height: 55px; margin:0px auto; } .nav ul li{ float: left; background: url('li_bg.png') no-repeat right center; padding: 0px 30px; height: 55px; } .nav ul li a{ height: 55px; font:18px/55px 微软雅黑; text-decoration: none; color: #000; } .nav ul li a:hover{ color:green; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <ul> <li><a href="#">智能手机</a></li> <li><a href="#">平板电脑</a></li> <li><a href="#">百度</a></li> <li><a href="#">人工智能</a></li> </ul> </div> </div> </body> </html>网页布局
浮动布局
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .title , .footer{ width: 500px; height: 120px; background: #666; } .content{ width: 500px; height: 300px; background: #eee; margin: 10px 0px; } .left{ width: 300px; height: 300px; background: orange; float: left; } .right{ width: 190px; height: 300px; background: green; float: right; } </style> </head> <body> <div class="title"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>复杂一点的浮动布局
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .header,.main,.footer{ width: 500px; } .header,.footer{ height: 100px; background: #555; } .main{ height: 300px; } .left , .right{ width: 100px; height: 300px; background: blue; } .left{ float: left; } .right{ float: right; } .content{ width: 300px; height: 300px; background: #ccc; float: left; } .content-top,.content-bot{ height: 150px; } .content-top{ background: red; } .content-bot{ background: orange; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="content"> <div class="content-top"></div> <div class="content-bot"></div> </div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。清除浮动不是不用浮动，清除浮动产生的不利影响。
清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
额外标签法
在最后一个浮动元素后添加标签,。
拿上面的浮动布局案例为例子，我们去掉中间盒子.content的高度，底部.footer盒子跑上去了
这就是浮动造成的影响
在中间盒子中添加一个标签
<div class="content"> <div class="left"></div> <div class="right"></div> <!-- 额外标签法 --> <div style="clear:both;"></div> </div>
这样底部.footer盒子就又回到底部了
给父集元素使用
overflow:hidden;
bfc
如果有内容出了盒子，不能使用这个方法。
伪元素清除浮动 推荐使用
.clearfix:after
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .title , .footer{ width: 500px; height: 120px; background: #666; } .content{ width: 500px; /*height: 300px;*/ background: #eee; margin: 10px 0px; } .left{ width: 300px; height: 300px; background: orange; float: left; } .right{ width: 190px; height: 300px; background: green; float: right; } .clearfix:after{ content: "121111111111111111111111111"; display: block; height: 30px; } </style> </head> <body> <div class="title"></div> <div class="content clearfix"> <div class="left"></div> <div class="right"></div> <!-- 额外标签法 --> <!-- <div style="clear:both;"></div> --> </div> <div class="footer"></div> </body> </html> 
Paste_Image.png
本质和额外标签法很相似
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .title , .footer{ width: 500px; height: 120px; background: #666; } .content{ width: 500px; /*height: 300px;*/ background: #eee; margin: 10px 0px; } .left{ width: 300px; height: 300px; background: orange; float: left; } .right{ width: 190px; height: 300px; background: green; float: right; } .clearfix:after{ content: ""; display: block; height: 0; line-height: 0; visibility: hidden; clear: both; } /*兼容IE浏览器*/ .clearfix{ zoom:1; } </style> </head> <body> <div class="title"></div> <div class="content clearfix"> <div class="left"></div> <div class="right"></div> <!-- 额外标签法 --> <!-- <div style="clear:both;"></div> --> </div> <div class="footer"></div> </body> </html> 
CSS初始化
腾讯：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a{color:#2d374b;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word}新浪：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} ul,ol{list-style-type:none;} select,input,img,select{vertical-align:middle;} a{text-decoration:none;} a:link{color:#009;} a:visited{color:#800080;} a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}淘宝：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }Overflow
overflow 属性规定当内容溢出元素框时发生的事情。
| 属性 | 含义 |
|---|---|
| overflow:visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| overflow:hidden | 内容会被修剪，并且其余内容是不可见的。 |
| overflow:scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| overflow:auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
定位
定位方向： left | right | top | bottom
静态定位：
position:static;
默认值，就是文档流。绝对定位：
position:absolute;
position:absolute的元素是根据最近的非static的父元素定位，如果没有，则根据最初的包含块定义（一般是body）
特点：元素使用绝对定位之后不占据原来的位置（脱标）
元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father{ width: 500px; height: 500px; background: yellow; } .son{ width: 100px; height: 100px; background: red; position: absolute; right: 100px; top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html> 
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father{ width: 500px; height: 500px; background: yellow; position: absolute; } .son{ width: 100px; height: 100px; background: red; position: absolute; right: 100px; top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html> 
给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用
display:inline-block;）
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .baby{ position:absolute; width: 100px; height: 100px; background: orange; /*调整元素的层叠顺序*默认值0-999，值越大，元素越在上边*/ z-index: 2; } .baby1{ position:absolute; width: 100px; height: 100px; background: red; } </style> </head> <body> <span class="baby"></span> <span class="baby1"></span> </body> </html> 
相对定位
position: relative;
特点：使用相对定位，位置从自身出发。
还占据原来的位置。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .red,.green{ width: 100px; height: 100px; } .red{ background: red; position: relative; right: 20px; bottom: 10px; } .green{ background: green; } </style> </head> <body> <div class="red"></div> <div class="green"></div> </body> </html> 
子绝父相（父元素相对定位，子元素绝对定位）
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fater{ width: 500px; height: 500px; background: #eee; margin:100px 0 0 300px; position: relative; } .box{ width: 100px; height: 100px; background: red; position: absolute; top: 50px; } </style> </head> <body> <div class="fater"> <div class="box"></div> </div> </body> </html> 
子绝父相
行内元素使用相对定位不能转行内块
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ position: relative; width: 100px; height: 100px; background: yellow; } </style> </head> <body> <span>web大前端</span> </body> </html> 
设置宽高没有生效
练习
上和导航添加news
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body ,ul ,li{ margin: 0; padding: 0; } li{ list-style: none; } .nav{ height: 55px; margin: 10px auto; background: url('head_bg.jpg'); border-top: 1px solid #999; } .nav .nav-con{ width: 1000px; height: 55px; margin:0px auto; } .nav-con{ position: relative; } .nav ul li{ float: left; background: url('li_bg.png') no-repeat right center; padding: 0px 30px; height: 55px; } .nav ul li a{ height: 55px; font:18px/55px 微软雅黑; text-decoration: none; color: #000; } .nav ul li a:hover{ color:green; } .news{ position: absolute; top: -8px; left: 55px; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <ul> <li><a href="#">智能手机</a></li> <li><a href="#">平板电脑</a></li> <li><a href="#">百度</a></li> <li><a href="#">人工智能</a></li> </ul> <span class="news"></span> </div> </div> </body> </html> 
小米定位案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main{ width: 1226px; height: 460px; position: relative; } .menu{ position: absolute; top: 0; left: 0; } .left{ position: absolute; left: 244px; bottom: 178px; } .right{ position: absolute; right: 10px; bottom: 178px; } </style> </head> <body> <div class="main">  <div class="menu"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html> 
banner导航案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin 0; padding: 0; } .banner{ width: 600px; margin: 0 auto; } .nav li{ list-style: none; } .nav{ height: 32px; background: url('nav_bg.jpg'); } .nav ul li{ float: left; } .nav ul,.nav li{ padding: 0; margin:0; } .nav ul li a{ display: inline-block; width: 80px; height: 32px; line-height: 32px; text-align: center; background: url('a_bg.jpg'); text-decoration: none; font: 12px/32px 宋体; color: #454545; } .nav ul li a:hover{ background: url('button2.jpg'); color: #ccc; } </style> </head> <body> <div class="banner">  <div class="nav"> <ul> <li><a href="#">首页导航</a></li> <li><a href="#">首页导航</a></li> <li><a href="#">首页导航</a></li> <li><a href="#">首页导航</a></li> <li><a href="#">首页导航</a></li> </ul> </div> </div> </body> </html> 
固定定位
position:fixed;
特点：固定定位之后，不占据原来的位置（脱标）
元素使用固定定位之后，位置从浏览器出发。
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用
display:inline-block;）
作业
固定定位作业
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; padding: 0; } .nav{ position: fixed; top: 0; left: 0; } .content{ width: 998px; margin:44px auto 0px; } .left{ position: fixed; left: 0; top: 70px; } .right{ position: fixed; right: 0; top: 70px; } </style> </head> <body> <div class="box"> <div class="nav"></div> <div class="content"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html> 
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/2661111e15fc
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦