1. 技术文章
  2. CSS 2. 盒模型|浮动

CSS 2. 盒模型|浮动

由 本秂侑毒 提交于 2020-01-03 16:24:21

 1、盒模型

盒模型： 在网页中 基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。重要的属性： width,height,padding,border, margin

盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充，内边距，壳子-边框），content（内容区域）

width: 指的是内容的宽度，而不是整个盒子真实的宽度；height: 指的是内容的高度，而不是整个盒子真实的高度。

做一个宽度402*402的盒子，你应该如何设计？盒模型的计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型的计算</title>
    <style type="text/css">
        /*div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }*/
        div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            padding: 175px;
        }
        /*div{
            width: 0;
            height: 0;
            border: 1px solid red;
            padding: 200px;
        }*/
    </style>
    <!-- 如果想保证盒子的真实宽度，加width应该减padding  减width 应该加padding -->
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景</title>
 6 
 7     <style type="text/css">
 8         /* 1000*1000 */
 9         #img{
10             width: 990px;
11             height: 980px;
12 
13             background: red;
14             padding-top: 10px;
15             border: 5px solid black;
16 
17         }
18 
19     </style>
20 </head>
21 <body>
22     <div id="img"></div>
23 </body>
24 </html>
View Code

 

padding

　　padding:内边距 控制内容到边框的距离

1.只写一个padding代表四个方向，也可以单独指定某一个方向

2.元素设置了padding值是额外加在原来大小之上的width+padding。如果不想改变实际大小，那就在width-padding对应方向的值

3.padding是添加给父级的，改变的是父级包含的内容的位置，自身位置不变

4.简写方法 1）一个值：4个方向       2）两个值：上下 左右      3）三个值：上 左右 下      4）四个值：上 右 下 左（顺时针方向）

注意：padding不支持负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .box{
        width: 300px;
        height: 300px;
        background-color: red;
        border: 5px solid yellow;
        /*padding: 30px;*/
        /*小属性设置,下面4行跟上边一句话一样*/
        /*padding-top:30px;*/
        /*padding-bottom: 30px;*/
        /*padding-left: 30px;*/
        /*padding-right: 30px;*/

        /*综合属性设置，用空格隔开*/
        /*padding: 20px 30px 40px 50px ;*/  /*上 右 下 左*/
        /*padding: 20px 30px 40px;*/  /*上 左右  下*/
        /*padding: 20px 30px;*/  /* 上下 左右*/
        padding: 20px; /*上下左右*/
    }
    
    <!--
    padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
    也就是说background-color这个属性将填充所有的border以内的区域
    padding就是边框到内容之间的距离
    padding有四个方向。所以说我们能分别描述4个方向的padding
    方法有两种：1.写小属性  2.写综合属性 用空格隔开
     -->
    </style>
</head>
<body>
    <div class="box">
        我非常地幸运，能从那些对这一点深信不疑的人身上学习，他们清楚地知道改变世界的起点是
        “跟随一种远见卓识，而不是某一条道路”。这就是我的朋友和导师——史蒂夫·乔布斯。
        乔布斯的远见便是，伟大的想法从拒绝接受事情原本的样子中诞生出来。这些原则在今天依旧指导着苹果公司的员工。
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 200px;
            background-color: red;
            /*padding-left: 20px;
            padding-top: 30px;
            padding-right: 20px;*/
            padding: 20px 30px;
        }
    </style>
</head>
<body>

    <!-- 内边距定义:内容区域到边框的距离
        内边距会扩大元素所在的区域
        注意：为元素设置内边距 只能影响自己。不会影响其他的元素 -->
    <div class="box1">123</div>
    <div></div>

</body>
</html>

 

一些标签默认有padding

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>

body有默认的margin：8px，
        比如说通常我们做站的时候，要清除默认的padding，margin

        *它的效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同去背记，因为有人已经给咱们写好了这些清除默认的样式表）
            百度一下reset.css
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }

border

边框样式

1.border会改变元素的实际大小；       2.背景色会渲染到border区域

 

  

 

