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

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

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

看文章之前，先來看兩個(gè)例子。這是我們?cè)陧?xiàng)目中最常見的項(xiàng)目布局方式。

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

案例二：常見的菜單導(dǎo)航

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

// 案例一
<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">導(dǎo)航1</a>
    <a href="" class="nav">導(dǎo)航2</a>
    <a href="" class="nav">導(dǎo)航3</a>
</div>
.demo2 {
  width: 200px;
  background-color: cadetblue;
}
.nav {
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
  color: #fff;
}

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

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

或者你想把三個(gè)元素?cái)U(kuò)展成四個(gè)，這個(gè)時(shí)候你就需要手動(dòng)計(jì)算每個(gè)元素的寬度。這樣好像很是麻煩。

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

在剛開始學(xué)習(xí) CSS 時(shí)我們都會(huì)經(jīng)常聽到這么一個(gè)概念叫「文檔流」，很多人并沒有深究文檔流是為何物。

那什么是「文檔流」呢？

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

文檔流

文檔流：是引導(dǎo)網(wǎng)頁(yè)中的元素排列和布局的，它默認(rèn)的方向是從左向右，從上而下。

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

不僅如此，你也經(jīng)常會(huì)聽到「脫離文檔流」，比如浮動(dòng)，絕對(duì)定位等都可以脫離文檔流，而脫離文檔流不是本文要說的重點(diǎn)，所以就不展開多說，今天主要是聊一聊「流的自適應(yīng)性」。

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

塊級(jí)元素默認(rèn)會(huì)充滿整個(gè)屏幕，具有自適應(yīng)性，而內(nèi)聯(lián)元素默認(rèn)則是水平排列。

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

在項(xiàng)目中會(huì)經(jīng)常碰到 display：block 這個(gè)屬性。但注意，它與塊級(jí)元素不是同一個(gè)東西。display：table，也屬于塊級(jí)元素。

失去流動(dòng)性

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

比如以前我會(huì)寫出這樣的 CSS：

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

如果明白流的特性的話，其實(shí) width: 100%; 這個(gè)屬性是多余的，因?yàn)閴K級(jí)元素在流布局中默認(rèn)是自動(dòng)充滿容器的。

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

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

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

對(duì)，你沒有看錯(cuò)，只要有了寬度屬性，它就會(huì)失去了它最牛逼的流動(dòng)性。這樣就變的毫無價(jià)值。

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

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

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

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

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

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

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

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

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

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

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

原來是因?yàn)?，?dāng)元素不設(shè)置寬度屬性時(shí)或者是 width：auto ，元素的margin、border、padding 可以自動(dòng)分配空間。

一旦，我們?cè)O(shè)置了固定的寬度屬性，就算是100%，它就會(huì)根據(jù) CSS 的盒模型進(jìn)行計(jì)算。從而失去了自動(dòng)分配空間的流動(dòng)性。

至于如何計(jì)算的細(xì)節(jié)，因?yàn)楹心Ｐ偷牟煌?，所以寬度的作用就不同，它包含的東西也就不一樣。具體不在多說。

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

因?yàn)檫@里我提到了盒模型，你會(huì)想到把上面的案例，改變下盒模型不就行了嗎？比如我們這么做：

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

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

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

這個(gè)時(shí)候你就可以嘗試?yán)昧鞯奶匦裕瑏砗芎玫膶?shí)現(xiàn)這個(gè)方案。

寬度分離

這時(shí)候我們可以利用流的特性，進(jìn)行寬度分離。

<div class="demo">
    <div class="item">
        <div class="child">內(nèi)容</div>
    </div>
    <div class="item">
        <div class="child">內(nèi)容</div>
    </div>
    <div class="item">
        <div class="child">內(nèi)容</div>
    </div>
    <div class="item">
        <div class="child">內(nèi)容</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;
}

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

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

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

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

廣告

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