每日一道面试题 --- css 部分

第一题

行内(inline)元素 设置margin-top和margin-bottom 是否起作用？
答案：

1. 对于行内非替换元素，比如 span, margin-top 和 margin-bottom 是不起作用的，但是 margin-left , margin-right 是起作用的。
2. 对于行内替换元素，比如 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 的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。