四个值： 上  右 下 左 顺时针 border-style:dotted dashed double solid;
三个值： 上 左右 下
两个值： 上下。左右
一个值： 四个方向

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            /*border: 5px solid red;*/
            /*按照3要素；上边一行定这3行*/
            /*border-width: 5px;*/
            /*border-style: solid;*/
            /*border-color: red;*/

            /*border-width: 5px 10px;*/
            /*border-style: solid dotted double dashed;  !* 要给它设置线性样式才能显示出来：实线、点状、双线、虚线*!*/
            /*border-color: red green yellow;*/

            /* 按照方向分*/
            /*border-top-width: 10px;
            border-top-color: red;
            border-top-style:solid;

            border-bottom-width: 10px;
            border-bottom-color: red;
            border-bottom-style:solid;

            border-left-width: 10px;
            border-left-color: red;
            border-left-style:solid;

            border-right-width: 10px;
            border-right-color: red;
            border-right-style:solid;*/

            /*设置border没有样式*/
            /*border: none;*/
            border-bottom:none ;
            border-top: 0;
            border-left: 10px solid red;
        }
    </style>
    <!-- 
    border: 边框的意思
    边框有三个要素： 粗细 线性 颜色
    如果颜色不写，默认是黑色的
    如果 粗细不写 不显示。 只写线性样式，默认的有上下左右 3px的宽度 solid 默认的黑色
     -->
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

用border制作小三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent; /*透明色 border-left:solid 200px rgba(0,0,0,0) */
            border-right: 20px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

margin 

　margin： 外边距，控制元素与元素之间的距离。

1）margin 的4个方向  

2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分

3)margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin  

 html的部分标签自带margin padding p body ul

相邻两个元素或者嵌套时都会遇到这样的问题：一个是往上走一个往下走，它们的外边距是相遇了，就会形成一个外边距，它们的外边距会进行合并（这是一种效果，不是人为的），当这两个值是以最大值为基准进行设置的，就是说如果我的外边距是20，它的是40，就以它的为基准进行设置。如何解决呢？可以给它设置个border：见下面，这样就设置成100了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #F70073;

            margin-bottom: 50px;
            border:1px solid green;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 100px;
        }


    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2">
        <div class="child"></div>
    </div>

</body>
</html>

在有父子关系的时候

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #F70073;

            margin-bottom: 50px;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 100px;
            border:1px solid red;  加上这个就解决了那个偏移问题，儿子在父的基准下向下偏移了300px；不能改成0px
　　　　　　　padding:1px; 这种设置方法也可以解决偏移问题
　　　　　　　overflow:hidden; 设置隐藏也可以；

        }
        .child{
            width: 100px;
            height: 100px;
            background-color: #0731FA;
            margin-top:300px ;
        }

    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2">
        <div class="child"></div>
    </div>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #F70073;
            /*margin-top: 20px; 它会往下移动20px，box1它四周默认是4个8，一共28px */
            /*margin-left: 40px; 它往右移动了40px */
            /*margin-bottom: 20px;*/
            /*margin-right:40px;*/

            /*margin: 20px 30px 40px 50px;  上右下左 简单写法*/
            /*margin: 20px 40px; */  上下20，左右40

            /*margin-bottom: 50px;  往下走了*/

            /*margin:  0 auto; 0是上下，auto是左右自动居中；使盒子元素水平居中显示*/
            /*margin:  0 auto;*/
            border:1px solid green;

        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 100px;  往上走的
            border:1px solid red;
            /*padding: 1px;*/
            /*overflow: hidden;*/

        }
        .child{
            width: 100px;
            height: 100px;
            background-color: #0731FA;
            margin-top: 300px;

        }
        /*span{
            background-color: red;
        }*/

        /*.span1{
            margin-left: 30px;
        }
        .span2{
            margin-left: 20px;
        }*/  它左右边都移动了，设置左右方向没有问题

        /*相邻两个元素或者是嵌套元素时都会形成这个问题；当两个垂直外边距 相遇时，会形成一个外边距 ，称为‘外边距合并';以外边距最大者为设置基准
            所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。
            毗邻(/同级或嵌套)的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
        */

        /*注意:父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局，
        解决办法：  子债父还
        1. 父级或子元素使用浮动或者绝对定位absolute
        浮动或绝对定位不参与margin的折叠

        2. 父级overflow:hidden;

        3. 父级设置padding（破坏非空白的折叠条件）

        4. 父级设置border
        */


    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2">

        <div class="child"></div>
    </div>


    <!-- <span class="span1">12233</span>
    <span class="span2">21213</span> -->

