6.10 盒子模型 课后练习

一、填空题

（1）盒子模型是众多模型的 _________________________________ 。

（2）盒子模型包括四大区域：_________________________________ 、 _________________________________ 、 _________________________________ 、 _________________________________。

（3）padding属性设置四个值时，分别对应的原子属性依次是：_________________________________ 、 _________________________________ 、 _________________________________ 、_________________________________ 。

（4）border属性对应3个原子属性：_________________________________ 、 _________________________________ 、 _________________________________ 。

（5）box-sizing属性默认值是 _________________________________ 。

（6）浏览器显示页面的6个步骤包括：_________________________________ 、 ________________________________ 、 _________________________________ 、 ___________ 、_________________________________ 、 _________________________________ 。

二、判断题

（1）开发者工具调试盒子时，在页面显示的宽度包含margin区宽度。 （ ）

（2）box-sizing属性默认值是border-box。 （ ）

（3）width属性表示内容区宽度。 （ ）

（4）子div宽度总是小于父div宽度。 （ ）

（5）margin: 0 auto;用于实现内部块容器在外部块容器的水平居中。 （ ）

（6）盒子的占据区域与显示区域总是一致的。 （ ）

三、选择题

（1）margin属性设置两个值时，第1个值表示的方向是（ ）

A. margin-top与margin-right B. margin-top与margin-bottom

C. margin-bottom与margin-right D. margin-left与margin-right

（2）盒子的哪个区域会影响到下一个盒子的位置？（ ）

A. margin区 B. border区

C. 显示区域 D. 占据区域

（3）关于匿名盒子，说法正确的有哪些？（ ）

A. 文本可能生成匿名的块盒子，或者匿名的行内盒子。

B. 匿名盒子无法通过选择器直接设置样式。

C. 匿名盒子会继承父元素的相应样式。

D. 伪元素不属于匿名盒子。

（4）inline盒子的哪些设置无效？（ ）

A. width B. margin-top

C. margin-right D. padding-top

四、简答题

（1）说明盒子模型与内部的规范规则。

（2）说明浏览器工作原理，包括说明绘制与渲染。

（3）说明CSS调试整体思路。