CSS3之盒模型

最新推荐文章于 2023-06-21 15:47:00 发布

笑笑书生

最新推荐文章于 2023-06-21 15:47:00 发布

阅读量233

点赞数

分类专栏： CSS 学习日记

本文链接：https://blog.youkuaiyun.com/qzt1204/article/details/80658436

版权

学习日记同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

最近小编在面试的过程中，经常会遇到面试官问什么是盒模型，这种问题看似简单，真正回答起来却让人感觉有一种说不清道不明的感觉，反正我就是知道是啥，死活说不清，所以小编回来查阅了一些资料，来做一个简单的解释，仅供参考：

盒模型

1. 标准盒模型

这种模型简单的来说，就是他的宽度width不包括padding 以及 border，所以在我们设置的width也就等于content的宽度

2. IE模型（怪异盒模型）

这种模型与上面的模型相比之下，唯一的区别就是他的宽度width,此处所设置的width=content+padding+border；

如何去设置这两种模型呢：

那么这里就是用了CSS3 里的一个属性box-sizing:

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

说说题外话，我们在平时进行CSS布局的时候，常常可能会遇到margin 重叠，真实反应到DOM上的时候，取其中最大的margin 而不是两个margin 进行叠加，那么对于这种情况，我们可以如何解决呢？

利用BFC对边距重叠的解决方案

原理：

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

怎么取创建bfc

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

应用场景

自适应两栏布局
清除内部浮动
防止垂直margin重叠

看一个垂直margin重叠例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

</body>
</html>

效果如下：

使用BFC解决重叠，代码如下：

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>

    <!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
    <div style="overflow:hidden">
        <section class="bottom">
            <h1>下</h1>
            margin-top:50px;
        </section>
    </div>

效果如下