大前端之路-快速入門css佈局

時間 2020-03-03

標籤前端之路快速入門 css 佈局欄目 CSS 简体版

原文原文鏈接

本文適用讀者範圍

適用前端初學者，尤爲是移動端轉大前端，平時工做weex和rn 爲主，但遲遲找不到css佈局感受的。讀了這篇文章應該很快就能上手工做了。介紹的東西都是平時移動端開發中常見的。有興趣的能夠再根據文中的內容自行拓展。css

w3cSchool真的是垃圾，你看那個css字典，看完了也是找不到任何佈局感受的。 不如看這篇快速入門之後先上手快速開發，而後以點到面再拓展細節。前端

快速理解css中的佈局重要概念

如何快速理解盒模型

<div class="box"></div>
 .box {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  padding: 30px;
  margin: 40px;
  background: yellow;
}
複製代碼

效果以下；android

默認狀況下width屬性定義的是內容的寬度，不包含邊距、邊框bash

width的計算方式是由box-sizing屬性來定義的，若是設置一個元素爲box-sizing: border-box; ，元素的內邊距和邊框就會包含在width寬度內。weex

這裏與android 實際上是不同的，android中一個view的寬度高度實際上是包含了padding 可是不包含margin的佈局

塊元素和行內元素

有android基礎的理解這個就很快了。塊元素就是一個vertical屬性的linearylayout 而行內元素則是一個hor 屬性的LinearLayout 無非就是一個子元素垂直排列另一個水平排列罷了。學習

塊元素的特色測試

每一個塊元素都重新的一行開始，獨佔一行字體
元素的高度、寬度、行高以及頂和底邊距等屬性均可設置flex
默認的高度與父元素的寬度一致，即width默認爲100%
能夠容納行內元素和其餘塊元素

行內元素的特色：

和其餘行內元素都在一行上
元素的高度、寬度、行高及頂部和底部邊距等屬性不可設置
元素不能設置高度，寬度就是它包含的文字或圖片的寬度
行內元素只能容納文本或者其餘行內元素

在CSS中將行內元素能夠經過display: block設置爲以塊元素的方式顯示，咱們還能夠繼續設置該元素的長寬等本來不能設置的屬性。一樣，咱們也能夠設置塊元素的display屬性爲display: inline，這樣塊元素就能夠再同一行顯示了

android中的visiable 以及 gone 屬性在css中也有對應

當一個元素的display屬性被設爲none時，該元素不會被渲染，也不會佔位，就像不存在同樣。對佈局不會產生任何影響。它和visibility屬性不同。把display設置成none不會保留元素本該顯示的空間，可是visibility: hidden;還會保留

最後一種重要的display屬性

display: inline-block修飾的元素稱之爲行內塊元素，它們會像行內元素同樣在同一行顯示，又能夠像塊元素同樣設置高、寬、行高、邊距。

疊加布局

所謂疊加布局，在移動端就是簡單的兩個view 疊加在一塊兒，有重合的部分。在android中咱們常常在framelayout或者相對佈局layout中實現這種效果。

如圖所示：

源碼以下，咱們只要謹記關鍵字是 position: relative 便可。

<div>
        <div class="r1"></div>
        <div class="r2"></div>
    </div>
複製代碼

.r1{
    height: 200px;
    width: 50%;
    position: relative;
    background: red;
}

.r2{
    height: 200px;
    width: 70%;
    position: relative;
    background: blue;
    top:-50px;
    left:20px;
}
複製代碼

固定位置的佈局

相似在android中，咱們每每須要單獨寫一個window ，不跟隨主xml文件。這樣無論個人主界面怎麼滑動，我這個單獨的窗口都是固定在屏幕的一個位置。

代碼：

.t1 {
  width: 100%;
  height: 2000px;
  background: red;
}

.t2 {
    /* 就是這個fixed起到做用而已 */
  position: fixed;
  bottom: 50%;
  right: 0;
  width: 200px;
  background-color: white;
}
複製代碼

跟隨父佈局移動的相對佈局。

<div class="t1">
      <div class="t2">隨便你怎麼滑動，我都在我父元素的內部保持不動</div>
    </div>
複製代碼

.t1 {
  width: 100%;
  height: 200px;
  background: red;
  /* 前面不要遺漏這個 不然你子佈局的那些位置屬性就是相對於整個窗口而言了 */
  position: relative;
}

.t2 {
  /* 就是這個absolute起到做用而已 可是他須要他的父元素 position 爲 非static的 也就是說
  父元素的position不能爲默認值  */
  position: absolute;
  bottom: 20px;
  left: 10px;
  width: 200px;
  background-color: green;
}
複製代碼

