1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征:
- 浮动元素的框可以向左或者向右移动,直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止;
- 浮动元素不在文档普通流之中,因此文档普通流中的块级元素感知不到浮动元素的存在;
- 在css中任何元素都可以浮动,浮动元素会生成一个块级框,而不论该元素本身是什么元素
对父容器的影响:浮动元素脱离文档流向左或者向右移动,直到边框碰到父元素的边缘,若父元素没有设置高度,则父元素高度塌陷,高度为0;父元素若没有设置高度,高度会塌陷,若设置高度,高度则不受影响。无论设不设置高度,浮动元素边框都会考到父元素边框。
对其他浮动元素的影响:浮动元素都向某个方向移动,直到其边框碰到其他元素的边框,如果包含框太窄,无法容纳多个浮动元素,那么其浮动元素向下移动,直到拥有足够的空间,如果浮动元素的高度不同,那么它们向下移动时可能被其他浮动元素卡住。
对普通元素的影响:普通元素感知不到浮动元素的存在,但是普通元素的文字会受到影响;由于普通元素感知不到浮动元素,所以它会占据浮动元素的位置,但是浮动元素的层级比普通元素高,因此时长发生浮动元素掩盖在普通元素上的情形。
对文字的影响:块级元素包含的文本则可以感知到浮动元素的存在,文字会环绕在浮动元素周围。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指解决父元素高度的塌陷问题。
方法:
1.给父元素增加一个空子标签.clearfix,将其属性设为:
.clearfix:after {
content: '';
display: block;
clear: both;
}
2.使用BFC清除浮动,将父元素设为BFC,设为BFC的方法:
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
- inherit 规定应该从父元素继承 position 属性的值
- static 默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
- relative 生成相对定位的元素,相对于元素本身正常位置进行定位,因此,left:20px 会向元素的 left 位置添加20px
- absolute 生成绝对定位的元素,相对于static定位以外的第一个祖先元素(offset parent)进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定.设置后会脱离普通文档流。absolute类似float,会提升自己的层级,很有可能覆盖其他元素,若祖辈元素都没有设置除static以外的值,则以html的border为基准定位,若设置了,则以父元素的padding为基准。绝对定位使用场景例如:设置上级元素为position:relative,然后可以利用绝对定位使该元素相对于上级元素移动到任意位置。
- fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定,
- sticky CSS3新属性,表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置.
4.z-index 有什么作用? 如何使用?
z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其它元素。
z-index规定了元素在Z轴(距离用户远近)上的顺序,值越大则越靠近用户,表现就是元素在最上面。
z-index仅在设置了position非static属性的元素生效,且z-index的值只能在兄弟元素之间比较。
Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 负margin除了自身会产生偏移,还会影响到其它文档流元素,破坏文档结构。
- position:relative是相对于自身位置偏移,不会影响到其它文档流元素。
6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC是块级格式化上下文,生成方法:
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
作用:
1.清除浮动
2.自适应两栏布局
3.防止垂直 margin 重叠
7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
情景:
-
元素自身叠加 当元素没有内容(即空元素)、内边距、边框时, 它的上下边距就相遇了, 即会产生叠加(垂直方向)。 当为元素添加内容、 内边距、 边框任何一项, 就会取消叠加。
-
相邻元素叠加 相邻的两个元素, 如果它们的上下边距相遇,即会产生叠加。
-
父子元素叠加 子元素的外边距隔着父元素的内边距和边框, 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加。 添加任何一项即会取消叠加。
合并规则:
- 两个margin都是正值的时候,取两者的最大值;
- 当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从0位置,负向位移;
- 当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算,不能分步进行。
如何防止:
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。