css盒模型

最新推荐文章于 2025-02-07 20:14:20 发布

cq_csdn_399

最新推荐文章于 2025-02-07 20:14:20 发布

阅读量96

点赞数

文章标签： css盒模型 BFC

本文链接：https://blog.youkuaiyun.com/qq_29738977/article/details/85047142

版权

一、标准模型
在这里插入图片描述
二、ie模型

三、css如何设置这两种模型
box-sizing：content-box 标准模型默认
box-sizing: border-box ie模型
四、js如何设置获取盒模型对应的宽和高
dom.style.width/height 只能取出内联样式
dom.currentStyle.width/height 取渲染后的宽高，只有ie支持。
Window.getComputedStyle(dom).width/height没有兼容性问题都能获得
dom.getBoundingClientRect().width/height 获取元素基于视窗的（左顶点）的绝对位置还有top和left属性。
四、BFC（Block formatting context）
概念:块级格式化上下文，一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
用途1：边距重叠解决方案(创建一个bfc)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    html * {
        padding:0;
        margin:0;
    }
    </style>
</head>
<body>
    <section class="sec">
    <style>
    .sec{
        background:red;
        overflow: hidden;
    }
    .sec p{
        background:yellow;
        margin:10px auto 30px
    }
    </style>
    <div style="overflow: hidden;">
       <p> p1</p>    
    </div>
       <p> p2</p>
       <p> p3</p>
       <p> p4</p>
       <p> p5</p>
    </section>
</body>
</html>

用途2：BFC不与float重叠解决方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    html * {
        padding:0;
        margin:0;
    }
    </style>
</head>
<body>
    <section class="sec">
    <style>
    .sec{
        background:red;
    }
    .sec .left{
        background:yellow;
        width:100px;
        float: left;
        height: 200px;
    }
     .sec .right{
        background:blue;
        height: 250px;
    }
    </style>
    <div class="left">
       left
    </div>
    <div style="overflow: auto;">
     <div class="right">
       right
    </div>
    </div>
    </section>
</body>
</html>

用途3：清除浮动解决方案

BFC原理
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5、计算BFC的高度时，浮动元素也参与计算

如何创建BFC
1、float值不为null
2、position的值不为static或inherit
3、display：table/table-cell/inline-block/able-caption/flex/inline-flex
4、overflow:不为visible