《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

lylwyy2016 發布于2019-08-29 18:31 / 912人閱讀

摘要：塊級元素基本概念塊級元素是一個水平流上只能多帶帶顯示一個元素，多個塊級元素則換行顯示。其中內部尺寸由內部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設為是無效的。此時的就會有計算值，即使祖先元素的計算為也是如此。

塊級元素基本概念

塊級元素：是一個水平流上只能多帶帶顯示一個元素，多個塊級元素則換行顯示。

塊級元素”和“display 為 block 的元素”不是一個概念。

每個元素都兩個盒子，外在盒子和內在盒子。外在盒子負責元素是可以一行顯示，還是只能換行顯示；內在盒子負責寬高、內容呈現什么的。

display屬性值是inline-block的元素既能和圖文一行顯示，又能直接設置 width/height。因為有兩個盒子，外面的盒子是 inline 級別，里面的盒子是 block 級別

而盒子上的 width/height 作用在了內在盒子上。

width

width 的默認值是 auto，看似簡單的默認值至少包含了以下 4 種不同的寬度表現。
（1）充分利用可用空間。
（2）收縮與包裹。
（3）收縮到最小。
（4）超出容器限制

尺寸也分“內部尺寸”和“外部尺寸”。其中“內部尺寸”由內部元素決定；還有一類叫作“外部尺寸”寬度由外部元素決定。

width影響的外部尺寸

1、正常流寬度。
“外部尺寸”的塊級元素一旦設置了寬度，流動性就丟失了

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

對a標簽設置為block之后，自然會填充父元素，width: 100%不僅僅是多余，更會造成元素在流動性上的丟失。

所謂流動性，并不是看上去的寬度 100%顯示這么簡單，而是一種 margin/border/padding
和 content 內容區域自動分配水平空間的機制

eg.設置了一個塊級元素的width為100%之后，雖然看上去與width:auto沒有差別，都占父元素的100%，但是當為改元素設置border、margin時，其實際尺寸就會超過父元素，從而產生滾動條。

父元素

不限定width時，內容區域自動分配

限定時父元素出滾動條

設置了外部尺寸之后，會影響元素的寬度

2、格式化寬度

格式化寬度僅出現在“絕對定位模型”中，也就是出現在 position屬性值為 absolute 或 fixed（position默認值為static）的元素中。當 left/top 或 top/bottom 對立方位的屬性值同時存在的時候，元素的寬度表現為“格式化寬度”，其寬度大小相對于最近的具有定位特性（position 屬性值不是 static）的祖先元素計算

上面的普通流一樣，“格式化寬度”具有完全的流體性，也就是 margin、border、padding 和 content 內容區域同樣會自動分配水平（和垂直）空間。

width影響的內部尺寸

內部尺寸：假如這個元素里面沒有內容，寬度就是 0，那就是應用的“內部尺寸”。

內部尺寸的三種表現形式：

1、包裹性

對于一個元素，如果其 display 屬性值是 inline、inline-block，那么即使其里面內容
再多，只要是正常文本，寬度也不會超過容器。

eg.包裹性的實踐：文字少的時候居中顯示，文字超過一行的時候居左顯示

.box { 
 text-align: center; 
} 
.content { 
 display: inline-block; 
 text-align: left; 
}

2、首選最小寬度

所謂“首選最小寬度”，指的是元素最適合的最小寬度。
在 CSS 世界中，圖片和文字的權重要遠大于布局，有圖文存在時，不會讓width：auto為0的

（3）最大寬度
“最大寬度”實際等同于“包裹性”元素設置 white-space:nowrap 聲明后的寬度。

實際運用的話，我認為跟flex布局有點像，用于不定寬度內元素的橫向布局。

寬度分離原則

所謂“寬度分離原則”，就是 CSS 中的 width 屬性不與影響寬度的 padding/border（有
時候包括 margin）屬性共存，也就是不能出現以下的組合：

.box { width: 100px; border: 1px solid; }

