前端面试 - CSS盒模型

最新推荐文章于 2024-11-10 22:45:39 发布

dicuo0992

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量118

点赞数

文章标签：前端面试 ViewUI

原文链接：http://www.cnblogs.com/iriswang/p/11081293.html

版权

一、知识点总结

二、CSS盒模型基础

标准模型和IE模型

标准模型和IE模型的区别

标准模型的宽度和高度只包括content，IE模型的宽度和高度包含了content、padding、boder。

CSS如何设置这两种模型：2种方式

使用CSS3的属性来区分两种模型。浏览器默认的方式是content-box。

1 box-sizing:content-box;/*标准模型*/
2 box-sizing:border-box;/*IE模型*/

JS如何设置获取盒模型对应的宽和高：4种方式

通过element.id获取一个dom节点，拿到style的宽和高

ps.css的三种方式：css内联；head写css；外联css样式表、link获取

该方式只能获取内联样式的宽和高

1 dom.style.width
2 dom.style.height

获取的是渲染以后的宽和高，可以获取所有css设置方式的宽和高；

缺点：但是只有IE支持

1 dom.currentStyle.width
2 dom.currentStyle.height

获取的是渲染以后的宽和高，可以获取所有css设置方式的宽和高；

与2对比：兼容Chrome和Firefox

window.getComputedStyle(dom).width

API用处：拿到元素真实的宽和高，也是即使运行完之后的结果。

API原理：计算元素的绝对位置，根据元素的左上角（左顶点）的。（视窗）可以拿到四个元素left、right、width、height。

dom.getBoundingClientRect().width

三、实例题：根据盒模型解释边距重叠

边距重叠的三种情况

1.父子元素边距重叠：如例子。

2.兄弟元素边距重叠：两个div挨着，上下边距，取两者之间最大值。

eg.本元素下边距为30px，兄弟元素上边距为5px，则合并为30px。

3.空元素的边距：如果设置了上边距margin-top或者下边距margin-button，取top或者button的最大值作为其边距。

题目：子元素高度是100px，子元素和父元素的上边距是10px，计算父元素的实际高度。

答案： 100或者110

1.section的高度为100

此时默认值overflow:visible，红色部分不显示，高度100。

此时：article的margin为10，section的margin为0。

2.section的高度为110

设置overflow:hidden后，section红色部分显示，高度110。

此时：article的margin为10，section的margin为0。但是子元素的margin值置入了父元素的content中，则其高度变化。

四、BFC（Block Formatting Context）

块级格式化上下文：它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

BFC目的：边距重叠解决方案

1.基本概念：

BFC基本概念：块级元素格式化上下文

AFC基本概念：内联元素格式化上下文

2.BFC原理：就是渲染规则

1）BFC这个元素的垂直方向的边距会发生重叠

2）BFC的区域不会与浮动float元素的box重叠。用于清除浮动布局

3）独立的容器。外面的元素不影响里面的元素、里面的元素不影响外面的元素

4）计算BFC高度的时候，浮动元素也会参与计算

3.如何创建BFC

1）float值不为none

因为css的float默认值为none

只要设置了浮动，则当前元素创建了BFC

2）position不为static、relative

position默认为static

3）display属性

inline-box、table-cell、table

block,list-item,tabel等

4）overflow不为visible

auto、hidden

设置为absolute、faced都是创建了BFC

BFC使用场景

1.解决边距问题

兄弟元素边距重叠，5和25合并之后，此时的margin都是25

通过overflow创建BFC后，边距合并失效

2.布局中BFC的应用：BFC不与float重叠

左边浮动高度100px、宽度100px；右边高度110px、宽度200px。

 1     <!--四、应用场景：1.布局中BFC的应用：BFC不与float重叠-->
 2     <section id="layout">
 3         <style media="screen">
 4             #layout{
 5                 background: red;
 6             }
 7             #layout .left{
 8                 /*左边为float*/
 9                 float:left;
10                 width: 100px;
11                 height: 100px;
12                 background: pink;
13             }
14             #layout .right{
15                 /*左边比右边高度少10px*/
16                 height: 110px;
17                 width: 200px;
18                 background: #ccc;
19                 /*overflow: auto;*/
20             }
21         </style>
22         <div class="left"></div>
23         <div class="right"></div>
24     </section>

结果右边会重叠到左边，也变成向左浮动，则右边fiv的左上角会被左边div遮挡。

解决方案：右边通过overfloat创建BFC，就不会出现重叠情况。

1             #layout .right{
2                 /*左边比右边高度少10px*/
3                 height: 110px;
4                 width: 200px;
5                 background: #ccc;
6                 overflow: auto;
7             }

原理：3）BFC的区域不会与浮动float元素重叠。用于清除浮动布局

3.清除浮动

子元素浮动，子元素高度为42。

父级元素的高度为0，背景颜色red不显示。

父元素的子元素为float时，高度计算时不会包含子元素。

 1     <!--应用：清除浮动-->
 2     <section id="float">
 3         <style>
 4             #float{
 5                 background: red;
 6             }
 7             #float .float{
 8                 float: left;
 9                 font-size: 30px;
10             }
11         </style>
12         <div class="float">我是浮动元素</div>
13     </section>

父元素为BFC时候，就算子元素为float，高度计算时就会包含子元素的高度。

 1     <!--四、应用场景：4.清除浮动：BFC子元素为float也参与高度计算-->
 2     <section id="float">
 3         <style>
 4             #float{
 5                 background: red;
 6                 /*方式一：float不为none，结果为图1，父元素的宽度和子元素一致*/
 7                 float: left;
 8                 /*方式二：overflow不为visible，结果为图2，父元素的宽度为自适应整行*/
 9                 overflow: auto;
10 
11             }
12             #float .float{
13                 float: left;
14                 font-size: 30px;
15             }
16         </style>
17         <div class="float">我是浮动元素</div>
18     </section>