</body>
</html>

子元素margin-top如何影响父元素：https://blog.csdn.net/sinat_27088253/article/details/52954688

 

margin塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 2px solid greenyellow;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
            margin-bottom: 20px;
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            float: left;
        }
/*当给两个兄弟盒子 设置垂直方向上的margin （top、bottom）那么以较大的为准，那么我们称这种现象叫塌陷；
浮动的盒子垂直方向 不塌陷*/
        
        span{
            background-color: #1b6d85;
        }
        span.a{
            margin-right: 20px;
        }
        span.b{
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <span class="a">内容1</span>
    <span class="b">内容2</span>
</body>
</html>

 

margin 0 auto

1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，如果没有会继承父盒子宽度，靠父盒子来填充它的宽度；
        文字水平居中使用text-align: center;

    2.只有标准流下的盒子 才能使用margin:0 auto; 
    当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了

    3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 780px;
            height: 50px;
            background-color: #1b6d85;
            /*margin: 0 auto;*/  /*水平居中盒子*/

            margin-left: auto;
            margin-right:auto;   /*左右都写水平居中，相当于 0px auto*/

            text-align: center;  /*居中文字*/
            /*float: left;*/
        }

    </style>

</head>
<body>
    <div>文字</div>
</body>
</html>
View Code

善用父padding，而不是margin

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .father{
12             width: 270px;
13             height: 270px;
14             background-color: blue;
15             padding-top: 30px;  /**/
16             padding-left: 30px;
17             /*border: 2px solid red;*/
18 /*因为父亲没有border，没有框把它给框住；那么儿子margin实际上踹的是“流” 踹的是行
19 所以父亲就掉下来；给父加一个border就可以了。但一个网站不能都带着border；要善于使用padding-top来调整它的位置。*/
20         }
21         .xiongda{
22             width: 100px;
23             height: 100px;
24             background-color: orange;
25             /*margin-left: 30px;*/
26             margin-top: 30px;
27         }
28     </style>
29 
30 </head>
31 <body>
32     <div class="father">
33         <div class="xiongda"></div>
34     </div>
35 </body>
36 </html>
View Code

 

什么是标准文档流
        宏观的讲，我们的web页面和ps等设计软件有本质的区别
        web 网页的制作 是个“流”像水流一样，  从上而下 ，像 “织毛衣”
        而设计软件 ，想往哪里画东西 就去哪里画

        标准文档流下 有哪些微观现象？
        1.空白折叠现象；多个空格之间或者只要换行了都被当做一个空格
        2.高矮不齐，底边对齐；
        3.自动换行，一行写不满，换行写。

 2、display的用法

display
1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换。

display:block（块级）
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:inline（行内）
行内元素
只要设置了display: inline，那么元素的width、height、margin-top、margin-bottom和 float属性都不会有什么影响。

display:inline-block（行内块级）
行内块元素
同时具有行内元素和块级元素的特点。

display:none
HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

 

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

 

 块级元素和行内块元素的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            display: inline-block;  /*将块元素转化成行内元素*/
            width: 200px;
            height: 40px;
            border: 1px solid red;
        }
        .box2{
            margin-top: 20px;
            width: 200px;
            height: 50px;
            font-size: 30px;
            border: 2px solid yellow;
        }
        span{
            background-color: #2aabd2;
            width: 101px;
            height: 100px;
            /*display: block;  !*将行内元素转化成块级元素*!*/
            /*display: none; !*隐藏当前的标签 不占当前位置;span标签没了 *!*/
            visibility: hidden;  /*隐藏当前的标签，占据当前位置*/

        }
        img{
            width: 300px;
            height: 300px;
            display: none; /*隐藏当前的标签*/
        }

    </style>

