css的幾個拷問項(慢慢會是N個🤔)

時間  2021-08-12
標籤 css html git github web markdown app ide oop 佈局 欄目 CSS 简体版
原文   原文鏈接

css2.PNG

在這段時間的春招，有發現一些css問題有被說起，因此在這裏總結一些關於css的知識(這段時間我遇到的這裏總結下)，這裏也不徹底，只是做者找的一些，麻煩各位大佬，提出一些，你們能夠一塊兒學習，我會實時更新到本文章，使文章愈來愈完整。css

居中問題

前提環境佈置：後面代碼都應用於本代碼html

<style> .outer { width: 300px; height: 300px; border: 1px solid #999; } .inner { width: 100px; height: 100px; border: 1px solid #999; } </style>
</head>

<body>
    <div class="outer">
        <div class="inner">hello world</div>
    </div>
</body>
複製代碼

image.png

1. 水平居中方法

前兩節的適用性較小，更多方法放在第三節git

a.使用margin

//使用方式
.inner {
display: block; /* 還能夠是 table | flex | grid，但不能是 inline-xxx 即必定爲塊級元素*/
margin: 0 auto;
}
複製代碼

原理：元素爲塊級元素，會獨佔一行，若是其寬度沒有佔滿橫向空間，那麼剩餘的空間就處於待分配狀態，此時設置 margin:0 auto; 意味着把剩餘的空間分配給 margin，而且左右均分，因此就實現了水平居中。github

缺點：須要固定居中元素的寬。web

b. 使用text-align + inline-block

//在以前的代碼中添加下面兩條
.outer {
  text-align: center;
}
.inner {
  display:inline-block;//或者inline等，text-align對塊級元素無效
}
複製代碼

適用於文本類型，內聯元素。markdown

c. 使用 fit-content + margin

.inner {
  width: fit-content;
  margin: auto;
}
複製代碼

即便子元素是浮動元素也適用。 width:fit-content能夠在實現元素收縮效果的同時，保持本來的block水平狀態，因而，就能夠直接使用margin:auto實現元素向內自適應同時的居中效果。app

2. 垂直居中

這裏搭配第一節的水平居中方法，也就能夠實現水平垂直居中方法，就不放在第三節水平垂直居中裏ide

a. 使用 table-cell + vertical-align

.outer {
  display: table-cell;/*此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）*/
  vertical-align: middle;
}
複製代碼

優勢：不須要固定居中元素的高。oop

b. 使用 inline-block + line-height

.outer {
  line-height: 300px;/*父元素須要設定高度*/
}
.inner {
  line-height: initial; /* 重置 */
  vertical-align: middle;
  display: inline-block;/*對象必須是文本，原本就是內聯元素這一條代碼能夠沒有*/
}
複製代碼

元素的 height 和 line-height 相同的時候，會使其文本內容垂直居中。佈局

缺點：須要知道其父元素高度。 優勢：不須要固定居中元素的高。

c. 使用僞元素，inline-block 元素特性

.outer::after {/*利用僞元素*/
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
複製代碼

在居中元素的父元素上，使用一個僞元素，將這個僞元素設置爲 inline-block 後，就好像它原來就是一個真正的 DOM 元素，存在於頁面上。而後再將居中元素設置爲 inline-block，根據 inline-block 的特性（多個相鄰的 inline-block 元素會橫向並排顯示），居中元素會和僞元素橫向並排顯示。而且設置 vertical-align: middle; 後，它們會互相垂直對齊，最後將僞元素高度撐起來 height: 100%;，居中元素會對齊僞元素，從而實現了垂直居中。
優勢：不須要固定居中元素的高。

3. 水平垂直居中

a. flex寫居中

這也是我用的最多的

.outer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
複製代碼

b. grid寫居中

.outer {
  display: grid;
}
.inner {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
}
複製代碼

c. 定位居中

  • absolute + transform

translate的兩個值分別指定水平和豎直方向移動距離(以百分比計算時是以自己的長寬作參考的)

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*由於上面的left和top各設置的50%，是把盒子的左上角移動到中心位置， 而沒有真正居中，因此須要使用transform微調，使內部盒子的中心位於外部盒子中點*/
}
複製代碼
  • absolute + calc

calc不懂得能夠點這裏

.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: calc(50% - 50px);/*減50px是由於50px正好是inner盒子寬高的一半*/
  /*這裏減50px也是由於要把inner這個內部盒子的中心移到outer盒子的中心，和上一項同理*/
  top: calc(50% - 50px);
}
複製代碼
  • absolute + 負 margin
