html dom渲染及基础知识

最新推荐文章于 2023-07-31 16:48:50 发布

stone_ui

最新推荐文章于 2023-07-31 16:48:50 发布

阅读量530

点赞数

分类专栏：渲染文章标签： html

本文链接：https://blog.csdn.net/stone_ui/article/details/105675431

版权

渲染专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css的两种盒模型
而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。

W3C的标准盒模型

è¿éåå¾çæè¿°
在标准的盒子模型中，width指content部分的宽度

IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

è¿éåå¾çæè¿°

我们可以看出我们上面的使用的默认正是W3C标准盒模型
而这里盒模型的选取更倾向于项目和开发者的习惯，并没有绝对的好坏之分。

box-sizing的使用
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

塌陷

<style>
*{
    margin:0;
    padding:0;
}
.box1{
    width:200px;
    height:200px;
    background: yellowgreen;
    margin-bottom: 50px;
}
.box2{
    width:200px;
    height:200px;
    background: gray;
    margin-top: 40px;
}
</style>

两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。

/*CSS部分*/
<style>
.box1{
    width:400px;
    height:400px;
    background: pink;
}
.box2{
    width:200px;
    height:200px;
    background: lightblue;
}
</style>
/*HTML部分*/
<body>
    <divclass="box1">
    <divclass="box2"></div>
</div>
</body>

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。

生成的BFC的元素

1.根元素

2.float属性部位none

3.position为absolute或fixed

4.display为table-cell，table-caption，flex，inline-flex

5.overflow不为visible

防止内容塌陷

2.清除浮动

示例代码：

.par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

效果图：

BFC计算高度时，浮动元素也会参与计算，触发par生成BFC

.par {
        border: 5px solid #fcc;
        width: 300px;
       overflow: hidden;
    }

3.防止垂直margin重叠

示例代码：

p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <p>Haha</p>
    <p>Hehe</p>

两个p标签是同一个BFC的内部box，内部相邻的box的margin发生重叠，效果：

将p包裹一个容器，生成一个BFC，两个p就不在同一个BFC中，就不会发生折叠

.wrap{
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <div class='wrap'>
        <p>Haha</p>
    </div>
    <p>Hehe</p>