CSS盒模型相关问题

最新推荐文章于 2022-11-01 16:41:33 发布

Imdadaer

最新推荐文章于 2022-11-01 16:41:33 发布

阅读量166

点赞数

分类专栏： CSS学习文章标签： CSS 盒模型前端

本文链接：https://blog.csdn.net/Imdadaer/article/details/84929823

版权

CSS学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文内容整理于慕课网视频教程

CSS盒模型相关问题

1. 基本概念：标准模型 + IE模型

2. 标准模型和IE模型的区别

3. CSS如何设置这两种模型

4. JS如何设置获取盒模型对应的宽和高

5. 实例题（根据盒模型解释边距重叠）

6. BFC（边距重叠解决方案）

具体说明：

1. 标准模型和IE模型：
本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）。

2. 区别：宽度的计算不同。
标准模型宽度仅是content部分的宽度，而IE模型的宽度指的是border+padding+content三个部分的宽度之和。

3.CSS如何设置这两种模型

标准模型CSS设置：box-sizing:content-box(浏览器默认值)；
IE模型CSS设置：box-sizing：border-box。

4. 四种方法获取盒模型的宽和高。

通过DOM的style属性：dom.style.width/height(仅能获取内联样式的宽和高)
通过DOM的currentStyel属性：currentStyle.width/height(获取的是渲染后的宽和高，但是仅IE支持)
通过DOM的getBoundingClientRect()方法：dom.getBoundingClientRect().width/height(适用场景：计算一个元素相对于视窗的绝对位置。拿到的是四个元素：left、top、width、height
通过window的getComputedStyle()方法：windo.getComputed(dom).width/height(通用性更好一些，支持Chrome/Firefox)

5. 实例题(根据盒模型解释边距重叠)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<section id="sec">
    <style media="screen">
        #sec {
            background: #ff0000;
            overflow: hidden;(加入这个属性，高度就从100px变为110px了)
        }
        .child {
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section>
</body>
</html>

6. BFC(边距重叠解决方案)

BFC基本概念：
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
BFC的原理（渲染规则）：
(1) 在BFC的一个元素垂直方向的边距不会发生重叠；
(2) BFC的一个元素不会与浮动元素的范围重叠；
(3) BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素，里面的也不影响外面的；
(4) 计算BFC父元素高度的时候，浮动子元素也会参与计算。
如何创建BFC？
(1)float的值不是none；
(2)position的值不是static或者relative；
(3)display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
(4)overflow的值不是visible。

BFC的使用场景
(1) 垂直方向上边距重叠问题；
解决方案：给子元素添加一个父元素并创建BFC。

<!--BFC垂直方向边距不会重叠-->
<section id="margin">
    <style>
        #margin {
            background: pink;
            overflow: hidden;
        }
        #margin>p {
            margin: 5px auto 25px;
            background: red;
        }
    </style>
    <p>1</p>
    <div style="overflow: hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

(2) 浮动元素重叠问题；
解决方案：给不想与浮动元素重叠的部分创建一个BFC。

<!--BFC不会与float重叠-->
<section id="layout">
    <style>
        #layout {
            background: red;
        }
        #layout .left {
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }
        #layout .right {
            height: 110px;
            background: #CCCCCC;
            overflow: auto; /*创建BFC*/
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

(3) 子元素浮动高度塌陷问题；
解决方案：给父元素创建BFC。

<!--子元素浮动时，父元素高度塌陷-->
<section id="float">
    <style>
        #float {
            background: red;
            overflow: hidden; /*创建BFC，清除浮动*/
        }
        #float .float {
            float: left;
            font-size: 30px;
        }
    </style>
    <div class="float">我是浮动元素</div>
</section>

Imdadaer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型相关问题

CSS盒模型相关问题1. 基本概念：标准模型 + IE模型2. 标准模型和IE模型的区别3. CSS如何设置这两种模型4. JS如何设置获取盒模型对应的宽和高5. 实例题（根据盒模型解释边距重叠）6. BFC（边距重叠解决方案）具体说明：1. 标准模型和IE模型：本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（pad...
复制链接

扫一扫