</head>
<body>
    <div class="box1">内容1</div>
    <div class="box1">内容1</div>
    <div class="box2">内容2</div>
    <span>alex</span>
    <span>kris</span>

    <img src="./images/企业1.png" alt="">
<!-- form表单中 input textarea select 和img都是行内块状元素 -->
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">
        div{
            width:  100px;
            height: 100px;
            background-color: red;
            /*控制元素隐藏，不占位置*/
            /*display: none;*/
            /*控制元素隐藏，占位置，影响后面盒子布局*/
            /*visibility: hidden;*/

            /*块级元素能转换为行内元素在一行内显示，还能设置宽高*/
            /*display: inline-block;*/
            /*将 块级元素 转化为 行内元素*/
            display: inline;

        }
        a{
            display:inline-block;
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        img{
            display: block;
            /*行内块应用中一般转化为块级元素*/
            width: 100px;
            height: 100px;

        }

    </style>
</head>
<body>
    <div>123</div> 块级元素
    <div>234</div>
    <a href="#">百度一下</a>  行内元素
    <img src="../images/小米1.jpg"alt="小米">  行内块状元素
</body>
</html>

 

3、浮动

浮动产生的效果

先来了解一下block元素和inline元素在文档流中的排列方式。

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

float属性值：
1、left：左浮动 左侧为起始，从左向右排列
2、right：右浮动  右侧为起始，从右向左排列
3、none ：不浮动，默认不浮动


浮动产生的影响
浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止

浮动的特性
文档流是：可见元素在文档中排列位置，元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

1.浮动会使元素脱离文档流
2.浮动会使元素提升层级
3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容 
4.浮动可以使行内元素支持宽高

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .wrap div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid black;
            float: left;
            /*float: none;*/
        }
    </style>
</head>
<body>
        <!--left 左浮动 左侧为起始。从左往右依次排列
            right 右浮动 右侧为起始。从右往左依次排列
            文档流:可见元素在文档中的显示位置
            浮动产生的效果
            浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
                   -->
    <div class="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>

</body>
</html>

 

 

浮动是css里面布局最多的一个属性

        效果： 两个元素并排了，并且两个元素都能够设置宽度和高度

        浮动想学好：一定要知道它的四个特性：
        1.浮动的元素脱标
        2.浮动的元素互相贴靠
        3.浮动的元素有“字围”效果
        4.收缩的效果

浮动的元素脱标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        /*脱标： 脱离了标准文档流
        小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。所以就渲染到了左上方。  浮动元素 “飘起来了”*/

        span{
            background-color: #2aabd2;
            width: 300px;
            height: 50px;
            float: left;
        }

        /*span标签不需要转成块级元素，也能够设置宽高。
        所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高*/
    </style>
</head>

<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

浮动元素互相贴靠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }
/*如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空格，那么就会靠着1哥，如果没有足够的空间靠着1哥，自己往边靠*/
    </style>

</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

浮动元素字围效果

所谓字围效果：
        当div浮动，p不浮动
        div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果

        关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则

        永远不是一个盒子单独浮动，要浮动就要一起浮动。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #dddddd;
        }

    </style>

</head>
<body>
    <div>
        <img src="./images/企业1.png" alt="">
    </div>
    <p>
        我们都可以从他们的例子中学习。如果你希望改变世界，你必须激起你的无畏。现在，
        如果你像我毕业那天一样，也许你并不感到无所畏惧。也许你正在考虑你希望得到的那份工作，或者想知道你要住到哪里，或者如何偿还学生贷款。
        这些，我都知道，它们是实实在在的忧虑。我也有这些忧虑，但不要让这些烦恼阻止你做出改变。
        无畏意味着要勇敢迈出第一步，即使你不知道它将你引至何处。这意味着被更高尚的目标所驱动，而不是掌声。无畏意味着当你远离人群、站在别处时，
        才会发现自己的特性，这将比你在众声喧哗中获得更多。
        如果你想加快速度，就要不惧怕失败；如果你想与他人互相倾听和交谈，就不要担心被拒绝；如果你举止得体，充满善意，即使没有人看到，你期待的一切也会来到。
        对你们来说，现在是时候在前进的道路上添砖加瓦了。也是时候，让我们所有人共同前进了。同时，未来该由你们带路了。
        谢谢你们，
        祝贺你们，2018届毕业生。
    </p>


