盒模型的属性丶display显示丶浮动

Posted 2021-01-07 qicun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型的属性丶display显示丶浮动相关的知识，希望对你有一定的参考价值。

一丶盒模型的属性(重要)

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>padding</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*上下左右*/
                padding: 10px;
                /*上下  左右*/
                padding: 20px 30px;
                /*上  左右  下*/
                padding: 20px 30px 40px;
                /*顺时针   上右下左*/
                padding: 20px 30px 40px 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>

padding

　　2.border

　　　　三要素: 线性的宽度线性的样式颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*根据方向来设置*/
                border-left: 5px solid green;
                border-right: 1px dotted yellow;
                border-top: 5px double purple;
                border-bottom: 1px dashed;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>

border

　　实例:制作三角形

　　transparent 透明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>制作三角形</title>
        <style type="text/css">
            div{
                width: 0;
                height: 0;
                border-bottom: 20px solid red;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                
            }
        </style>
        
    </head>
    <body>
        <div>
            
        </div>
    </body>
</html>

制作三角形

　　3.margin

　　　　前提:必须是在标准文档流下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <style>
            .s1{
                background-color: red;
                margin-right: 30px;
            }
            .s2{
                background-color: rgb(0,128,0);
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
        <span class="s1">alex</span><span class="s2">wusir</span>
    </body>
</html>

margin

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现‘塌陷问题‘

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin坑</title>
        <style>
            .s1{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-bottom: 40px;
            }
            .s2{
                width: 200px;
                height: 200px;
                background-color: green;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="s1"></div>
        <div class="s2"></div>
    </body>
</html>

margin(坑)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin父子盒子的坑</title>
        <style type="text/css">
            .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
            .child{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-left: 50px;
                margin-top: 50px;
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">
            </div>
        </div>
    </body>
</html>

margin父子盒子的坑

二丶display显示

　　前提;必须是在标准文档流下

　　块级元素和行内元素的相互转换:

　　　　块级元素可以转换为行内元素:

　　　　　　display:inline

　　　　　　此时这个div不能设置宽度丶高度;

　　　　　　此时这个div可以和别人并排了

　　　　行内元素转换为块级元素:

　　　　　　display:block

　　　　　　此时这个span能够设置宽高

　　　　　　此时这个span必须霸占一行了,别人无法和他并排

　　　　　　如果不设置宽度,将撑满父亲

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 1px solid yellow;
            }
            div a{
                display: block;
                width: 100px;
                height: 100px;
            }
            span{
                display: inline-block;
                width: 300px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
        <div class="box">wusir</div>
        
        <div>
            <a href="#">
                <img src="http://img07.tooopen.com/images/20170818/tooopen_sy_220999936848.jpg" alt="" width="300" height="300"/>
            </a>
        </div>
        
        <input type="text" /><br />
        <span>哈哈哈哈</span>
        <span>嘻嘻嘻嘻</span>
    </body>
</html>

display

三丶浮动

　　float : none 表示不浮动,默认

　　　　　 left:表示左浮动

　　　　　 right:表示右浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
        <div class="father2">
            
        </div>
    </body>
</html>

浮动

技术分享图片

　　我们该如何清除浮动呢?有以下几种方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
                height: 300px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
        <div class="father2">
            
        </div>
    </body>
</html>

固定高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
            .clearfix{
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <!-- 内墙法 -->
            <div class="clearfix"></div>
        </div>
        <div class="father2">
            
        </div>
    </body>
</html>

clearfix内墙法

　　　　 visibility:hidden; 设为隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素清除法</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
            
            .clearfix:after{
                content: ‘.‘;
                clear: both;
                display: block;
                visibility: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="father clearfix">
                <div class="box1">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>
                
            </div>
        </div>
        <div class="father2"></div>
    </body>
</html>

伪元素清除法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素清除法</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 500px;
                overflow: hidden;
            }
            .box1{
                width: 100px;
                height: 100px;
                background-color:red;
                float: left;
            }
            .box2{
                width: 100px;
                height: 300px;
                background-color:green;
                float: left;
            }
            .box3{
                width: 100px;
                height: 100px;
                background-color:blue;
                float: left;
            }
            .father2{
                width: 600px;
                height: 200px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="father">
                <div class="box1">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>
                
            </div>
        </div>
        <div class="father2"></div>
    </body>
</html>

overflow清除法

以上是关于盒模型的属性丶display显示丶浮动的主要内容，如果未能解决你的问题，请参考以下文章

盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要)

1.padding

padding是标准文档流,父子之间调整位置

2.border

三要素: 线性的宽度 线性的样式 颜色

solid 实线 dotted小圆点 double双实线 bottom虚线

实例:制作三角形

transparent 透明

3.margin

前提:必须是在标准文档流下

margin垂直方向上的坑:

margin的水平不会出现任何问题

垂直方向上 margin会出现‘塌陷问题‘

二丶display显示

前提;必须是在标准文档流下

块级元素和行内元素的相互转换:

块级元素可以转换为行内元素:

display:inline

此时这个div不能设置宽度丶高度;

此时这个div可以和别人并排了

行内元素转换为块级元素:

display:block

此时这个span能够设置宽高

此时这个span必须霸占一行了,别人无法和他并排

如果不设置宽度,将撑满父亲

三丶浮动

float : none 表示不浮动,默认

left:表示左浮动

right:表示右浮动

我们该如何清除浮动呢?有以下几种方法

visibility:hidden; 设为隐藏

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

　　2.border

　　　　三要素: 线性的宽度线性的样式颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

　　实例:制作三角形

　　transparent 透明

　　3.margin

　　　　前提:必须是在标准文档流下

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现‘塌陷问题‘

　　前提;必须是在标准文档流下

　　块级元素和行内元素的相互转换:

　　　　块级元素可以转换为行内元素:

　　　　　　display:inline

　　　　　　此时这个div不能设置宽度丶高度;

　　　　　　此时这个div可以和别人并排了

　　　　行内元素转换为块级元素:

　　　　　　display:block

　　　　　　此时这个span能够设置宽高

　　　　　　此时这个span必须霸占一行了,别人无法和他并排

　　　　　　如果不设置宽度,将撑满父亲

　　float : none 表示不浮动,默认

　　　　　 left:表示左浮动

　　　　　 right:表示右浮动

　　我们该如何清除浮动呢?有以下几种方法

　　　　 visibility:hidden; 设为隐藏