css佈局系列1——盒模型佈局

君臨_發表於2020-12-17
CSS模型

明確基本概念

網頁的佈局類似於在一個大盒子中擺放各不相同的小盒子。在佈局之前，首先要明確幾個概念：

1. 塊元素：在頁面中獨佔一行，高度預設被內容（子元素）撐開，寬度預設為父元素的100%，也即auto（width和height的預設值不是0，而是auto）。

2. 內聯（行內）元素：在頁面中不獨佔一行，只佔自身內容的大小，不能設定寬和高。

3. 文件流：網頁是一個多層結構，一層摞著一層。我們通過螢幕看到的網頁就是網頁的最頂部，而文件流是最底下的一層。塊元素和行內元素都擺放在文件流中（在不開啟浮動、絕對定位和固定定位的時候）。


盒模型

下圖很好的解釋了盒模型：
盒模型

盒模型水平方向上的佈局

水平方向上的佈局必須要滿足等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素內容區的寬度

水平方向上的佈局必須滿足該等式。如果該等式不滿足，稱為過度約束。如果發生過度約束，等式將自動進行調整，調整規則為：

如果上述等式中屬性的屬性值中沒有為auto的，則預設調整margin-right的值以使等式成立。
【舉例】屬性值中沒有auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:100px;
      height:100px;
      background-color: coral;
      margin-left:100px;
      }

屬性值中沒有auto
如果上述等式中屬性的屬性值中有auto的,要分情況考慮：

【說明】以上屬性值可以為auto的屬性有三個：分別是margin-left,margin-right,width

1、如果有一個屬性值為auto的，則預設調整值為auto屬性的屬性值。
【舉例】margin-left為auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:100px;
      height:100px;
      background-color: coral;
      margin-left:auto;   /*margin-left調整為auto*/
      margin-right:200px;
      }

margin-left為auto
2、如果有其中一個外邊距和width的屬性值為auto，則width的值調整至最大，外邊距的值調整為0 。
【舉例】margin-left和width調整為auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:auto;  /*寬度也調整至auto*/
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right調整至auto*/
      margin-right:200px;
      }

width和其中一個外邊距為auto
3、如果三個值都為auto，則將width的值調整為最大，將外邊距的值調整為0。
【舉例】margin-left,margin-right,width都為auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:auto;  /*寬度也調整至auto*/
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right調整至auto*/
      margin-right:auto;  /*margin-left調整至auto*/
     }

width、margin-left和margin-right都為auto
4、如果width的值固定，兩個外邊距的值為auto,則調整margin-left和margin-right同樣的大小，使元素水平居中。 一般用來做元素水平居中的效果。
【舉例】寬度固定，外邊距為auto

.box1{
      width:800px;
      height:100px;
      background-color: aqua;
      }
.box2{
      width:200px;  /*寬度固定*/
      height:100px;
      background-color: coral;
      margin-left:auto;  /*margin-right調整至auto*/
      margin-right:auto;  /*margin-left調整至auto*/
      }

寬度固定，外邊距為auto


盒模型垂直方向上的佈局

由於垂直方向上，父元素的高度預設被子元素撐開，所以垂直方向上的佈局並不複雜。



與盒模型佈局有關的三個屬性

1.overflow

在垂直方向上佈局，如果子元素的高度超過父元素的高度，子元素會溢位，overflow的作用就是用來設定父元素如何處理溢位的子元素。

可選值：

  • visiable：預設值 子元素會從父元素中溢位，在父元素外部的位置顯示。
  • hidden：溢位的內容會被裁剪，不顯示。
  • scroll：生成兩個滾動條，通過滾動條來顯示完整內容。
  • auto：根據需要生成滾動條。
    除此之外，還可以設定overflow-x，overflow-y。

2.visibility

visibility用來設定元素的顯示狀態。

可選值：

  • visible：預設值，元素在頁面中正常顯示。
  • hidden：元素在頁面中隱藏不顯示，但是依然佔據頁面的位置。

3.display

display用來顯示元素顯示的型別。

可選值：

  • inline：將元素設定為塊元素。
  • block：將元素設定為塊元素。
  • inline-block：行內塊元素，既不會獨佔一行，也可以設定寬和高。【小細節】如果兩個相鄰的行內塊元素，兩個塊元素中間會有一個空隙，是空格導致的，如果把兩個元素之間的所有空格刪掉，就不會有空隙了。儘量不使用這個值。
  • table：將元素設定為一個表格。
  • none：元素不在頁面中顯示。

注意：visibility:hidden和display:none的顯著區別

display:none和visibility:hidden，都能夠將元素隱藏。但是visibility:hidden隱藏的元素在頁面中仍佔據著位置，也就是說該元素後面的元素會給這個設定visibility:hidden的元素空出位置。而display:none隱藏的元素不會再佔據著頁面的位置。



使用重置樣式表（reset stylesheets）清除瀏覽器的預設樣式

通常情況下，瀏覽器都會自動為元素設定一些預設樣式，這些預設樣式會影響頁面的佈局。所以在編寫網頁的時候必須要去除瀏覽器的預設樣式（PC端的頁面）。
去除瀏覽器預設樣式需要在頁面中引入以.css結尾的重疊樣式表檔案。

去除預設樣式的方法：這裡分享兩個適合學習時候用的。在工作中具體會不會用？用哪種？取決於公司。

  1. reset.css 2011年版本：直接去除了瀏覽器的預設樣式

  2. normalize.css 2018年版本：對瀏覽器的預設樣式進行了統一

    兩種方式的具體區別點這裡。

【注意】在引入重置樣式表的時候，要在其他引入的css檔案之前和<style>標籤之前引入重置樣式表！！！

程式設計小白一直在學習，一直在路上。寫文章的目的純粹為了總結個人所學，如有不妥之處，望大家批評指正，我將虛心接受。希望我的分享也能給看到這篇文章的你一點收穫。

相關文章