1.relative和absolute的区别?
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
注:侧重点可以在是否脱离文档流,更详细的解释可以参照这篇文档:https://www.cnblogs.com/jenry/archive/2007/07/15/818660.html
2.怎么让一个元素上下、左右都实现居中?请使用不止一种方法实现。
//html
<div class="wapper">
<div class="inner"></div>
</div>
//css
方法一:
.wapper{
/*元素高宽可以自己确定*/
width:500px;
height:500px;
position:relative;
border:1px solid red;
}
.inner{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid green;
}
方法二:
.wapper{
width:500px;
height:500px;
display: flex;
justify-content: center;
align-items: center;
border:1px solid red;
}
.inner{
width:200px;
height: 200px;
border:1px solid green;
}
3.css盒模型
css盒模型分为“标准模型(w3c标准)”和“IE盒模型”。
标准模型(w3c标准)的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
详细内容可以看这篇博客,作者zyuzixiao说的很详细,https://blog.csdn.net/zyuzixiao/article/details/18733463。
用css设置盒模型:
box-sizing:content-box;//标准模型,浏览器默认
box-sizing:border-box;//IE模型
4.BFC问题(边距重叠解决方案)
a.进本概念:块级格式上下文
b.BFC的原理(渲染规则):
①.BFC元素在垂直方向上的边距会发生重叠;
②.BFC的区域不会与浮动元素的box重叠;
③.BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素;
④.计算BFC高度的时候,容器内部的浮动元素也会参与计算。
c.如何创建BFC
①.overflow:hidden或auto;
②.float值不为none,即设置了浮动;
③position不为static或relative;
④/display为table,table-cell,table-row……之类的表格属性。