前端面试css篇一

jeckson

共 1067字,需浏览 3分钟

 ·

2021-01-13 17:24

b9c018c95d9520431022fed5527f0142.webp

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;元素内容


b9c018c95d9520431022fed5527f0142.webp

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属性对非替换行内元素无效,宽度由元素内容决定

b9c018c95d9520431022fed5527f0142.webp

垂直居中

1、line-height

需要注意的是如果设置百分比,这个是指元素本身的字体大小。这个使用也是在知道本身或父元素高度之后才方便使用。

23e307b501220635f0b4cd84dff22ba2.webp


2、position+top+负margin-top

这个使用在知道本身高度之后才方便使用。

a87d55ca3afc64fba39dcdc98dc51762.webp


3、display:table

设置父元素table,子元素table-cell和vertical-align:middle(让它居中

6c40bc1e9875f3aa39c53362c8048c0b.webp


4、aposition+top+bottom+margin

    a、position:absolute/relative/fixed
    b、btop/bottom:0
    c、margin:auto

f23babeefa85a0cf4e84944eb76c4516.webp


5、position+top+transform

0afe4d3067da50a0a3d9043748beb045.webp


6、flex布局

直接父元素display:flex。然后align-items:center即可



bb315bd01ee165030c64fc1c361cc5df.webp



浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报