当前位置：网站首页>2021 Kent interview question 3

2021 Kent interview question 3

2022-07-28 15:56:00 【PBitW】

List of articles

How do floating elements go up, down, left and right

How do floating elements go up, down, left and right

here , Rookies have never encountered this kind of situation , Because the general interview question is , A big one. div There is a small one in it div, How to make it up, down, left and right , That is, the small inside div There is no floating ！

At that time, rookies felt , Anyway, the way up, down, left and right is so 4 individual , Just say it directly , Then I just opened my mouth and said flex Layout ,HR Just say no , I'm so confused , Then I talked about positioning ,HR Still wrong , Then I don't want to answer , Want to see what he said , As a result, he told me a great truth , Say that I don't write enough code , So I don't know , Try ！

flex Layout

<!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>

Running results ：
Insert picture description here

position（ location ）

<!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>

Running results ：
Insert picture description here

Be careful

There are two points to note here ：

translate yes Move based on itself ,translate() Method , According to the left (X Axis ) And the top (Y Axis ) Parameters given by position , Move from current element position
Different positioning ,translate Although it is still 50%, But the positive and negative situations are different

margin and 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 after auto It doesn't work  */ margin-left: 150px; } </style>
</head>
<body>
  <div class="wrapper">
    <div class="content">
    </div>
  </div>
</body>
</html>

Running results ：
Insert picture description here

IE Box model and ordinary box model ？

notice box-sizing Remember again HR A question to ask , That's the box model ,IE Box model and ordinary box model ？

I was very confused at that time , This is used box-sizing Can you set it ？ The main reason is that I couldn't remember it at that time border-box Corresponding IE still content-box The corresponding is IE 了！（ The rookie searched ,border-box Corresponding IE）
Insert picture description here
See my blog more ：
Box model （ One ）： First knowledge of box model 、 Frame [ The fourth day ]

Learn the front end again style (text-align)/ Explain the form table（ a key ： Inherit / border-spacing/collapse/ empty-cells/ box-sizing/ Merge ranks ）（ The fourth day ）

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>

Running results ：
Insert picture description here

summary

In fact, whether the elements float or not is only right margin Of auto Use has an impact , It has no effect on others ！

Set to Flex After the layout , The child element float、clear and vertical-align Property will fail ！
Positioning is also to get sub elements out of the document flow , therefore float Just one step ahead ！

原网站

版权声明
本文为[PBitW]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207281451251177.html