一.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
1.浮动元素会脱离正常的文档流,它会根据float的属性向左或向右移动,直到遇到有边框的或另一个浮动元素才会停止。
2.对父容器的影响:元素的浮动会让没定位高度的父容器失去高度
对其他浮动元素的影响:如果包含块太窄无法容纳水平排列的全部浮动元素,那么其它浮动元素会向下移动,直到有足够的空间,而如果浮动元素的高度不同,那么向下移动的时候可能会被卡住。
对普通元素的影响:普通元素会占据浮动元素原来的位置,元素的浮动会脱离正常的文档流,会覆盖住普通元素
对文字:浮动元素不会覆盖文字,会使文字围绕这浮动元素布局
二.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指消除浮动元素对其他元素的布局影响,可以用clear属性清除浮动
方法:
1.在浮动元素后面添加一个子元素div,给其设置clear:both属性
也可以用CSS属性完成:clearfix{*zoom: 1;}
.clearfix:after{content: ””; display: block; clear: both;}
2.利用BFC清除浮动:overflow:hidden;auto;scroll
display:table-cell;inline-block
position:absolute;relative;
三. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
1.相对定位:relative 相对于元素原来的位置进行定位
2.绝对定位:absolute 相对于有定位属性的父元素或根元素进行定位,
3.固定定位:fixed 相对于浏览器窗口进行定位
4.inherit:从父元素继承;
四.z-index 有什么作用? 如何使用?
在定位元素中设置标签可以覆盖,z-index就是设置标签在Z轴方向上的位置,数字越大,标签被放置在越上面
通过给元素设置z-index值使用,例如z-index:99
五.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative是相对于元素本身的位置进行偏移,偏移之后不影响别的元素的位置,之后覆盖别的元素,而负margin使元素发生偏移则会影响别的元素的位置,会把别的元素挤开
六.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC是块级格式上下文 。
给元素添加float、display:inline-block/table-cells/table-captions、overflow:hidden/auto、position:absolute/relative会生成BFC
作用:Block Formatting Context提供了一个环境,HTML元素环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
1.它可以清除浮动
2.它可以避免外边距合并
七.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。
1.当相邻在垂直方向上都有margin属性时,两个元素的上下margin会合并,合并后外边距的值为margin值较大的那一个值,
2.如何不让相临元素外边距合并:1.设置border属性
2.使用BFC
3.如果是父子元素,可以给父元素添加一个padding属性
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
margin: 30px;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>