手记

05_CSS文档流、浮动、定位

知识点

  • 文档流

  • 浮动作用

  • 文本绕图

  • 制作导航

  • 网页布局

  • 清除浮动的三种方式

  • 额外标签法

  • 父元素添加:overflow:hidden;

  • 伪元素法:.clearfix:after

  • CSS初始化

  • 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">         ![](1.jpg)         <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;

  1. 额外标签法
    在最后一个浮动元素后添加标签,。
    拿上面的浮动布局案例为例子,我们去掉中间盒子.content的高度,底部.footer盒子跑上去了
           
    这就是浮动造成的影响
    在中间盒子中添加一个标签

    <div class="content">         <div class="left"></div>         <div class="right"></div>         <!-- 额外标签法 -->         <div ></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 ></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 ></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">![](new.png)</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">         ![](111.jpg)         <div class="menu">![](xiaom_left.png)</div>         <div class="left">![](left.png)</div>         <div class="right">![](right.png)</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">         ![](banner1.jpg)         <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">![](img/r1_c1.png)</div>         <div class="content">![](img/box.png)</div>         <div class="left">![](img/r2_c1.png)</div>         <div class="right">![](img/r2_c2.png)</div>     </div> </body> </html>

   

作者:对方不想理你并向你抛出一个异常
链接:https://www.jianshu.com/p/2661111e15fc


0人推荐
随时随地看视频
慕课网APP