CSS那些事儿2
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
. 1.1 首先解释浮动：
使元素脱离文档流（虽然似乎国外没有文档流这个具体概念），按照我们指定的方式移动（left，right等等）
当浮动元素遇到父级元素边界或者相邻的浮动元素则停止浮动
文档中的普通元素察觉不到浮动元素存在，但是文本可以感觉到，出现环绕浮动元素排列的现象
. 1.2影响：
. 1.2.1父容器
所有元素都是浮动元素，父容器失去高度（即高度坍塌）
. 1.2.2其他浮动元素
两种情况：对其他浮动元素的影响：如果父元素的宽度不够，父容器里的其他浮动元素会向下移动，直到位置足够放下。
如果浮动元素的高度不同，向下移动的元素就会被比它高的元素卡住
. 1.2.3普通元素，文字
普通元素感知不到浮动元素，会被遮盖，文字可以感知，会环绕浮动元素排列
2.清除浮动指什么? 如何清除浮动? 两种以上方法
. 2.1 因为浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开,也就是会出现高度坍塌
. 2.2 清除浮动方式：
. after伪类大法：在父元素中加入after伪标签父元素:after{content:'';display:block;clear:both;}:after{content"添加的内容";} IE6，7下不兼容
zoom ：1 用来触发 IE下 haslayout，使元素根据自身内容计算宽高。
. 最后一个子元素后面添加一个没有高度的空div{clear:both;}
. 将父元素转化为BFC后面会讲到！
overflow：hidden/auto/scroll（客官三选一）
display:inline-block float:方位等等
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
inherit 规定应该从父元素继承 position 属性的值
static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px
absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
4.z-index 有什么作用? 如何使用?
z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。数儿越大在越外层：z-index:4;数值越高，越优先显示。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
. position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。也就是说还占据文档流中原来的位置。
. margin：除了让元素自身发生偏移还影响其它普通流中的元素。后面的元素会紧跟此元素占据位置
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
. BFC，格式化块级上下文，使元素形成独立的与其他块隔离的容器，容器里面的子元素不会影响到外面的元素。
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素
在以上的情况里可以创建BFC
. (1） 解决margin重叠问题，同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，他们的边距就不会合并。一般应用于嵌套。
.（2） 清除浮动。BFC不会重叠浮动元素。
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
. 外边距合并:两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
会选取较大值进行合并
合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
网友评论