当前位置：网站首页>2021 肯特面试题3

2021 肯特面试题3

2022-07-28 14:51:00 【PBitW】

文章目录

浮动的元素怎么上下左右具中

浮动的元素怎么上下左右具中

这里，菜鸟没有遇见过这种情况，因为一般的面试题问的是，一个大的div里面有个小的div，如何使其上下左右具中，也就是里面的小div是没有浮动的！

当时菜鸟就感觉，反正上下左右具中的方式就那么4个，直接都说一下不就好了，然后我刚开口说flex布局，HR就说不对，我很懵逼，然后又说了定位，HR还是说不对，然后我就不想回答了，想看看他怎么说的，结果他给我讲了一番大道理，说什么我写的代码不够多，所以不知道，要试！

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .wrapper{
       width: 400px; height: 400px; background-color: aqua; display: flex; justify-content: center; align-items: center; } .content{
       width: 100px; height: 100px; background-color: blueviolet; float: left; } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

position（定位）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .wrapper{
       width: 400px; height: 400px; background-color: aqua; position: relative; } .content{
       width: 100px; height: 100px; background-color: blueviolet; float: left; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .content1{
       width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
  <hr>
  <div class="wrapper">
    <div class="content1">
    </div>
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

注意

这里要注意的有两点：

translate是 以自身为基准移动，translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
定位不一样，translate里面虽然还是50%，但是正负情况不一样

margin和padding

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .wrapper{
       width: 400px; height: 400px; background-color: aqua; box-sizing: border-box; padding-top: 150px; } .content{
       width: 100px; height: 100px; background-color: blueviolet; float: left; /* margin: 0 auto; flaot之后auto就无效了 */ margin-left: 150px; } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

IE的盒模型和普通的盒模型？

看到box-sizing又记起来HR问的一个问题了，那就是盒模型，IE的盒模型和普通的盒模型？

我当时就很懵逼，这个不就是用box-sizing就可以设置的吗？主要是我当时也记不清到底是border-box对应的IE还是content-box对应的是IE了！（菜鸟搜了一下，border-box对应的IE）
在这里插入图片描述
更多见我的博客：
盒子模型（一）：初识盒模型、边框 [第四天]

重学前端样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列）（第四天）

table-cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> .wrapper{
       width: 400px; height: 400px; background-color: aqua; display: table-cell; vertical-align: middle; } .content{
       width: 100px; height: 100px; background-color: blueviolet; float: left; /* margin: 0 auto; */ margin-left: 150px; } .content1{
       width: 100px; height: 100px; background-color: blueviolet; margin: 0 auto; } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
  <p>fjakfjalk</p>
  <div class="wrapper">
    <div class="content1">
    </div>
  </div>
</body>
</html>