css 盒模型

最新推荐文章于 2024-06-22 17:15:40 发布

努力成为一个优秀的前端

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量140

点赞数 2

本文链接：https://blog.csdn.net/qq_40710228/article/details/102836083

版权

题目：你谈谈你对盒模型的认识

什么是盒模型？

css盒子模型又称框模型 (Box Model) ，它包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

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

1.1标准盒模型

元素框的总宽度 =元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度

元素框的总高度 =元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度

1.2.IE盒模型

元素框的总宽度 = 元素（element）的width + margin的左边距和右边距的值；

元素框的总高度 = 元素（element）的height + margin的上下边距的值；

`2. 他们之前的区别是什么`

实际元素计算的宽度和高度不同

标准盒模型

元素框的总宽度 =元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度

元素框的总高度 =元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度

IE盒模型

元素框的总宽度 = 元素（element）的width + margin的左边距和右边距的值；

元素框的总高度 = 元素（element）的height + margin的上下边距的值；

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

box-sizing : border-box (IE盒模型)

box-sizing:content-box(标准盒模型)

4.js如何设置盒模型的宽和高

这一个className 为 box的dom

样式为内部样式

1.dom.style.width/height

发现获取的宽度和高度都为空因为这种方式只能获取到内联样式里面的宽高

缺点：只能获取到内联样式里面的宽高

2.dom.currentStyle.widht/height

缺点：只支持IE浏览器兼容性差

3.window.getComputedStyle(dom).height/widht

优点：能获取到各种样式的宽高兼容性不错

4.dom.getBoundingClientReact().widht/height

当有10px的padding时

无padding

缺点：不能能准确获取到宽高

优点：能获取各种样式的的高度和宽度但是包括padding

5.根据盒模型解释边距重叠

<div class="container">
        <div class="box">

        </div>
        <div class="box2">

        </div>
    </div>

.container{
        background-color: red;
        height: 200px;;
        width: 200px;
    }
    .box{
        background-color: aqua;
        height: 100px;
        width: 100px;
        margin: 20px 20px;
    }
    .box2 {
        background-color: brown;
        height: 100px;
        width: 100px;
        margin: 20px 20px;
    }

样式图