web前端之 CSS盒模型

女爷i 2023-05-29 05:14 75阅读 0赞

### CSS盒模型 ###

*  题目：谈谈你对CSS盒模型的认识
 *   *  基本概念：标准模型+IE模型
     *  这两者的区别（计算高度和宽度的不同）
     *  CSS如何设置这两种模型
     *  JS如何设置获取盒模型对应得高和宽
     *  实例题（根据盒模型解释边距重叠）
     *  BFC（边距重叠解决方案）：

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

## 基本概念：标准模型+IE模型 ##

盒模型包括margin、border、padding、content（由外向里）  
盒模型包括标准模型和IE模型  
如下图所示：（注意他们的高宽度包含的内容）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]

## 这两者的区别（计算高度和宽度的不同） ##

标准模型高度和宽度指的是content的高度和宽度  
IE模型高度和宽度指的是content+padding+border加起来的高度和宽度

## CSS如何设置这两种模型 ##

标准模型：box-sizing: content-box  
IE模型：box-sizing: border-box

## JS如何设置获取盒模型对应得高和宽 ##

（1）dom.style.width/heigt  
这种方式只能获取dom元素通过内联样式所得的高宽（dom元素设置元素一般有三种方式：网节点上内嵌<内联>；html中加style节点<内联>；link引外部的样式<外联>）  
（2）dom.currentStyle.width/height  
这种方式获取的是页面渲染之后即时运行的结果，也就是外联/内联都可以获取，相对来说比较准确；  
缺点：但是这种方式只有IE支持  
（3）window.getComputedStyle(dom).width/height  
原理与（2）相似，但是通用性更高，兼容性更好  
（4）dom.getBoundingClientRect().width/height  
根据dom元素在视窗中的绝对位置来获取高宽的  
（5）dom.offsetWidth/offsetHeight  
最常用的，也是兼容性最好的

## 实例题（根据盒模型解释边距重叠） ##

父子元素边界重叠（父元素没有设置边距，子元素设置了边距，那么父元素也有了边距）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]  
兄弟元素边界重叠（取两者之间的最大值作为边距）  
空元素的边距（margin-top/margin-bottom取一个最大值作为边距）

## BFC（边距重叠解决方案）： ##

1、BFC的基本概念  
边距重叠解决方案  
2、BFC的原理  
（1）内部的box会在垂直方向一个接着一个放置；  
（2）box垂直方向的边距由margin决定，属于同一个BFC的两个相邻box会发生重叠；  
（3）计算BFC的高度时，float浮动的高度宽度会被计算进去；  
（4）BFC区域不会与浮动区域发生重叠；  
（5）BFC区域的元素不会影响外面的元素，同样，外面的元素也不会影响BFC里面的元素  
3、如何创建BFC  
（1）float不为none（脱离文档流）；  
（2）position为fixed和absolute；  
（3）dislapy为inline-block,table-cell,table-caption,flex,inine-flex；  
（4）overflow不为visible  
（5）根元素  
4、BFC的使用场景  
（1）分栏布局时某一个分栏文字溢出覆盖了相邻分栏的部分（对应原理（4））  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]

效果图：  
（前）  
![在这里插入图片描述][20191104184314477.PNG]  
（后）  
![在这里插入图片描述][20191104184429615.PNG]  
（2）解决边距重叠问题（对应原理（1）原理（2））  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]  
（3）清除内部浮动（对应原理（3））  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 5]  
效果图：  
（前）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 6]  
（后）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104185434340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104185447418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104172702825.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104184143168.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[20191104184314477.PNG]: https://img-blog.csdnimg.cn/20191104184314477.PNG
[20191104184429615.PNG]: https://img-blog.csdnimg.cn/20191104184429615.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191104184640208.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191104184754887.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191104185249952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191104185409526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA==,size_16,color_FFFFFF,t_70