1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征：元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素。可以移动到所在容器的的左端或者右端。其他的文本和行内元素围绕它安放。
- 对父容器的影响： 不与父容器发生外边距合并。无法撑开父元素。
- 对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
- 对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
- 对文字的影响：文字所在行框因为浮动元素的挤压而缩短，从而围绕浮动元素排列。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
- 1，利用 clear属性，清除浮动clear属性：一个元素是紧挨着前面的浮动元素，还是必须移动到它们的下面（浮动被清除）。clear属性既可以用于浮动元素，也可以用于非浮动元素。
当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。 - 1.非浮动块为父元素，对父元素设置伪元素after。
container:after {content: "";display: block;clear: both;} - 2.非浮动块为父元素，在父元素的底部添加新的空标签，设置属性clear: both
或者clear: left
或者clear: right
当应用于浮动元素时，它将操作元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。设置操作元素属性clear: both
或者clear: left
或者clear: right
- 2，使父容器形成BFC父容器成为BFC后，父容器将不会出现高度塌陷的问题。
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- relative 相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。 •
- absolute 绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。
- fixed 固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏
4.z-index 有什么作用? 如何使用?
- z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
- z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。
- z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
- 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。生成BFC的方式：
BFC的作用：•对内部元素的包裹：阻止父子元素外边距合并和包裹浮动元素•阻止父子元素外边距合并。•包裹浮动元素。•对外部元素的独立性：不与浮动元素发生重叠。
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并形式：
-
相邻
-
父子。父元素中不设置padding和border时，父元素和子元素的外边距重合，只设置子元素的margin-top，父子元素整体下移，发生外边距合并。
- 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
合并规则：
1.两个margin都是正值的时候，取两者的最大值；
2.当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3.当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4.所有毗邻的margin要一起参与运算，不能分步进行。不让相邻元素外边距合并的方法： - 1.被非空内容、padding、border 或 clear 分隔开。
- 2.不在一个普通流中或一个BFC中。3.margin在垂直方向上不毗邻。
网友评论