今日面试三题

今日面试三题

1.下面关于CSS布局的描述，不正确的是？

A. 块级元素实际占用的宽度与它的 width 属性有关；
B.块级元素实际占用的宽度与它的 border 属性有关；
C.块级元素实际占用的宽度与它的 padding 属性有关；
D.块级元素实际占用的宽度与它的 background 属性有关.

正确答案:D

解析：

• witdh:宽度
• border：边框
• padding：内边距
• background：背景

在标准盒子模型下，块级元素的总宽度=左右padding+左右border+内容区的width，我们实际设置的width指的就是内容区的width，所以当改变padding、border、width中的任一项的时候，块元素的总宽度都会发生变化。而background只是对块级元素的背景做修饰，并不能改变大小

2.下面哪个属性不会让 div 脱离文档流（normal flow）？

A.position: absolute;
B.position: fixed;
C.position: relative;
D.float: left;

正确答案:C

解析：
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走 。

• position: absolute;
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
• position: fixed;
  生成绝对定位的元素，相对于浏览器窗口进行定位
• position: relative;
  生成相对定位的元素，相对于其正常位置进行定位
• float: left;
  浮动

综上，选择C选项

以下代码，分别给节点 #box 增加如下样式，问节点 #box 距离 body 的上边距是多少？

< body style=”margin:0;padding:0”>

< div id=”box” style=”top:10px;margin:20px 10px;”>

< /div>

< /body>

1.如果设置 position: static ; 则上边距为___px

2.如果设置 position: relative ; 则上边距为___px

3.如果设置 position: absolute ; 则上边距为___px

4.如果设置 position: sticky ; 则滚动起来上边距为___px

正确答案：
（1）20
（2）30
（3）30
（4）10

解析：

• position: static，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性，只有margin:20px 10px好使，margin-top为20px,所以上边距为20px
• position: relative ; 元素设置相对于原本位置的定位,margin-top的20px加上top的10ox为30px
• position: absolute 同上，只不过这个定位是脱离文档流的
• position: sticky 元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，top值生效