CSS面试题---页面布局

1、常见的css布局单位

        像素px：页面布局的基础，一个像素表示终端屏幕所能显示的最小区域，可分为css像素（为开发者提供，在css中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关，任何设备的物理像素都是固定的）

        百分比%：当浏览器的宽度或高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式效果。一般而言，子元素的百分比相对于直接父元素。

        em和rem：是相对长度单位，em是相对父元素的字体大小倍数，rem是相对根元素的字体大小倍数。em是相对于当前对象内文本的字体尺寸。如果未设置当前行内字体尺寸，则相对于浏览器的默认字体尺寸（16px）。

        vw和vh：vw表示相对于视口的宽度，vh表示相对于视口的高度，wmin是vw和vh中的最小值，vmax是vw和vh中的最大值。

2、px、em、rem的使用场景

        三者的区别：

                px是固定像素，一旦设置了就无法因为适应页面大小而改变；

                em和rem是相对长度单位，其长度不是固定的，更适用于响应式布局；

                em是针对父元素，而rem是针对根元素设置。

        使用场景：

                对于分辨率影响不大的，且只需要适配少量设备的，使用px即可；

                对于需要适配大量设备的，选用rem即可。

3、两栏布局的实现

        两栏布局一般指左侧宽度固定，右侧宽度自适应。具体实现方式：

                a、浮动模式

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

        b、浮动+BFC模式

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

        c、flex布局

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

        d、绝对定位一

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

        e、绝对定位二

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

4、水平垂直居中

        a、绝对定位+transform

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

        b、绝对定位+margin auto

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

        c、绝对定位+margin负值

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

        d、flex布局

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

 5、如何根据设计稿进行移动端适配

        适配不同像素密度，使用media媒体查询，选用不同精度的图片，以确保不失真；

        适配不同屏幕大小，按照设计稿比例还原；

        让页面自适应展示，使用em、rem、vw、vh等相对单位。

6、简述flex布局

        flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

7、响应式设计的概念及基本原理

        响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

        基本原理是通过media媒体查询，查询检测不同的设备屏幕尺寸处理。

        页面头部必须有meta声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>