.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  /*這裏的margin操做一樣是爲了使內部盒子的中心與外部盒子的中心重合，以居中*/
  margin-top: -50px;
}
複製代碼
  • absolute + margin: auto
.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
複製代碼

該方案的原理是：使用了 CSS 中的定位屬性（absolute、fixed 等）後，若是 left 設置了具體值，沒有設置 right 和 width，那麼就會自動計算，把剩餘的空間分配給 right 和 width。若是 left、right 和 width 都設置了具體值，而且沒有佔滿橫向空間，那麼剩餘空間就處於待分配狀態，此時設置 margin: auto; 意味着把剩餘的空間分配給 margin，而且左右均分，因此就實現了水平居中，垂直方向同理。

注意：以上都須要固定居中元素的寬高。

left: 0; right: 0; 至關於 width: 100%;
top: 0; bottom: 0; 至關於 height: 100%;
複製代碼

css畫圖形

這裏放上我見過的幾個，不全，會一直補充。。。

1.畫一個三角型

<style> /* 寫一個以頂邊爲底的三角型 至少設置三條邊完成形狀*/ .parent{ width: 0; height: 0; border-top: 100px solid #000; border-right: 100px solid transparent; /* transparent透明屬性 */ border-left: 100px solid transparent; } </style>
</head>
<body>
    <div class="parent">
    <!--空盒子-->
    </div>
</body>
複製代碼

image.png

原理：
這裏給個加四個邊框的空盒子(就是沒有內容，面積全由邊框決定)

<style> .parent{ width: 0; height: 0; border-top: 100px solid black; border-right: 100px solid red; border-left: 100px solid yellow; border-bottom: 100px solid green; } </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
複製代碼

實現效果：

image.png

放大後的各邊框的邊界，就是這裏就能夠看到這樣，是斜着相銜接的，盒子沒有設置大小和內容，就能實現三角形效果

當只給設置兩個邊框時是什麼樣的三角形呢？

<style> .parent{ width: 0; height: 0; border-top: 100px solid black; /* border-right: 100px solid red; */ border-left: 100px solid yellow; /* border-bottom: 100px solid green; */ } </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
複製代碼

要有效果顯示，必須是相鄰的邊，下面的是top和left，是以下效果，若是是top和bottom，是沒有效果顯示的（動手試試）

image.png

2.畫一個扇形

與畫三角形同理，加一個border-radius

<style>
        /* 寫一個扇形 */
        .parent{
            width: 0;
            height: 0;
            border: 100px;
            border-style: solid;
            border-color: #000 transparent transparent;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="parent">
    </div>
</body>
複製代碼

image.png

3.畫一個正方體

<style> .cube { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: rotateX(-35deg) rotateY(30deg); } .side { position: absolute; width: 2em; height: 2em; background: rgba(255, 99, 71, 0.6); border: 1px solid rgba(0, 0, 0, 0.5); color: white; text-align: center; line-height: 2em; } .front { transform: translateZ(1em); } .bottom { transform: rotateX(-90deg) translateZ(1em); } .top { transform: rotateX(90deg) translateZ(1em); } .left { transform: rotateY(-90deg) translateZ(1em); } .right { transform: rotateY(90deg) translateZ(1em); } .back { transform: translateZ(-1em); } </style>
</head>

<body>
    <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
    </div>
</body>
複製代碼

效果：

image.png

4. 寫一個等寬高的自適應正方形

  • vw/vh
div{
  width :1vm;
  height:1vm;
}
複製代碼
  • 使用外層 relative，內層 absolute，與百分比設置寬度,實現裏面帶內容一塊兒自適應變化
<style> .outer { padding-top: 50%; height: 0; background: #ccc; width: 50%; position: relative; } .inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: red; } </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">HELLO</div>
    </div>
  </body>
複製代碼

image.png

實現了自適應

image.png

5. 畫一個箭頭

<style> div{ margin: 100px; height: 100px; width: 100px; border-top: 1px solid #000; border-left: 1px solid #000; transform: rotate(-0.125turn);/*指向左*/ /*設置0.375turn就是指向右*/ } </style>
</head>
<body>
    <div>
    </div>
</body>
複製代碼

image.png

說說flex佈局

這個能夠看看這篇文章 flex佈局複習筆記

說說css盒模型

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

標準盒模型：一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)

關於盒模型該知道什麼

待續...

參考文章： 水平垂直居中方法你會幾種？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程