前端基础知识学习第八节(CSS篇)

1.

　　一个div元素里面里面有3个子元素命名为A、B、C，已知3个元素宽度都为100%，A元素高度不固定，B元素固定高度，如何通过CSS样式来让C元素的高度
      能够自适应，填充满整个div元素

　　答案：
　　可以通过CSS3 flex布局来实现，对div元素设置
      display: flex; 
      flex-direction: column; / * flex-direction属性指定了弹性子元素在父元素中的排列方式，column是指定弹性子元素纵向排列 * /
　　对C元素设置
　　flex: 1; / * flex属性是flex-grow flex-shrink flex-basis的简写，默认值为0 1 auto，后两个属性可选，所以这里相当于设置了flex-grow: 1;
　　　　　　   建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值 * /
　　flex-grow: 1; / * 表示剩余空间分配占比为1 * /
　　flex-shrink: 1; / * 指定了flex元素的收缩规则，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，收缩的大小就是flex-shrink的值 * /
　　flex-basis: 100px; / * 指定了flex元素的宽度初始大小，可以代替width使用，优先级大于width * /
　　参考链接：http://zhoon.github.io/css3/2014/08/23/flex.html

2.

　　有一个A元素内包含一个B元素，对B元素设置CSS样式margin-top: 10px; 这个margin-top值是作用A还是B上，为什么？

　　答案：
　　margin-top: 10px; 作用到了A元素上。具体原因是：
　　因为嵌套也属于毗邻，所以根据元素产生BFC之后的布局规则，属于同一个BFC的两个相邻元素的上下margin会发生重叠。我们知道了产生问题
　　的原因了那么就可以采用对应的解决方案，比如最简单的是给A元素添加overflow: hidden;使A元素触发BFC形成一个隔离的容器这样A元素与B
　　之间就不会相互影响了

3.