盒模型以及清除浮动 041

最新推荐文章于 2025-06-02 18:54:39 发布

原创最新推荐文章于 2025-06-02 18:54:39 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析盒模型的属性及计算方式，展示如何利用CSS属性绘制圆形和三角形。同时，探讨了margin和padding的区别，margin塌陷问题及解决方案，以及浮动的四大特性与清除浮动的方法。

盒模型以及清除浮动 041

盒模型 : box model 网页中都会显示一些方方正正的盒子称这种盒子叫盒模型

　　盒模型属性:

　　　　width : 内容的宽度

　　　　height: 内容的高度

　　　　border 边框

　　　　盒模型的计算 : 先不管margin

　　　　　　盒子的真实宽度 = width + 2*padding + 2*border

　　　　　　盒子的真实高度 = height + 2*padding + 2*border

　　如果要保证盒子的原来尺寸加padding就要减去width 减padding就要加width border也一样.

　　利用border属性画一个圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: darkgoldenrod;
            /*border: 1px solid darkred;*/

            /*根据方向来设置属性*/
            /*border-left: 1px solid darkred;*/
            /*border-right: 5px dotted darkgoldenrod;*/
            /*border-top: 10px double darkblue;*/
            /*border-bottom: 1px solid greenyellow;*/
            /*根据三要素*/
            /*border-width: 5px 10px 1px;*/
            /*border-style: solid double dashed;*/
            /*border-color: red yellow darkcyan darkgray;*/
            /*border: 0;*/
            border-radius: 50%; //边框的弧度 成圆的关键
        }
    </style>
</head>
<body>
<!--三要素  粗细  线性样式 颜色-->
    <div class="box"></div>
</body>
</html>

造一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--利用边框的宽度挤压出来三角形-->
        .sanjiao{
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-bottom: 50px solid green;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="sanjiao"></div>
</body>
</html>

padding 和margin的使用 padding 没有问题可以正常使用但是margin在垂直方向上就会出现塌陷问题即给两个标准流下的盒子设置垂直方向上的margin时, 比如上边的盒子设置margin-bottom : 20px; 下边的盒子设置 margin-top : 50px; 结果两个盒子之间的距离仅为50px 不是70px 称这种现象叫做塌陷没法解决称这种技巧为'奇技淫巧' 解决方案设置浮动

　　margin : 0 auto; 使盒子居中

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;
        }

　　使用margin: 0 auto 注意事项

　　　　1 . 水平居中盒子必须有width 要有明确的width 即不是100% 有具体数量

　　　　2 .只有标准流下的盒子才能使用

　　　　3 .是居中盒子不是居中文本文本居中使用的是text-align:center;

　　margin 描述的是兄弟盒子之间的关系而padding 描述的是父子盒子之间的关系

　　要善于使用父亲的padding 而不是margin

版心设置 : 即让文本在盒子的中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 14px;
            color: #fff;
        }
        a{
            text-decoration: none;
        }

        #top {
            width: 100%;
            background-color: #000;
            height: 40px;
            line-height: 40px;
        }
        .container{
            width: 1226px;
            /*background-color: red;*/
            /*让盒子居中*/
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            margin: 0 auto;
        }
        #top  a{
            font-size: 12px;
            color: #b0b0b0;
        }
        #top  a:hover{
            color: #fff;
        }

    </style>
</head>
<body>
<div id="top">
    <div class="container">
        <div class="top-l">
            <!--div标签是块级标签 独占一行,span是行内标签 一行内显示-->
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="https://iot.mi.com/index.html" target="_self">loT</a>
            <span class="sep">|</span>
        </div>
    </div>
</div>

<div>
    <div class="container"></div>
</div>
</body>
</html>

标准文档流 : 即从上而下从左到右进行排布

　　微观现象有 : 空白折叠现象 :多个空格会被合并成一个空格现在世道浏览器页面中即空白折叠现象

　　　　　　　　高矮不齐底边对齐:即文字和图片并排高度不一样但是底边对齐

　　　　　　　　自动换行 : 一行盛不下换行写

浮动 : 是css里面布局最多的一个属性也是很重要的一个属性

　　四大特征 :

　　　　浮动的元素脱标

　　　　浮动的元素互相贴靠

　　　　浮动的元素有字围的效果

　　　　收缩的效果

　　脱标即脱标准离文档流. 其不在页面中占位置相当于'飘起来了' 所有标签一旦设置浮动就能并排且都不区分行内块状元素都能设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: red;
            float: left;
            width: 400px;
            height: 50px;
            padding-top: 50px;

        }
        span{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">alex</div>
    <span>alex</span>
    <!--<div>此时这个span能够设置宽度、高度</div>-->

</body>
</html>

View Code

　　互相贴靠 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            /*width: 500px;*/
            /*height: 500px;*/
            /*border: 1px solid darkred;*/
        }
        .box{
            width: 200px;
            height: 600px;
            background-color: red;
            float: left;
        }
        .wrap{
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
        .box2{
            width: 200px;
            height: 500px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box2"></div>
         <div class="wrap"></div>
    </div>
</body>
</html>

View Code

　　　　效果发现：

　　　　　　如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
　　　　　　如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

　　字围效果:

.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;
        }


<div>
        <img src="./images/企业1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>

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

　　紧凑效果: 一个浮动元素如果没有设置width 则自动收缩为文字的宽度.

　　谨记：关于浮动，我们一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

清除浮动

　　如果不给父盒子设置一个高度那么浮动的子元素不会填充父盒子的高度因为其脱离了标准文档流虽然可以实现元素并排的效果但是还带来了页面布局的极大错乱所以要清除浮动

　　方法 : 1 给父盒子设置高度 2 .clear :both 3 伪元素清除法 4 overflow : hidden

　　第一种不灵活使用场景导航栏

　　第二种给浮动元素最后面加一个空的div 并且该元素不浮动，然后设置clear:both 清除别人对我的浮动影响内墙法但是其无缘无故加了div元素结构冗余用的也少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*1.给父盒子设置高度*/
            /*height: 40px;*/


        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
<div class="top">
    <!--<span>alex</span>-->
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
</div>
<div class="header">
    <span>alex</span>
</div>
</body>
</html>

伪元素选择器:

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与布局有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

　　第三种用得比较多给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;



        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            display: block;
            /*隐藏  元素不占位置*/
            /*display: none;*/
            /*隐藏 占位置*/
            visibility: hidden;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>
<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="header"></div>

</body>
</html>

　　overflow : hidden:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*BFC*/
            /*但是不要忘了它本来的一层的意思*/
            overflow: hidden;



        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="header"></div>

</body>
</html>

overflow : 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow：hidden清除法。

其实它是一个BFC区域: https://blog.youkuaiyun.com/riddle1981/article/details/52126522