css练习2

一、  选择题

1.  下列哪些CSS属性可以被子元素继承？A

A.  color B. border C. margin D. padding

只有以color/font-/text-/line-开头的属性才可以继承

2.  下列哪个不是可以继承的属性？D

A.  font-size B. text-decoration C. font-weight D. border-width

只有以color/font-/text-/line-开头的属性才可以继承

3.  在CSS中，以下哪个属性用于控制文本的行间距？C

A.  letter-spacing B. word-spacing C. line-height D. text-align

4.  如果希望文本在超出容器范围时显示省略号，应该使用哪个CSS属性? B

A.  overflow: hidden;

B.  text-overflow: ellipsis;

C.  white-space: nowrap;

D.  text-wrap: nowrap;

5.  如何实现两个div并排显示？AC

A.  float: left;或者float: right;

B.  text-align: left;或者text-align: right;

C.  display: inline-block;

D.  display: block;

B时文本向左向右 C行内显示D块级显示

二、  简答题

1.  什么是 CSS 盒模型？请举例说明盒模型的计算方式。

    CSS盒子模型仅仅是一个形象的比喻，每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分:margin(外边距)、border (边框)、padding(内边距)以及content(内容)。我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。

内容盒⼦(W3C盒⼦)content box 盒子所占屏幕的宽度和高度

     屏幕width=lmargin+lpadding+cwidth+rpadding+rmargin

     height同理

边框盒⼦(IE盒⼦模型) 内容盒子所占屏幕的宽度和高度

   ​​​width为设置的宽度

    height同理                       

2.  简述元素之间的外边距合并问题，父子元素外边距合并问题如何解决？

垂直方向上外边距会重合（谁的外边巨大就听谁的），水平方向上外边距时累加的（相加的）

(⼦元素 ) 顶部的外边距或者内边距, 外⾯⼀个盒⼦ ( ⽗元素 ) 也会被顶下来，因为找不到边界，加个边界边框就可以了。
原因
⼦元素和⽗元素上边框重合在⼀起。 因为⽗元素的第⼀个⼦元素的顶部外边距margin-top 如果碰不到有效 的border 或者 padding ，就会不断⼀层⼀层的找⾃⼰⽗元素的麻烦。只要给 ⽗元素设置⼀个有效的border 或 padding 就可以有效的管制这个 margin-top，防⽌它越级，把⾃⼰的 margin-top 当成⽗元素的 margin-top 执⾏。
想要控制父子元素的距离，就直接padding（现阶段，以后就直接用定位布局），若是margin，则需要添加边框。

3.  什么叫做高度塌陷？如何解决？

一般结构都是父子元素关系，父元素的高度由子元素撑起来

当子元素浮动以后（float），子元素就脱离文档流，就不再标准流占位置了，此时的父元素的高度该如何呢？父元素就无法获取高度，父元素的告诉为0了，就到是父元素塌陷了

解决方案一：写死父元素高度（但是不现实，如果所有子元素的跨度和大于父元素的宽度，就会被挤到第二行）

解决方案二：在所有子元素的最后写一个空白div(称其父元素的高度),清除浮动（clear:none）,虽然没有高度，但是他是块级元素（会对页面结构有影响）

解决方案三：（最完美的解决方案）在一个高度塌陷的父元素后加一个空白的块级元素 .father::after{ contant"  "；

                       dispaly:block;

                        /*清除浮动*/clera:none;}

解决方案四：BFC（更简单的）给父元素变成BFC布局，overflaot:atuo;