</body>
</html>

浮动元素紧凑效果就是收缩

收缩：就是一个浮动元素。如果没有设置宽度width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

产生的浮动效果，为什么要清除浮动？

 浮动的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动特性</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .wrap div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box1{
            background-color: red;
            float: left;
        }
        .box2{
            background-color: yellow;
            margin-left: 20px;
        }                     黄色和绿色的盒子还保持div这个属性，它就会挤上去
        .box3{
            background-color: green;
        }
        .container{
            /*width: 300px;
            height: 300px;*/ 加上之前是在一行内排列，去掉之后它就不见了
            background-color: #E26F3A;
            float: left;
        }
        span{
            float: left;
            background-color: #EC00D8;
            width: 100px;
            height: 50px;
        }

    </style>
</head>
<body>
    <!-- 文档流： 可见元素在文档中的排列位置
        浮动效果 
        1.浮动可以使元素脱离文档流 ，不占位置
        2.浮动会使元素提升层级（红色的（加了floatd）比其他的层级高）
        3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容 (div块级元素，加了float后可以简单的认为可以把块级元素转换为行内块元素；)
        4.浮动可以使行内元素支持宽高 
     -->
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
        <div class="container">哈哈</div>
        <div class="container">哈哈</div>
        <span>爽歪歪</span>
</body>
</html>

浮动产生的问题和解决方法

　　父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度,那么此时父盒子没有高度了。如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。所以我们要解决浮动带来的页面布局错乱问题------清除浮动。

解决方法：

 1.给父元素固定高度。不灵活
 2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both    结构冗余
 3.常用方法：.wrap:after{
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
        }

4.给父盒子 添加overflow:hidden属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 1190px;
            /*height: 480px;*/ 通常页面布局的时候父盒子的高度不需要设置，通过子盒子来填充父盒子的高度；  第一种解决办法把它打开
            background-color: red;
            margin: 0 auto;
            overflow: hidden; 第4种解决方法
        }
        .wrap div{  
            float: left; 所有的div都给它设置成float，不占位置了就漂，绿色的遇到黄色的就停止了
        }
        .wrap_1{
            width: 220px;
            height: 480px;
            background-color: yellow;
        }
        .wrap_2{
            width: 700px;
            height: 480px;
            background-color: green;
            margin-left: 25px;
        }
        .wrap_3{
            width: 220px;
            height: 480px;
            background-color: blue;
            margin-left: 25px;
        }
        /*#clearfix {*/
            /*float: none;*/  第二种解决办法
            /*clear: both;*/
        /*}*/
        官方推荐解决办法，最常使用的解决办法；第3种解决办法
        .wrap:after{
            visibility: hidden;clear: both;display: block;content: ".";height: 0;
        }


    </style>

</head>
<body>
    <!-- 浮动产生的问题：
    父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度。因为子元素 不占位置
    解决办法
    1.给父盒子设置固定高度。不灵活
    2.给浮动元素最后一个加一个空的块级元素，且该元素不浮动，设置clear:both左右方向都不浮动
    结构冗余
    3..wrap:after{visibility:hidden;clear:both;display:block;content:".";height:0}  
    4.使用给父元素添加overflow:hidden
            3、4是比较常用的办法

     -->

    <div class="wrap">
        <div class="wrap_1"></div>
        <div class="wrap_2"></div>
        <div class="wrap_3"></div>
        <!--<div id="clearfix"></div>-->
    </div>

</body>
</html>

 

 清除浮动1：给父盒子设置高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        div{
            width: 400px;
            /*height: 40px;*/   /*可用在固定导航栏*/
        }
        /*只要是给子盒子li设置了浮动，变成了浮动元素，脱离了文档流，不在页面上占位置了就不会去填充父元素ul的高度，祖先盒子也没有高度；导致父盒子没有了高度，兄弟盒子就会占据到前面。
        给父盒子或者祖先盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，要求父盒子高度变大，而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/
        ul{
            list-style: none;
            /*height: 40px;*/
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div>
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="box"></div>
</body>
</html>

