【编程】编写 div 块级元素，设置背景颜色为红色，使用绝对定位设置，并设置 div 距离左侧50%的距离。 【编程】编写 div 块级元素，设置 div 中包含图片的大小，无法显示出的设置滚动条进行显示（使用 overflow 设置滚动条）。  【阅读】关于下列代码显示的效果为（） ``` <style> div { width: 200px; height: 200px; border-bottom: solid; } </style> <div>This is some text in a pargraph.</div> ``` 【选择】关于盒子模型下列说法错误的是（）（选择二项） ``` A. 盒子边框与内容之间的距离被称为内边距（padding） B. 盒子与盒子之间的距离被称为内边距（margin） C. 盒子里面装的东西被称为内容（content） D. 每个盒子都有自己的边框，称为（border） E. 盒子的宽和高指的是盒子本身的宽和高 ``` 【选择】关于哪项不是盒子模型中有的属性（）（选择一项） ``` A. 内边距（padding） B. 外边距（margin） C. 内容（content） D. 边框（border） E. 背景颜色（background） ``` 【编程】在不更改蓝色区域大小的情况下，将黄色区域设置为水平垂直居中。  ``` <style> .content { width: 800px; height: 400px; background-color: skyblue; } .top { width: 400px; height: 200px; background-color: yellow; } </style> <div class="content"> <div class="top"></div> </div> ``` 【编程】编写代码完成以下效果图  ``` <style> * { padding: 0; margin: 0; } ul { list-style: none; width: 300px; height: 400px; background-color: pink; padding-top: 40px; } li { width: 200px; height: 50px; background-color: yellow; /* 样式补充... */ margin-left: 40px; margin-top: 40px; } </style> ``` 【选择】关于下列行级元素不正确的是（）（选择一项） ``` A. img B.li C. label D. <br> ``` 【选择】下列选项中哪个不是float的属性值（）（选择一项） ``` A. auto B. left C. right D. none ``` 【选择】如下图所示，两个 div 方块放置到一行（要求可视范围内，不重合），应该怎么做（）（选择一项）  ``` A. 给红色方块添加 float: left; 蓝色方块不加 B. 给蓝色方块添加 float: left; 红色方块不加 C. 给两个 div 都添加 float: left; 属性 D. 给红色的方块 padding-left: -500px; ``` 【编程】补全下面代码，得到以下效果。  ``` <style> .div1 { width: 100px; height: 100px; background: red; /* 此处写代码 */ } .div2 { width: 300px; height: 300px; background: blue; /* 此处写代码 */ } .div3 { width: 100px; height: 100px; background: green; /* 此处写代码 */ float: inherit; } </style> <div class="div1"></div> <div class="div2"> <div class="div3"></div> </div> ``` 【编程】利用浮动来实现图文混排的效果如下图所示：  【选择】如果网页中某个元素内具有多个带有浮动属性的子元素，使得父元素发生塌陷，下列方法中不能解决父元素塌陷问题的是？（选择一项） ``` A. 给父元素添加 clear: left; B. 给父元素添加高度 C. 在有浮动元素的最后添加一个带有 clear: both; 属性的元素 D. 给父元素添加 overflow: hidden; 和 zoom:1; ``` 【选择】下列哪些参数不是 clear 属性可用的参数（）（选择一项） ``` A. clear: left; B. clear: right; C. clear: block; D. clear: inherit; ``` 【编程】如下图所示，父元素中有两个红色的方框子元素，由于浮动的原因使得父元素出现了高度塌陷的问题，父元素变成了一条直线。清除浮动的方式有很多，请运用清除浮动的方式使父元素能够包住子元素。  ``` <style> .per { width: 300px; height: auto; border: 2px solid #aaa; } .li { width: 100px; height: 100px; background: red; margin: 5px; float: left; } /* 此处写代码 */ </style> <div class="per"> <div class="li"></div> <div class="li"></div> <!-- 此处写代码 --> </div> ``` 【选择】关于relative, 说法错误的是？（选择一项） ``` A. 可以通过 top/right/bottom/left 移动元素的位置。 B. 设置相对定位的元素会脱离文档流 C. relative 可以和浮动一起使用 D. 设置相对定位的元素，子元素设置绝对定位会参照它进行位置偏移。 ``` 【编程】编写代码，使得蓝色区块覆盖红色区块并且蓝色区块分别距离顶部和左边50px。 效果图如下：  【选择】如下列代码所示，运行结果中，名为son的div在页面的什么位置？（选择一项） ``` <style> .per { width: 300px; height: 300px; background: red; margin-left: 200px; margin-top: 200px; } .son { width: 100px; height: 100px; background: blue; position: absolute; left: 0px; top: 0px; } </style> <div class="per"> <div class="son"></div> </div> ``` ``` A. son 在网页的左上角 B. son 在父元素的左上角 C. son 在父元素的右下角 D. son 在网页的右下角 ``` 【编程】运用绝对定位的知识完成，使div距离网页右边为200像素，距离底边为100像素 。 【编程】运用绝对定位的知识完成，使得蓝色方块位于红色方块的正中心。  【阅读】关于下列代码说法正确的是（）（选择一项） ``` <style> div { text-align: center; font-size: 40px; line-height: 100px; margin: 10px; width: 100px; height: 100px; float: left; color: yellow; background-color: red; } </style> <div>1</div> <div>2</div> ``` 【选择】如下代码，运行后蓝色区块的显示位置为（）（选择一项） ``` <style> .per { width: 300px; height: 300px; background: red; position: absolute; left: 100px; top: 100px; } .son { width: 100px; height: 100px; background: blue; position: fixed; right: 0px; bottom: 0px; } </style> <div class="per"> <div class="son"></div> </div> ``` ``` A. 出现在红色区块的左上角 B. 出现在网页右下角 C. 出现在红色区块的右下角 D. 出现在网页左上角 ``` 【编程】利用固定定位，无论页面怎么滚动，红色的div块都固定在页面的最上面，并且水平居中显示。