sea易呀
sea易呀

2020.6.17

题目

1.有两个盒子，如何让一个盒子在另一个盒子中水平垂直居中

  • 通过定位，给父级元素（content）添加position：relative属性，给子元素（main）添加position：absolute属性，再通过top和left值的50%实现里面盒子的左上角在外面盒子的中心，所以还需要通过margin值的计算来移动实现整个盒子处于居中，margin-top和margin-left的值均为内部盒子高和宽的一半，就能实现真正的居中

  • 采用CSS3的trabsform:translate(-50%，-50%)属性，X轴和Y轴分别向左和向上移动宽高的一半，这种方式的好处是不需要具体的宽高就能实现

  • 定义父级元素display：flex属性，其次设置justify-center：center属性是将内容沿着主轴（X轴）移到中心位置，align-items：center属性是将内容沿着Y轴移到中心位置，所以父级元素里面的内容均会水平垂直居中显示。该种方式移动端使用的比较多。

2.手机和邮箱的正则表达式

/^1\d{10}$/

/^(\w-.)+@(\w-?)+(.\w{2,})+$/

3.get和post有什么区别？

get的参数会显示在浏览器地址栏中，而post的参数不会显示在浏览器地址栏中；

用post可以提交的数据量非常大，而用get可以提交的数据量则非常小(2k)，受限于网页地址的长度。

  • GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。

使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”，而get则不会；

GET能被缓存，POST不能缓存 。

  • GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。

get方式的安全性较post方式要差些，但是执行效率却比post方法好。

  • 在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式；

4.计算属性和监听器有什么区别？

conputed和methods

5.父盒子中子盒子浮动有什么后果？

  • 父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题，由于父盒 子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除

6.为什么要清除浮动

  • 当元素有浮动属性时，高度会坍塌，高度的坍塌会对其父元素或后面的元素产生影响，出现布局错乱的现象，可以通过清除浮动的方法来解决。

7.清除浮动有哪些方法？

  • 给父元素设置合适的高度

  • 给父级元素添加overflow属性（父元素添加overflow:hidden）

    当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉

  • 在浮动的盒子之下再放一个块级标签，在这个标签中使用clear:both，来清除浮动对页面的影响

  • 使用after伪元素清除浮动

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        centent:"";//设置内容为空
        height:0;//高度为0
        line-height:0;//行高为0
        display:block;//将文本转为块级元素
        visibility:hidden;//将元素隐藏
        clear:both//清除浮动
}
.clearfix{
        zoom:1;//为了兼容IE
}

  • 使用before和after双伪元素清除浮动

    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
}
.clearfix:after{
        clear: both;
}
.clearfix{
        zoom:1;
}

8.定位有哪些属性？相对定位是相对什么定位？

position: static(默认) | relative | absolute | fixed | sticky

1.static（静态定位）：没有定位，元素出现在正常的流中

2.relative（相对定位）：生成相对定位的元素，通过top，right，bottom，left的设置相 对于其正常（原先本身）位置进行定位

3.absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进 行定位。

4.fixed（固定定位）：元素位置相对于浏览器窗口是固定位置，即使窗口是滚动的，它也 不会移动

5.sticky（粘性定位）：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定 位

9.行内元素和行内块元素有什么区别？

行内元素：input,img,span,a,i,textarea

  • 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
    html中的、、