清除浮动2 clear both

  给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响。

内墙法 ，无缘无故加了div元素 结构冗余 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }

        div{
            width: 400px;
        
        }
        
        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    
    <div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="box">
        
    </div>
</body>
</html>
View Code

清除浮动3 伪元素清除法 （常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 400px;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        /*伪元素选择器*/
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;  /*必须要写这三句话*/
            height: 0;
            visibility: hidden;
        }
        /*
            新浪首页清除浮动伪元素方法
             content: ".";  加.会有一个默认的.；一定要结合content内容，.不写跟没有清除浮动一样
                display: block; 让它变成块状
                height: 0;  给它个高度0就不占据位置了
                clear: both;
                visibility: hidden   隐藏之后它还占据当前位置
            */

    </style>

</head>
<body>
    <div class="clearfix">
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="box"></div>
</body>
</html>

清除浮动4 overflow hidden（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除法（常用）</title>
    <style type="text/css">
        
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }
        .box{
            width: 400px;
            overflow: hidden;    
        }
        .box ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
        
        </ul>
        
    </div>
    <div class="box2">
        
    </div>
</body>
</html>

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            /*overflow: auto;*/
        }
        div{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            overflow: hidden;
        }
        /*overflow：visible;（默认值，内容不会被修剪，超出会出现在元素框之外；） 
                   hidden（内容会被修剪，且其余内容是不可见的）
                 scroll内容会被修剪，但浏览器会显示滚动条以便查看其余内容；
                  auto也会出现滚动条；inherit继承父级的overflow的属性*/
    </style>
</head>
<body>
    <div>
        我们都可以从他们的例子中学习。如果你希望改变世界，你必须激起你的无畏。现在，如果你像我毕业那天一样，也许你并不感到无所畏惧。
        也许你正在考虑你希望得到的那份工作，或者想知道你要住到哪里，或者如何偿还学生贷款。这些，我都知道，它们是实实在在的忧虑。我也有这些忧虑，但不要让这些烦恼阻止你做出改变。
        无畏意味着要勇敢迈出第一步，即使你不知道它将你引至何处。这意味着被更高尚的目标所驱动，而不是掌声。无畏意味着当你远离人群、站在别处时，才会发现自己的特性，
        这将比你在众声喧哗中获得更多。
    </div>
</body>
</html>

 

练习京东导航栏（用float）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;  清除它的默认样式
            margin: 0;
        }

        .wrap{
            width: 100%;
            margin: 0 auto;
            background-color: #EDF1EB;

        }
        .wrap .header{
            width: 1245px;
            height: 40px;
            margin: 0 auto;
            background-color:#DCDEDF;
        }
        .header_l,.header_r{
            float: left;
        }
        .header_l img{
            width: 20px;
            height: 20px;

        }
        .header_l span{
            color: #A0A2A2;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .header_l{
            margin: 5px 0px 0px 40px;
        }
        .header_r{
            width: 870px;
            margin-left: 250px;
            line-height: 40px;
        }
        .header_r ul li{  ul是默认有margin的，上下左右8
            list-style: none;


            float: left;
            padding: 0px 6px;  设置间距的
            height: 40px;
            line-height: 40px;
            margin-bottom: 30px;
        }
        .header_r ul li a{
            text-decoration: none;
            color: #A0A2A2
        }
        .header_r ul li a:hover{
            color: red;
        }
    </style>
</head>
<body>

    <!-- 最外层的父盒子 -->
    <div class="wrap">
        <!-- 导航 -->
        <div class="header">
            <div class="header_l">
                <img src="./images/logo.png" alt="一个logo">
                <span>北京</span>

            </div>
            <div class="header_r">
                <ul>
                    <li><a href="">你好,请登录&nbsp;<span>免费注册</span></a></li>
                    <li class="spacer"></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li> 
                    <li><a href="spacer">我的京东</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">京东会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">手机京东</a></li>
                </ul>
            </div>
        </div>

        <!-- 中心内容 -->

        <!-- 底部 -->


    </div>

</body>
</html>

 

标签
绝对定位
html代码
background
border
meta
padding
margin
css
display
css样式
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!