第一题
行内(inline)元素 设置margin-top和margin-bottom 是否起作用?
答案:
- 对于行内非替换元素,比如 span, margin-top 和 margin-bottom 是不起作用的,但是 margin-left , margin-right 是起作用的。
- 对于行内替换元素,比如 img 和 input ,外边距上下左右都会起作用。
解析:
html 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
- 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。
html 代码
<p>
<span >我是行内非替换元素span,margin-top,margin-bottom对我没用</span>
</p>
<br>
<p>
<img class="img1"src="" alt="我是行内替换元素,我设置了margin-top" >
</p>
<br>
<p>
<img class="img2"src="" alt="我是行内替换元素,我设置了margin-bottom">
</p>
css 样式
p {
background: gray;
}
p span {
background:#ccc;
color:red;
margin: 200px 0;
}
p img {
width:100px;
height:100px;
}
p img.img1 {
margin-top: -20px;
}
p img.img2 {
margin-bottom: 20px;
}
结果
第二题
Q:设置p的font-size:10rem,当用户重置或拖曳浏览器窗口时,文本大小是否会也随着变化?
A::不会。
解析:rem是以 html 根元素中 font-size 的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。