前端面试css篇一
共 1067字,需浏览 3分钟
·
2021-01-13 17:24
display: none;与visibility: hidden;的区别
联系:它们都能让元素不可见
区别:
1、display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
2、display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
3、修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
4、读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容
display: block;和display: inline;的区别
block元素特点:
1、可以应用margin/padding
2、忽略vertical-align
3、处于常规流中时,如果width没有设置,会自动填充满父容器
4、在没有设置高度的情况下会扩展高度以包含常规流中的子元素
5、处于常规流中时布局时在前后元素位置之间(独占一个水平空间)
inline元素特点:
1、受white-space控制
2、margin/padding在竖直方向上无效
3、浮动或绝对定位时会转换为block
4、vertical-align属性生效
5、水平方向上根据direction依次布局
6、width/height属性对非替换行内元素无效,宽度由元素内容决定
垂直居中
1、line-height
需要注意的是如果设置百分比,这个是指元素本身的字体大小。这个使用也是在知道本身或父元素高度之后才方便使用。
2、position+top+负margin-top
这个使用在知道本身高度之后才方便使用。
3、display:table
设置父元素table,子元素table-cell和vertical-align:middle(让它居中)
4、aposition+top+bottom+margin
a、position:absolute/relative/fixed
b、btop/bottom:0
c、margin:auto
5、position+top+transform
6、flex布局
直接父元素display:flex。然后align-items:center即可