前端面试题-CSS

1、块级元素和行内元素的区别

• 块级元素独占一行，行内与其他行内元素共享一行
• 块级元素可以直接设置宽高，行内不能直接设置宽高，需要结合CSS的display来设置。
• 块级元素可以嵌套块级元素和行内元素，而行内只能包含行内元素。

2、清除浮动

    父子级

• 在子级元素后面添加一个空元素，为其添加clear：both。弊端：增加了无意义的元素结构。
• 给父级元素设置一个overflow：hidden  解决了第一种方法的弊端
• 添加伪类元素::after,为需要清除浮动元素的伪对象中设置，
         

        .layout::after{
                      display:block；
                      clear:both;
                      content:"";
                } 

  
      （用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display：block；,同时还要写clear：both；）

    兄弟级

       给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

3、水平居中问题

•      margin移动  top、left
•      父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top移         动
•      父相对+子绝对，且left、top、bottom、right为0，margin：auto
•      给父元素设置display:flex，且align-items:center;justify-content:center;