zoukankan      html  css  js  c++  java

  • 盒模型的属性丶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清除法
  • 相关阅读:
    qq划屏幕红包程序
    【图文教程】小米4如何获取触动精灵悬浮窗权限
    //6小时更新一次首页
    USBWebServer 中文便携版 快速搭建 PHP/MySQL 网站服务器环境
    【jquery】Validform，一款不错的 jquery 表单验证插件
    【html】关于锚点的一些事
    【css】关于 hr 在各浏览器中的问题
    【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
    【jquery】ajax 请求成功后新开窗口被拦截解决方法
    【html5】html5 本地存储
  • 原文地址：https://www.cnblogs.com/qicun/p/9675615.html
Copyright © 2011-2022 走看看