一、单项选择题4. 执行下面的代码后,span元素的宽度是______
span {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
height: 50px;
padding: 10px;
}
- A.120px
- B.100px
- C.60px
- D.由内容决定
A B C D
A
[考点] CSS属性 浮动和定位
[解析] 绝对定位(absolute)会使元素脱离正常流,并且会将元素变为块级元素。由于块级元素默认都是W3C盒模型,因此如果元素有内边距(padding)或边框(border),那么在计算宽度时还要包含这两个属性值,由此得出span元素的宽度是120px。
5. 假设有一个宽和高都是100px的div元素,它有两个子元素section,宽和高都是50px。第一个设为绝对定位,第二个设为固定定位,代码如下所示。当两个元素都偏移到了父元素的外面,并且父元素设置了溢出内容会被裁剪时,第一个section元素会______,第二个section元素会______
<style>
.container {
position: relative;
overflow: hidden;
}
.absolute {
position: absolute;
left: 120px;
top: 10px;
}
.fixed {
position: fixed;
left: 10px;
top: 120px;
}
</style>
<div class="container">
<section class="absolute">absolute</section>
<section class="fixed">fixed</section>
</div>
- A.裁剪 显示
- B.裁剪 裁剪
- C.显示 显示
- D.显示 裁剪
A B C D
A
[考点] CSS属性 浮动和定位
[解析] 为父元素设置溢出内容裁剪后,固定定位的元素仍然会显示,但换成绝对定位,就会被裁剪。第一个section元素被设为绝对定位,第二个section元素被设为固定定位,因此,选项A正确。
6. 假设4个section元素处于相同的层叠上下文中,并且都被设为绝对定位,然后分别给4个section元素定义z-index属性,代码如下所示。叠放在最上面的背景色是______
.zindex1 {
background: blue;
z-index: auto;
}
.zindex2 {
background: red;
z-index:-1;
}
.zindex3 {
background: black;
z-index: 0;
}
.zindex4 {
background: yellow;
z-index: 1;
}
- A.blue
- B.red
- C.black
- D.yellow
A B C D
D
[考点] CSS属性 浮动和定位
[解析] CSS属性z-index用于改变元素的层叠顺序,属性值是一个无单位的数字(包括正数和负数)或auto(auto相当于0)。当元素处在相同的层叠上下文中时,z-index属性的值越大越不容易被覆盖。由于选项D中的数字最大,所以叠放在最上面的背景色是yellow,正确答案是D。
三、简答题1. 在CSS中使用background:transparent与opacity:0有什么区别?
transparent关键字相当于rgba(0,0,0,0),作为background的属性值,它仅仅是将元素的背景设为透明,而元素中的内容还能显示。opacity会把元素和内容当成一个整体,当定义为0时,两者都会透明。
[考点] 值和单位
2. 请说说你对元素浮动(float)的理解。
浮动(float)最初仅仅是为了让内容环绕在浮动元素周围,后来利用它的特点逐渐将其用于布局。浮动元素让布局多样化,但它会脱离正常流,造成一些副作用(如高度塌陷),如果不加以解决,那么会直接影响整体布局。浮动有3个关键字可以选择,left为向左浮动,right为向右浮动,none为不浮动。
[考点] CSS属性 浮动和定位
3. 执行下面的代码,效果如下图所示,虽然给p元素定义了15px的上外边距,但为何失效了?
<style>
div {
float: left;
width; 80px;
height: 80px;
background: #FFCC00;
}
p{
clear: both;
margin-top: 15px;
}
</style>
<section>
<div></div>
<p>已设置上外边距</p>
</section>
上外边距失效
浮动元素会脱离正常流,clear属性会让元素增加上外边距,使其在浮动元素的下面。在上面的代码中,浮动元素的高是80px,所以clear属性会给p元素增加80px的上外边距,比定义的15px要大,因此最终的上外边距是80px,正好在浮动元素的下面。
[考点] CSS属性 浮动和定位
4. 绝对定位(absolute)和浮动(float)有哪些异同?
绝对定位和浮动都会使元素脱离正常流,改变元素盒类型,将元素变为块级元素,同时都能创建BFC。两者的不同点包括对包含块的定义、对兄弟元素的影响、可摆放的位置以及能否设置z-index的值,如下表所列。
绝对定位和浮动的对比
|
不同点
|
绝对定位
|
浮动
|
包含块
|
离它最近的position属性不为static的祖先元素的内 容区域
|
离它最近的块级祖先元素的内容区域
|
兄弟元素的 影响
|
原先所占的空间会被删除,不会影响兄弟元素
|
影响兄弟元素的位置或样式
|
摆放位置
|
可摆放在任意位置
|
不能超出包含块的内容区域,并且向上浮动也会 受限制
|
z-index
|
可设为任意的整数或auto
|
无法设置z-index属性,默认的值为0
|
[考点] CSS属性 浮动和定位
5. 如何用纯CSS的方式让超出容器宽度的文本自动替换为省略号?
可以使用text-overflow属性,这个属性用于显示内容溢出时的省略标记,例如当内容太多时,将超出部分替换为省略号(...)。但要实现这个效果,需要先满足3个条件,那就是容器要有明确的宽度、强制在一行显示以及隐藏溢出内容,代码如下所示。
p{
width: 200px; /*容器宽度*/
white-space: nowrap; /*强制在一行*/
overflow: hidden; /*隐藏溢出*/
}
把text-overflow设为ellipsis后(代码如下所示),就能将溢出内容替换为省略号,结合上面的3个条件就能实现题中要求的效果。
.overflow-ellipsis {
text-overflow: ellipsis;
}
[考点] CSS属性 文本和字体