当前位置：移动技术网 > IT编程>网页制作>CSS > 盒模型的属性丶display显示丶浮动

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

2018年09月21日 | 移动技术网IT编程 | 我要评论

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

　　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清除法

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

CSS3实现缺角矩形，折角矩形以及缺角边框

这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
详解CSS3新增的背景属性

CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性... [阅读全文]
css3 flex布局 justify-content:space-between 最后一行左对齐

这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学... [阅读全文]
详解如何使用CSS3中的结构伪类选择器和伪元素选择器

这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
CSS3 旋转立方体问题详解

这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
Grid 宫格常用布局的实现

这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
css3一个简易的 LED 数字时钟实现方法

这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着... [阅读全文]
2分钟教你实现环形/扇形菜单(基础版)

这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来... [阅读全文]
CSS3实现网站商品展示效果图

这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... [阅读全文]
如何用border-image实现文字气泡边框的示例代码

这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋... [阅读全文]

网友评论


验证码：

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

2018年09月21日 | 移动技术网IT编程 | 我要评论

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

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; 设为隐藏