或者

.box { width: 100px; padding: 20px; }

分離，width 獨立占用一層標簽，而padding、border、margin 利用流動性在內部自適應呈現。

缺點：多使用了一層標簽， HTML 的成本也是成本，過深的嵌套是會增加頁面渲染和維護成本的。但是一般來說，只要給最外面控制寬度的一層標簽再加一層，所以與后期維護相比，成本可忽略不計。

改變 width/height 作用細節的 box-sizing

其實對于寬度分離來說，在決定寬度的div上設置box-sizing就可以不再外面套一層標簽了。所起到的效果是一樣的。

height height:100%

。對于 width 屬性，
就算父元素 width 為 auto，其百分比值也是支持的；但是，對于 height 屬性，如果父元素height 為 auto，只要子元素在文檔流中，其百分比值完全就被忽略了。
如果包含塊的高度沒有顯式指定（即高度由內容決定），并且該元素不是絕對定位，則計算值為auto。

"auto" * 100/100 = NaN

所以子元素的高度設為100%是無效的。

如何讓元素支持 height:100%效果

（1）設定顯式的高度值。
（2）使用絕對定位。

div { 
 border: 1px solid blue;
 height: 100%; 
 position: absolute; 
}

此時的 height:100%就會有計算值，即使祖先元素的 height 計算為 auto 也是如此。

需要注意的是，絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區別的，區別
在于絕對定位的寬高百分比計算是相對于 padding box 的，也就是說會把 padding 大小值計算在內，但是，非絕對定位元素則是相對于 content box 計算的。

父元素

子元素

CSS min-width/max-width和min-height/max-height 二三事

min-width/max-width出現的場景一定是自適應布局或流體布局中。

.container {
    min-width: 1200px;
    max-width: 1400px;
}

為了避免圖片在移動端展示過大影響體驗，經常會有下面的max-width限制：

img {
    max-width: 100%;
    height: auto !important;
}

height:auto 是必需的，否則，如果原始圖片有設定 height，max-width 生效的時候，
圖片就會被水平壓縮。

max-width 會覆蓋 width，而且這種覆蓋不是普通的覆蓋，是會超越！important的效果

任意高度元素的展開收起動畫技術

.element { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .25s; 
} 
.element.active { 
  max-height: 666px; /* 一個足夠大的最大高度值 */ 
}

其中展開后的 max-height 值，我們只需要設定為保證比展開內容高度大的值就可以，因為max-height 值比 height 計算值大的時候，元素的高度就是 height 屬性的計算高度，在本交互中，也就是 height:auto 時候的高度值。于是，一個高度不定的任意元素的展開動畫效果就實現了。

不過如果 max-height 值太大，在收起的時候可能會有“效果延遲”的問題。

GPU云服務器云服務器基本元素 html基本元素 css元素云主機與購買筆記本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114385.html

《CSS世界》筆記二：盒模型四大家族

摘要：基本上，等高布局只能滿足欄的情況，除非正好是等比例的，那還可以使用實現最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內聯元素與對齊上一篇：《CSS世界》筆記一：流/元素/尺寸下一篇：《CSS世界》筆記三：內聯元素與對齊寫在前面在讀《CSS世界》第四章之前，粗淺的認為盒模型無非是margin/border/padding/content而已，再多無非在不同box-sizing...

icyfire 2019-08-29 16:09 評論0 收藏0
《CSS世界》筆記一：流/元素/尺寸

摘要：一流體布局引出的幾種網頁布局方式布局方式描述特點場景靜態布局，傳統設計，網頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實現的各類布局效果。下一篇：《CSS世界》筆記二：盒模型四大家族寫在前面初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時候除了工作，其他時間基本都在這本書里了，因為它的確吸引人。之前看過《CSS揭密》...

hizengzeng 2019-08-30 15:54 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

MasonEast 2019-08-02 12:03 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

趙連江 2019-08-29 17:20 評論0 收藏0