CSS盒模型

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。

从以下方面理解盒模型

1. 基本概念：标准模型和IE模型
2. css如何设置这两种模型
3. js如何获取盒模型对应的宽和高
4. 边距重叠

1.基本概念

由里向外content,padding,border,margin.两种标准分别是标准模型和IE模型。

标准模型和IE模型的区别？

计算宽和高的方式不同，标准模型的宽高是内容区的宽高，IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

2.css如何设置这两种模型？ 默认的是什么？

使用CSS3 的属性box-sizing

/*标准模型 浏览器默认方式*/
box-sizing:content-box;

/* IE模型  若设置width=200其border=2px无padding内容区实际大小为 196px */
box-sizing:border-box;

3.js如何设置和获取盒模型对应的宽和高？

dom是getElementById拿到dom节点

1）这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

dom.style.width/height

2)这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式都能获取到。但这种方式只有IE浏览器支持。

dom.currentStyle.width/height

3)这种方式的原理和2)是一样的，这个可以兼容更多的浏览器，通用性好一些。

window.getComputedStyle(dom).width/height

4)这种方式是根据元素在视窗中的绝对位置来获取宽高的

dom.getBoundingClientRect().width/height

5)这个是最常用的，也是兼容最好的。

dom.offsetWidth/offsetHeight

4.边距重叠

1）什么是边距重叠

当两个垂直外边距相遇时，它们将形成一个外边距。例如：给两个相邻的div分别设置margin-bottom:20px和margin-top25px，然后你会发现两个div之间的间距不是45px，而是20px和25px中的较大值25px 这就是重叠了。

如下图，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生合并：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的顶和底边界也发生合并：

2）边距重叠解决方案(BFC-- Block Formatting Context )

BFC原理：

①.内部的box会在垂直方向，一个接一个的放置

②.每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）

③.box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

④.bfc的区域不会与浮动区域的box重叠

⑤.bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的

⑥.计算bfc高度的时候，浮动元素也会参与计算

3）如何创建BFC？

①.float属性不为none（脱离文档流）

②.position为absolute或fixed

③.display为inline-block,table-cell,table-caption,flex,inine-flex

④.overflow不为visible即overflow为hidden或auto

⑤根元素

    
    
    



    

        
上
        margin-bottom:30px;
    
    
    

        
中
        margin-top:30px;
        margin-bottom:30px;
    
    
    

        

            
下
            margin-top:30px;