若是把父佈局的position刪除之後就變成

float- 變動圖層的覆蓋關係

<div>
    <div class="t1">我原本應該在下面 被覆蓋</div>
    <div class="t2">我原本應該在上面 覆蓋下面</div>
  </div>
複製代碼

例如這樣的div 由於t2 這個div 是在t1 後面寫的，因此理應t2 在t1之上。

.t1 {   
  width: 50px;
  height: 200px;
  background: red;
  /* float: left; */
}

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
}
複製代碼

若是咱們把上面t1 註釋掉的那行代碼打開：

效果立刻就變成了 t1 覆蓋到t2 上面了。

這裏固然還能夠用 clear 屬性來清除這種浮動

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  clear: left
}
複製代碼

用float 來體會下啥叫脫離文檔流

<div class="parent">
    <div class="t1">1</div>
    <div class="t2">2</div>
    <div class="t3">3</div>
  </div>
複製代碼

.parent {
  /* display: inline; */
  background: red;
  /* height: 200px; */
}
.t1 {
  width: 200px;
  height: 400px;
  background: yellowgreen;
  float: left;
}
.t2 {
  width: 200px;
  height: 400px;
  background: wheat;
  float: left;
}
.t3 {
  width: 200px;
  height: 400px;
  background: green;
  float: left;
}
複製代碼

稍微改一下增長一行代碼便可讓父佈局高度正常

<div class="parent">
      <div class="t1">1</div>
      <div class="t2">2</div>
      <div class="t3">3</div>
      <!-- 清除浮動 便可讓父佈局 有高度 -->
      <div style="clear:both;"></div>
    </div>
複製代碼

文字環繞效果

這多是css中爲數很少的，實現起來比android裏面要方便多的效果了。實現原理爲：

若是該元素的下一個兄弟元素中有內聯元素（一般是文字），則會圍繞該元素顯示，造成相似"文字圍繞圖片"的效果。即雖然浮動會讓元素脫離文檔流，可是文本內容會受到浮動元素的影響。

<div>
    <div class="parent">
      <div class="t1"></div>
      <div
        class="t2"
      >23123123123123123131231231231231231231231231312312312312312313123123123123123131231231312312312312312313123123123123123131231231231231231312313131231231231231231231231231231sdasdasdasdasdasda13131231231231231231231231231231sdasdasdasdasdasda</div>
    </div>
  </div>
複製代碼

.parent {
  text-align: center;
  width: 300px;
  background: blueviolet;
}
.t1 {
  width: 100px;
  height: 100px;
  background: red;
  /* 一個float 就解決了全部問題 真是比android的佈局dsl方便啊 */
  float: left;
}

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  /* 下面這個保證div中的文字 顯示不下就自動換行 */
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
複製代碼

img外面包裹div

<div class="test">
        <img
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583071176313&di=5d94f8d41a598ec2e4a3a2e80de0dd14&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20107%2F571%2Fw640h731%2F20200229%2Fe016-iqfqmas5577811.jpg"
        />
    </div>
    
複製代碼

.test {
  width: 500px;
  background: red;
}
img {
  width: 150px;
  height: 150px;
  /* vertical-align: middle; */
}
複製代碼

看看效果

爲何下面有個空白？這是什麼鬼？

圖片的 baseline 是圖片的下緣，它和所在行的 baseline 是對齊的，而所在行的 baseline 離父元素的下邊是有距離的（這個涉及到字體知識），這個距離就是你看到的空隙。

這個問題有不少種解法

一般推薦

img {
  width: 150px;
  height: 150px;
  /* 這種解法比較經常使用 通常行內元素 均可以考慮用這種方式對齊 */
  vertical-align: middle;
}
複製代碼

height 與 line-height

實際上line-height 這個東西在css佈局中是個很麻煩的屬性（其實從這裏就能看出來css是一門多麼愚蠢的dsl語言），這裏只說一些平時咱們應該注意的地方。

<div>
    <div class="test1">
      test1
      <br />test1
    </div>

    <br />
    <br />
    <div class="test2">
      test2
      <br />test2
    </div>
  </div>
複製代碼

.test1 {
  line-height: 20px;
  background-color: red;
}
.test2 {
  height: 20px;
  background-color: green;
}
複製代碼

div標籤中直接寫文字要注意什麼？

<div>
    <div class="test1">test1</div>

    <br />
    <br />
    <div class="test2">test1</div>
  </div>
