前端测试二

1.css盒子模型由里到外由哪几部分组成？标准盒子模型与IE盒子模型设置的宽高有什么区别？可以通过什么方式转变？

盒子模型由元素内容（content）、内边距（padding）、边框（border）和外边距（margin）几个要素组成。
可以发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
区别：
标准的css盒子模型宽高就是内容区宽高；
低端IE的content部分把 border 和 padding计算了进去;
方式转变：
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

2.分别使用 flex 布局和 grid 布局，水平垂直居中一张图片

flexbox 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;            // 设置flex布局方式
  justify-content: center;  // 主轴居中
  align-items: center;      // 交叉轴居中
}
.box{
  // 子元素不用设置任何属性
}

grid方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>
// css部分
.container{ 
　　display: grid; // 设置grid布局方式 
　　justify-items: center; // 主轴居中 
　　align-items: center; // 交叉轴居中 
}

transform 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

3.响应式布局与自适应布局的区别

1.什么是响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2.什么是自适应式布局：

自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

4.多个 inline 元素之间会有空隙，为什么？如何解决？

当我们在使用ul>li标签写导航的时候，又不想让其变成浮动流，我们只需要把li的css样式添加一个display: inline-block就可以了。
为什么会出现这个间隙呢？
原因是这样的，html的闭合标签其实是一个换行符，会产生一个空白符，所以在元素之间会产生一个间隙。
元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度

解决空隙的办法:
1.解决元素之间的空白符
将li的闭合标签写到下一个li起始标签之前：

<!-- 将前一个标签结束符和后一个标签开始符写在同一行 -->
<div class="parent">
  <div class="child">child1
  </div><div class="child">child2
  </div>
</div>
<!-- 将所有子元素写在同一行 -->
<div class="parent">
  <div class="child">child1</div><div class="child">child2</div>
<div/>

方法二：为父元素中设置font-size: 0，在子元素上重置正确的font-size

<div class="parent" style="font-size: 0px">
  <div class="child" style="font-size: 16px">child1</div>
  <div class="child" style="font-size: 16px">child2</div>
</div>

方法三：设置子元素margin值为负数
元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的

方法五：设置父元素，display:table和word-spacing

.parent{
  display: table;
  word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
}

5.以480px，800px，1400px作为分隔点，用媒体查询如何书写？写出css框架即可。

宽度由大到小，用max-width:

//**css部分**
/* 宽度由大到小，用max-width: */
/* 宽度小于等于 1400px */
@media screen and (max-width:1400px){
.left{
   
    background-color: blue;
}
.right{background-color:red;}
}
/*宽度小于等于800px*/
@media screen and (max-width:900px){
    .left{
        background-color: pink;
    }
    .right{
        background-color: darkgreen;
    }
}
/* ਼宽度小于等于 480px */
@media screen and (max-width:500px){
    .right, .left{
        float:none;
        width: 100%;
        height: 100px;
    }
}

//html部分
  <div class="left">1</div>
   <div class="right">2</div>

宽度由小到大，用min-width:

@media screen and (min-width: 480px) {
 .left {
 background-color: pink;
 }
 .right {
 background-color: darkgreen;
 }
}
/* ਼ଶय़ԭᒵԭ 800px */
@media screen and (min-width: 800px) {
 .left {
 background-color: blue;
 }
 .right {
 background-color: red;
 }
}
/* ਼ଶय़ԭᒵԭ 1440px */
@media screen and (min-width: 1440px) {
 .right, .left {
 float: none;
 width: 100%;
 height: 100px;
 }
}

6.单位 rem，em，vw(vh) 的区别

rem 单位都是相对于根元素html 的 font-size来决定的
em 同百分比一样，相对于父元素计算
vw：1vw等于视口宽度的1%，vh:1vh等于视口高度的1%

7. Chrome 支持的最小字体大小是12px，如何设置小于12px的字体？

使用CSS3的一个缩放属性：transform:scale()
transform:scale()这个属性只为可以缩放可以定义宽高的元素，而span是行内元素；我们给span元素定义一个display:block,这样就可以了。

<p>xjun0812测试16像素</p>
<p>xjun0812测试14像素</p>
<p>xjun0812测试12像素</p>
<p>xjun0812测试10像素</p>
<p>xjun0812测试10像素</p>

Chrome浏览器下的效果：

我们可以使用CSS3的一个缩放属性：transform:scale()，我这里给最后一行设置的代码如下（倒数第二行不做任何其他设置，以做参考）：

-webkit-transform:scale(0.833);
/*这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。*/

从上图可以看到最后一行是变小了，但是左边却出现了留白。是因为做缩放处理的时候把宽度也缩放了。还有要注意一点，如果这个p元素有背景的话，也会使背景也随着变化，所以，我们通常的做法是给

标签里再套个一个标签，我这里用span标签。

<p>xjun0812测试16像素</p>
<p>xjun0812测试14像素</p>
<p>xjun0812测试12像素</p>
<p>xjun0812测试10像素</p>
<p><span>xjun0812测试10像素</span></p>

8.实现鼠标移到一个元素上，该元素向右移动10px

div:hover{transfrom:translateX(10px)}

9.设置 viewport 的 width=device-width什么意思？user-scalable=no什么意思？

1.width=device-width: 自适应手机屏幕的尺寸宽度
2.user-scalable=0: 使用户可以缩放的操作

10.响应式布局可通过哪些方式实现？

1.媒体查询
2.百分比布局
3.rem布局