文章目錄

css面試題
- 01-盒子水準垂直居中
- - 1.1-flex
  - 1.2-flex+margin
  - 1.3-定位+transform
  - 1.4-定位+margin
- 02-盒模型
- - 2.1-w3c标準盒模型
  - 2.2-ie盒模型/怪異盒模型/c3盒模型
- 03-flex:1什麼意思
- - 3.1-flex-grow:1
  - 3.2-flex-shrink:1
  - 3.3-flex-basis:0%
- 04-c3新屬性
- 05-bfc
- - 5.1-概念
  - 5.2-如何觸發
  - 5.3-解決什麼問題
  - - 5.3.1-外邊距重疊
    - 5.3.2-清除浮動
    - 5.3.3-浮動覆寫

css面試題

01-盒子水準垂直居中

<div class="box">
  <div class="box-content">

  </div>
</div>

1.1-flex

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
}

1.2-flex+margin

.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  margin: auto;
}

1.3-定位+transform

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  position: relative;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1.4-定位+margin

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  position: relative;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

02-盒模型

盒模型主要分為4部分：内容、外邊距、内邊距

Css3盒子模型可以通過box-sizing來改變

2.1-w3c标準盒模型

預設就是content-box，也就是預設标準盒模型，标準盒模型width設定了内容的寬，是以盒子實際寬度加上padding和border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: hotpink;
      padding: 10px;
      border: 10px solid #000;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>
    132
  </div>
</body>
</html>

以上示例代碼盒子最終寬高就是：140 * 140

2.2-ie盒模型/怪異盒模型/c3盒模型

通過設定box-sizing: border-box;盒模型為ie盒模型，也稱怪異盒模型，設定width後，實際盒子的寬度就固定為該寬度，包含了内容+padding+border

ie盒模型主要表現在ie浏覽器，當然其他浏覽器也保留了ie盒模型的支援

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: hotpink;
      padding: 10px;
      border: 10px solid #000;
      width: 100px;
      height: 100px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>
    132
  </div>
</body>
</html>

以上示例代碼盒子最終寬高就是：100px，内容寬度：60*60

03-flex:1什麼意思

flex:1實際代表的是三個屬性的簡寫

css高頻面試題css面試題

3.1-flex-grow:1

flex-grow是用來增大盒子的，比如，當父盒子的寬度大于子盒子的寬度，父盒子的剩餘空間可以利用flex-grow來設定子盒子增大的占比

以下示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-grow: 1;
    }


  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的寬度為500，三個子盒子的寬度啊為100，剩餘空間還有200，此時第一個盒子設定了flex-grow:1,代表剩餘空間全部交給第一個盒子100+剩餘的200 = 300

再比如以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-grow: 1;
    }

    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }


  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子剩餘空間的200

第一個盒子擴大1/5，100+40 = 140
第二個盒子擴大3/5，100+120=220
第三個盒子擴大1/5，100+40= 140

3.2-flex-shrink:1

flex-shrink用來設定子盒子超過父盒子的寬度後，進行縮小的比例取值

以下示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 200px;
    }

    .box div:nth-child(1) {
      flex-shrink: 1;
    }

    .box div:nth-child(2) {
      flex-shrink: 2;
    }

    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的寬度為500，子盒子的寬度為600，超出100，超出的100，如何進行比例縮放

第一個盒子：1/4 * 100 = 25 最終第一個盒子200-25=175

第二個盒子：2/4 * 100 = 50 最終第二個盒子200-50 = 150

第三個盒子：1/4 * 100 = 25 最終第一個盒子200-25=175

3.3-flex-basis:0%

設定盒子的基準寬度，并且basis和width同時存在會把width幹掉

示例代碼：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-basis: 50px;
    }

    .box div:nth-child(2) {
      flex-basis: 100px;
    }

    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

04-c3新屬性

c3盒模型box-sizing
flex布局
transition過渡
transform2D轉換
background-size背景縮放
border-radius圓角
等等，不用都說說一些常用的就ok

05-bfc

5.1-概念

Block Formatting Context,翻譯過來就是塊級格式化上下文

bfc實際是一種屬性，擁有這種屬性後，就會讓該渲染區域獨立，并且該渲染區域中的内容布局不會影響到外界

5.2-如何觸發

根元素(html) float屬性不為none position為absolute或fixed display為inline-block, table-cell, table-caption, flex, inline-flex overflow不為visible

5.3-解決什麼問題

5.3.1-外邊距重疊

外邊距重疊,要注意這不是bug，規範就是這樣的，當兩個盒子上下同時擁有上下間距，會取最大值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</html>

會發現兩個盒子和中間隻有100px

解決方案：觸發bfc

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
     
    }
    .box {
       overflow: scroll;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
  <div class="box">
    <div class="content"></div>
  </div>
</body>
</html>

5.3.2-清除浮動

當子盒子開啟float後會影響後面的布局以及盒子高度

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
     width: 500px;
     border: 2px dashed #000;
    }
    .content {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      float: left;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
  <h1>213</h1>
</body>
</html>

5.3.3-浮動覆寫

由于浮動導緻盒子被覆寫

示例代碼：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 500px;
      height: 500px;
      background-color: hotpink;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

由于浮動導緻盒子被覆寫

示例代碼：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 500px;
      height: 500px;
      background-color: hotpink;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

解決方案：觸發bfc，獨立的渲染區域

css高頻面試題css面試題

文章目錄

css面試題

01-盒子水準垂直居中

1.1-flex

1.2-flex+margin

1.3-定位+transform

1.4-定位+margin

02-盒模型

2.1-w3c标準盒模型

2.2-ie盒模型/怪異盒模型/c3盒模型

03-flex:1什麼意思

3.1-flex-grow:1

3.2-flex-shrink:1

3.3-flex-basis:0%

04-c3新屬性

05-bfc

5.1-概念

5.2-如何觸發

5.3-解決什麼問題

5.3.1-外邊距重疊

5.3.2-清除浮動

5.3.3-浮動覆寫

繼續閱讀

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題