複製代碼

.test1 {
  font-size: 0;
  line-height: 32px;
  border: 1px solid red;
}
.test2 {
  font-size: 32px;
  line-height: 0;
  border: 1px solid yellow;
}
複製代碼

單行文字垂直居中

<div>
    <p class="t1">這是一行文字</p>
  </div>
複製代碼

.t1 {
  line-height: 50px;
  border: 1px dashed #cccccc;
  padding-left: 5px;
  font-size: 12px;
}
複製代碼

父元素高度不固定的多行文字垂直居中

<p class="t1">
      <span style="font-size:12px;">
        多行文字的第一行
        <br />這裏是第二行，用來測試多行的顯示效果。
      </span>
    </p>
複製代碼

.t1 {
  border: 1px dashed #cccccc;
  padding-left: 5px;
}
.t1 span {
  display: inline-block;
  vertical-align: middle;
}
複製代碼

快速學習weex和RN中經常使用的佈局技巧

這些佈局效果,在移動原生開發中很是常見,可是若是用傳統的css佈局屬性來寫會比較麻煩,使用比較新潮的flex來佈局效果則特別好,且簡單.剛好 weex和rn 都對flex的支持比較好.因此這裏重點介紹一下flex佈局的實際應用

垂直居中

<div class="dad">
    <div class="son"></div>
  </div>
  
  
  .dad {
  /* 重點就是要開啓這個flex  */
  display: flex;
  /* 而後設置居中對齊 */
  justify-content: center;
  /* 設置子容器如何沿交叉軸排列 */
  align-items: center;
  background: red;
  width: 100%;
  height: 200px;
}

.son {
  width: 100px;
  height: 100px;
  background: green;
}
複製代碼

水平排列

<div class="parent">
    <div class="t1"></div>
    <div class="t2"></div>
    <div class="t3"></div>
  </div>
  
  
  .parent {
  /* 重點就是要開啓這個flex  */
  display: flex;
  /* 而後設置從左到右 */
  justify-content: flex-start;
  /* 設置子容器如何沿交叉軸排列 其實就是縱軸排列的順序  */
  align-items: center;
  background: red;
  width: 100%;
  height: 200px;
}

.t1 {
  width: 100px;
  height: 100px;
  background: green;
}
.t2 {
  width: 100px;
  height: 100px;
  background: blueviolet;
}
.t3 {
  width: 100px;
  height: 100px;
  background: chocolate;
}
複製代碼

固然還有flex-end 屬性能夠本身看看效果

首尾間距+子元素之間留相等間距

首元素和尾元素與父元素的間距是子元素之間間距的一半

justify-content: space-around;

複製代碼

首尾不留間距

justify-content: space-between;

複製代碼

縱向對齊的幾種方式

align-items: flex-start;

複製代碼

align-items: flex-end;

複製代碼

子元素按比例分割佈局

.t1 {
  flex: 1;
  /* width: 100px; */
  height: 100px;
  background: green;
}
.t2 {
  flex: 2;
  /* width: 100px; */
  height: 200px;
  background: blueviolet;
}
.t3 {
  flex: 3;
  /* width: 100px; */
  height: 300px;
  background: chocolate;
}
複製代碼

變動主軸方向

前面咱們講的主要是橫向對應 justify-content 縱向對應 align-items ，這實際上是默認了橫向爲主軸，縱向爲交叉軸。某些狀況下咱們能夠更改主軸的設定來達到其餘的效果

.parent {
  display: flex;
  justify-content: center;
  align-items: stretch;
  // 設置主軸爲 列 將白了就是縱向分割    
  flex-direction: column;
  background: red;
  width: 100%;
  height: 200px;
}

.t1 {
  flex: 1;
  /* width: 100px; */
  /* height: 100px; */
  background: green;
}
.t2 {
  flex: 2;
  /* width: 100px; */
  /* height: 200px; */
  background: blueviolet;
}
.t3 {
  flex: 3;
  /* width: 100px; */
  /* height: 300px; */
  background: chocolate;
}
複製代碼

橫撲佈局自動換行

如圖，第三個展現不下就自動換行展現

.parent {
  display: flex;
  flex-wrap: wrap;
  background: red;
  width: 500px;
  height: 200px;
}

.t1 {
  width: 100px;
  height: 100px;
  background: green;
}
.t2 {
  width: 200px;
  height: 100px;
  background: black;
}
.t3 {
  width: 300px;
  height: 100px;
  background: chocolate;
}
複製代碼