css面试题

发布时间 2023-10-31 09:29:12作者: 激动1223

1.css中的哪些单位

  绝对单位:

   px:像素单位

  相对单位:

    em: 相对父元素字体大小

    rem:相对根元素字体大小

2.居中的方式

1.水平居中

  1.设置盒子: margin:0 auto

  2.display:  flex

2.垂直居中

     1.vertical-align: middle 实现居中,1. display: inline-block才会生效 2.需要参考兄弟元素的中心点

     2.绝对定位实现+transform

     3.弹性盒子:1.flex 

                           2.grid

3.隐藏元素的方式总结

  1.完全隐藏:1.dispalay:none

                       2.hidden;

  2.视觉隐藏:1.visibility: hidden;

                        2.opacity:0

                        3.透明度设置

                        3.绝对定位,移除视口外

                        4.margin-left ,移除视口外

                        5.宽高设置 0

  3.语义隐藏:aria-hidden:true

 

4.浮动

  1.作用:文字环绕(文章中使用较多)

  2.特性

        1.脱离标准流(位置就空了)

        2.浮动元素相互贴靠性(宽度不够换行)

        3.宽度收缩

        4.清除浮动(副作用)

           1.父元素设置高度(大于浮动元素高度)

           2.clear

           3.隔墙法(空div元素设置清除浮动)

          4.内墙法(高度坍塌)

          5.父元素设置overflow:hidden (BFC)

          6.父元素设置伪元素,清除浮动

5.BFC

  1.BFC是一个独立的布局环境,BFC内部的元素布局与外部相互不影响

  2.BFC布局规则:

 3.BFC形成规则:

     1.float: right left

     2.positon: absoult fixed

     3.overflow: auto scroll hidden

     4.display : inline-block table-cell

4.作用:

   1.解决高度坍塌问题

   2.不会于浮动元素重叠

   3.外边距margin重叠 问题

     

 6.样式计算过程

   1.确定声明值

      2.层叠冲突

      3.使用继承

     4.使用默认值