CSS文檔流技巧是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹“CSS文檔流技巧是什么”，在日常操作中，相信很多人在CSS文檔流技巧是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS文檔流技巧是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

廬山網站建設公司創(chuàng)新互聯(lián)公司,廬山網站設計制作，有大型網站制作公司豐富經驗。已為廬山近千家提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站建設要多少錢，請找那個售后服務好的廬山做網站的公司定做！

看文章之前，先來看兩個例子。這是我們在項目中最常見的項目布局方式。

案例一：多個容器按照相同間距水平排列。

案例二：常見的菜單導航

看到這兩個案例時，你可以先短暫的想想平時都是如何實現(xiàn)的，很多同學的答案應該是這樣的。

// 案例一
<div class="demo">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.demo {
  padding: 1em 0;
  width: 470px;
  background-color: #e5e5e5;
  overflow: hidden;
}
.item {
  float: left;
  margin-left: 10px;
  width: 150px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #999999;
  box-sizing: border-box;
}
.item:first-child {
  margin-left: 0;
}
//案例二
<div class="demo2">
    <a href="" class="nav">導航1</a>
    <a href="" class="nav">導航2</a>
    <a href="" class="nav">導航3</a>
</div>
.demo2 {
  width: 200px;
  background-color: cadetblue;
}
.nav {
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
  color: #fff;
}

效果我們是做到了，但是這里所有像素都是你自己固定計算的。

比如第一個例子中，父容器的寬度為 470 = 3*150 + 20。如果在不使用 flex 布局的情況下，你想讓三個元素自適應屏幕寬度有什么好辦法？

或者你想把三個元素擴展成四個，這個時候你就需要手動計算每個元素的寬度。這樣好像很是麻煩。

那今天就來說說，如何利用「流」的特性，解決平時在項目中遇到的一些布局問題。

在剛開始學習 CSS 時我們都會經常聽到這么一個概念叫「文檔流」，很多人并沒有深究文檔流是為何物。

那什么是「文檔流」呢？

如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入web前端學習交流秋秋圈：767273102 里面可以與大神一起交流并走出迷茫。新手可免費領取學習資料，看看前輩們是如何在編程的世界里傲然前行不停更新新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入

文檔流

文檔流：是引導網頁中的元素排列和布局的，它默認的方向是從左向右，從上而下。

而「流」具有較大的一個特點就是自適應性。你可以把它想象成像水流一樣，當水流倒入一個容器時，它會自動充滿整個容器。而 CSS 中的文檔流，其表現(xiàn)是一致的，有異曲同工之妙。

不僅如此，你也經常會聽到「脫離文檔流」，比如浮動，絕對定位等都可以脫離文檔流，而脫離文檔流不是本文要說的重點，所以就不展開多說，今天主要是聊一聊「流的自適應性」。

文檔流中有兩個比較重要的概念：塊級元素（block）、內聯(lián)元素（inline），對應到最具代表性的元素就是<div>、<span>。

塊級元素默認會充滿整個屏幕，具有自適應性，而內聯(lián)元素默認則是水平排列。

你可以想象為塊級元素就想是水流一樣充滿容器，而內聯(lián)元素就是漂浮在水里按照從左到右排列的物體。

在項目中會經常碰到 display：block 這個屬性。但注意，它與塊級元素不是同一個東西。display：table，也屬于塊級元素。

失去流動性

到這里你應該明確了流的特性，其實很多人都知道「文檔流」這個概念，但卻沒有好好的去利用，從而給自己增加了一些不必要的麻煩。

比如以前我會寫出這樣的 CSS：

span {
    display: block;
    width: 100%;
}

如果明白流的特性的話，其實 width: 100%; 這個屬性是多余的，因為塊級元素在流布局中默認是自動充滿容器的。

你是否也中槍寫過這種 CSS ？歡迎在評論區(qū)說出你的問題。

但如果僅僅只是多了一條屬性，其實也就是增加了一行代碼顯得不那么簡潔而已，可事情總是沒有那么簡單。

一旦你給元素添加了寬度（width）屬性，它就會失去流動性，即便是它的值為 100%，也是會失去。

對，你沒有看錯，只要有了寬度屬性，它就會失去了它最牛逼的流動性。這樣就變的毫無價值。

比如開頭中導航案例，如果給導航加入一些邊距。就會出現(xiàn)不好的效果。

.nav {
  display: block;
  padding: 10px; //添加的邊距
  width: 100%;
  border-bottom: 1px solid #000;
  color: #fff;
}

而如果我們把寬度屬性去掉，就會得到完美的展示效果。

.nav {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #000;
  color: #fff;
}

可能你之前并沒有意識到，加入寬度屬性帶來的危害。

但當你看到這篇文章之后，你應該警惕寬度給流動性帶來的危害，盡量少用寬度，甚至是「無寬度」。

在此之前我相信很多伙伴在項目匯總遇到過超出寬度的情況，但很少有人去探究，所以很多人都會發(fā)揮他特有的計算能力，然后寫出如下代碼。

.nav {
  display: block;
  padding: 10px;
  width: 180px; // 200px - 10px*2
  border-bottom: 1px solid #000;
  color: #fff;
}

貌似也實現(xiàn)了該有的功能，不過這種缺點我們顯而易見，就是太過固定，任何一點的改動都需要你重新計算。

可能有人會說，兄die，我的計算能力很驚人，你管的著嗎，好吧這，波算我輸。

那為什么加了寬度屬性會超出，而不加寬度屬性就可以了呢？

原來是因為，當元素不設置寬度屬性時或者是 width：auto ，元素的margin、border、padding 可以自動分配空間。

一旦，我們設置了固定的寬度屬性，就算是100%，它就會根據(jù) CSS 的盒模型進行計算。從而失去了自動分配空間的流動性。

至于如何計算的細節(jié)，因為盒模型的不同，所以寬度的作用就不同，它包含的東西也就不一樣。具體不在多說。

兄die，這時候知道「無寬度」有多牛逼了吧。

因為這里我提到了盒模型，你會想到把上面的案例，改變下盒模型不就行了嗎？比如我們這么做：

.nav {
  display: block;
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid #000;
  box-sizing: border-box; //改變盒模型
  color: #fff;
}

確實在這個案例中是可以這么用的，但是如果想實現(xiàn)案例一的水平有間距排列問題，就有點力不從心了。

由于 CSS 盒模型，是不計算 margin 的，水平排列可以很容易實現(xiàn)，但是想要有相同間距，就比較難以實現(xiàn)。

這個時候你就可以嘗試利用流的特性，來很好的實現(xiàn)這個方案。

寬度分離

這時候我們可以利用流的特性，進行寬度分離。

<div class="demo">
    <div class="item">
        <div class="child">內容</div>
    </div>
    <div class="item">
        <div class="child">內容</div>
    </div>
    <div class="item">
        <div class="child">內容</div>
    </div>
    <div class="item">
        <div class="child">內容</div>
    </div>
</div>
.demo {
  padding: 1em;
  background-color: #e9e9e9;
  overflow: hidden;
}
.item {
  float: left;
  width: 25%;
}
.child {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

你會發(fā)現(xiàn)，無論你如何改變它的 margin、padding、border 它都會自動填充分配空間，再也不會出現(xiàn)布局錯亂，超出等等一系列的情況。

到此，關于“CSS文檔流技巧是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享名稱：CSS文檔流技巧是什么-創(chuàng)新互聯(lián)
當前網址：http://muchs.cn/article42/dsshhc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、定制網站、網站收錄、靜態(tài)網站、品牌網站建設、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)