【CSS】 面试常见问题记录

css的总结，记录，更新

目录：

• 1.margin
• 2.定位 position：relative/absolute
• 3.三栏布局实现 (圣杯布局/双飞翼布局/绝对布局)
• 4.居中问题
• 5. line-height 取值问题
• 6.BFC
• 7.手写清除浮动
• 8. flex 画色子

1.margin

1. 垂直重叠
   相邻的两个元素，第一个元素 margin-bottom 和第二个元素的 margin-top 值叠加，适配最大值。

2. 负值显示
   现象： margin-left和margin-top出现负值，当前元素向左向上移动。margin-right和margin-bottom出现负值，当前元素的位置不变，其右侧和底部的元素向左和向上移动。
   记忆： margin四个方向的负值，可以想象成内容大小不变，但是站位面积发生向内折叠，折叠后，站位缩小，元素本身就会向左，向上移动，右侧和底部就会出现位置空缺，右边和下面的元素就会补上来

2.定位 position：relative/absolute

1. left,top,right,bottom 必须搭配position来使用才有效
2. 当没有设置width,height时，left，top和right,bottom 同时存在的时候，前者有效，后者无效

1. relative 相对于自身位置定位
   基于当前的位置，如果left,top,或者right,bottom是负值，则四面基于当前所处位置向外走，如果是正值，四面基于当前所处位置向内走。
   

2. absolute 相对于最近的设置了position的元素的四个边框位置定位
   基于四个父元素的边框，如果left,top,或者right,bottom是负值，则从父元素的边框，向外走，如果是正值，则从父元素的边框，向内走。
   

3.三栏布局实现 (圣杯布局/双飞翼布局/绝对布局)

三栏布局：两边宽度固定，中间内容随着屏幕宽度而自适应
目的：中间内容最先渲染出来，html中，中间元素放第一个渲染

1. 圣杯布局
   container采用padding的方式空出两边的位置，子元素采用relative和float的方式布局
   缺点：当中间区域宽度小于两边的时候，样式会乱

   

2. 双飞翼布局 通用性较强
   子元素采用float的方式，中间元素采用内置元素margin空出两侧的内容，中间区域面积依然包含占100%，被左右改变了布局的块遮挡了内容，只有中间区域的子元素占中间的自适应区域
   主要内容都在 inner-box 蓝色区域

   

3. absolute 布局
   没有margin负值，没有float，但是如果左右两边高度超出中间区域，撑不开中间的内容

   

4. 三种方式优缺点对比
   具体可参考: 为什么要提出双飞翼布局

4.居中问题

1. 水平居中
   • 文本：text-align：center；
   • block：margin:0 auto；
   • absolute: left:50%; margin-left:-200px（自身宽度一半）
2. 垂直居中
   • 文本：line-height等于height
   • 知道元素高度（absolute）：

     top:50%;
     margin-top:-100px (自身高度一半)
     

   • 不知道元素高度（css3）：

     transform:translate(-50%,-50%); 
     top:50%;
     left：50%；
     

   • 不知道元素高度（absolute)：

     left:0; 
     right:0; 
     top:0; 
     bottom:0; 
     margin: auto;
     

5. line-height 取值问题

line-height的值，取决于当前元素的font-size值，如果当前元素没有设置font-size，则font-size继承父元素的font-size值。

下面假设当前元素的font-size值为18px（或则继承了父元素的18px）

1. line-height：30px；设定了具体的值，就取此值30px。
2. line-height：2；值为 2*18px（当前元素的font-size值）=36px；
3. line-height：200%；值为200% * 18px（当前元素的font-size值）=36px

6.BFC

block format context 块级格式化上下文，可以理解为用BFC做隔离，内部和外部互不干涉

1. 经常遇到的一些问题

   • 浮动元素，absolute元素，脱离文档流
   • margin的重叠

2. BFC的处理方法：给元素的父元素添加下面属性，框在一个新的BFC中渲染

   • float不是none
   • display为inline-block或者flex
   • position为absolute或者fixed
   • overflow不是visible

或者针对性的处理：浮动导致 ——> 清除浮动
参考：BFC初体验

7.手写清除浮动

    .clearfix:before{
        content:"";
        display:table;    //不一定是table，块级元素
        clear:both;
    }
    .clearfix{
        *zoom:1    /IE 低版本
    }

8. flex 画色子

1. 容器father元素
   • flex-direction：排列方向
     （row-默认值｜ row-reverse ｜ column ｜ column-reverse ）
   • justify-content：对齐方式
     （flex-start-默认值｜flex-end ｜center ｜ space-around ｜ space-between）
   • align-items：交叉轴对齐方式
     （flex-start｜flex-end ｜center ｜ stretch-默认值 ｜ baseline）
   • align-content：多行排列相互间对齐方式
     （flex-start-默认值｜flex-end ｜center ｜ stretch ｜ space-between ｜ space-around）
   • flex-wrap:换行
     （nowrap ｜ wrap | wrap-reverse)
2. 子元素
   • align-self：子元素在交叉轴上的对其方式,可覆盖align-items的属性值 (auto | flex-start | flex-end | center | baseline | stretch ) 参考：Flex