浅谈CSS中盒实体模型的了解

2021-01-20 17:47 jianzhan

今日忽然看到1篇有关CSS中盒实体模型的文章内容,突然感觉自身居然忘却了许多小的地区,因此写1篇文章内容来记忆力1下

( 摘抄于千与千寻写的CSS盒子实体模型了解,并在自身基本上加上了1些物品,期待更健全,对大伙儿有协助 )

1.基础的盒实体模型专业知识

CSS css盒子实体模型 又称框实体模型 (Box Model) ,包括了元素內容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

以便便捷大伙儿了解和尝试,我写了1个小Demo放上来便捷大伙儿尝试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 显示信息盒实体模型   */
        /* 盒实体模型测算标准
        元素框的总宽度 = 元素(element)的width + padding的左侧距和右侧距的值 + margin的左侧距和右侧距的值 + border的上下宽度;
        元素框的总高宽比 = 元素(element)的height + padding的左右边距的值 + margin的左右边距的值 + border的左右宽度。
        元素的总宽度 = 元素(element)的width + padding的左侧距和右侧距的值 + border的上下宽度;
        元素的总高宽比 = 元素(element)的height + padding的左右边距的值 + border的左右宽度。
        */
    .box{
        /* 高宽比和宽度 */
        height: 100px;
        width: 100px;
        background-color: yellow;
        /* 边框的宽度 */
        border: 10px solid green;
        /* 内边距 */
        padding: 10px;
        /* 外边距*/
        margin: 100px;
    }
    /* 此处引进子div只是以便显示信息content的地区 */
    .child{
        height: 100%;
        width: 100%;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

运作結果以下图:

大伙儿能够尝试变更1下在其中的高宽比宽度,内边距外边距的值来更为直观的体会盒实体模型

2.盒实体模型的合拼

当两个盒实体模型开展合拼时,必须留意1下:

当两个左右方位邻近的元素框竖直相遇时,外边距汇合并,合拼后的外边距的高宽比等于两个产生合拼的外边距中较高的那个边距值 ,如图:

自然外边距合拼实际上也是有存在的实际意义,以下图:

非常留意: 仅有一般文本文档流中块框的竖直外边距才会产生外边距合拼。行内框、波动框或肯定精准定位之间的外边距不容易合拼。

3.box-sizing特性详细介绍

box-sizing特性是客户页面特性里的1种,之因此详细介绍它,是由于这个特性跟盒子实体模型相关,并且在css reset中有将会会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认设置值,可使设定的宽度和高宽比值运用到元素的內容框。盒子的width只包括內容。

即大家所说的规范盒实体模型

总宽度=margin+border+padding+width

(2) border-box , 设定的width值实际上是除margin外的border+padding+element的总宽度。盒子的width包括border+padding+內容

即大家所说的奇异盒实体模型

总宽度=margin+width

许多CSS架构,都会对盒子实体模型的测算方式开展简化。

(3) inherit , 要求应从父元素承继 box-sizing 特性的值

有关border-box的应用:

1 1个box宽度为100%,又要想两侧有内间隔,这时候候用就较为好

2 全局性设定 border-box 很好,最先它合乎判断力,其次它能够省去1次又1次的加加减减,它也有1个重要功效——让有边框的盒子一切正常应用百分比宽度。

4.具体开发设计中常遇到的难题

margin越界(第1个子元素的margin-top和最终1个子元素的margin-bottom的越界难题)

以第1个子元素的margin-top 为例:

当父元素沒有边框border时,设定第1个子元素的margin-top值的情况下,会出現margin-top值加在父元素上的状况,处理方式有4个:

(1)给父元素加边框border (不良反应)

(2)给父元素设定padding值  (不良反应)

(3)父元素加上 overflow:hidden (不良反应)

(4)父元素加外置內容转化成。(强烈推荐)

以第4种方式为例:

.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}
.parent : before {
     content : " ";
     display : table;
}

.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}
<div class="parent">
    <div class="child"></div> 
</div>

好啦,现阶段就这些,以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。