《CSS世界》筆記一：流/元素/尺寸

hizengzeng 發布于2019-08-30 15:54 / 2731人閱讀

摘要：一流體布局引出的幾種網頁布局方式布局方式描述特點場景靜態布局，傳統設計，網頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實現的各類布局效果。

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

寫在前面

初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時候除了工作，其他時間基本都在這本書里了，因為它的確吸引人。之前看過《CSS揭密》，不過是對CSS3知識的講解和一些應用，但是《CSS世界》這本書將CSS作為一個體系講解，顛覆了以往對CSS的認知。這是“二進宮”了，想著我是應該寫點什么的。

一、流體布局引出的幾種網頁布局方式

布局方式	描述	特點	場景
靜態布局	Static Layout，傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。一般需要設置最小寬度	不能根據用戶的屏幕尺寸做出不同的表現	傳統PC網頁
流式布局	Liquid Layout，頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）	網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用）	屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變
自適應布局	Adaptive Layout，使用@media分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍	屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化	-
響應式布局	Responsive Layout，一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果	每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變	多終端頁面
彈性布局	rem/em布局，包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位	理想狀態是所有屏幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應	移動端

結論：

如果只做pc端，那么靜態布局（定寬度）是最好的選擇；

如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；

如果pc，移動要兼容，而且要求很高那么響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。

《CSS世界》中，提出了“流體布局”的概念：

所謂“流體布局”，指的是利用元素“流”的特性實現的各類布局效果。因為“流”本身 具有自適應特性，所以“流體布局”往往都是具有自適應性的。但是，“流體布局”并不等同于 “自適應布局”。“自適應布局”是對凡是具有自適應特性的一類布局的統稱，“流體布局”要狹窄得多。例如，表格布局也可以設置為100%自適應，但表格和“流”不是一路的，并不屬于“流體布局”。

通俗的說，流體布局就是在width:auto;或者格式化寬/高中，通過設定margin/border/padding來影響content的布局的方式

二、為什么 list-item 元素會出現項目符號

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

display	外在盒子	容器盒子	表現
inline-block	inline	block	尺寸可定義，一行顯示多個
block	block	block	尺寸可定義，單行顯示
inline	inline	inline	尺寸不可定義，一行顯示多個

相對應的，外在盒子有外部尺寸，內部盒子有內部尺寸。外部尺寸盒子表現為“充分利用可用空間”，既有“流”的特性

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

如何創建具有流動性的盒子：

width:auto; 的塊級盒子

格式化寬/高的盒子

三、width 注意點

寬度值的作用區域與當前盒子的box-sizing相關，默認的box-sizing: content-box;，寬度值等于盒子content寬度，添加padding和border時盒子占位會擴大。box-sizing: border-box;時，寬度值等于盒子border*2+padding*2+content，占位不變，內容區域會改變。

絕對定位的寬高百分比計算是相對于 padding box 的，也就是說會把 padding 大小值計算在內，但是，非絕對定位元素則是相對于 content box 計算的

width:100%;的設置會影響盒子的“流動性”，

四、max-/min- width/height

特性1：超越!important；超越!important指的是max-width會覆蓋width，即使在width上添加!important


img { max-width: 256px; }

// 此刻，圖片展示寬度為256px

特性2：超越最大；超越最大指的是min-width覆蓋max-width，此規則發生在min-width和 max-width沖突的時候

.container {
    min-width: 1400px;
    max-width: 1200px;
}
// 此刻，container展示為至少1400px

應用：

/* 使用max-height實現任意高度元素的展開收起動畫 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}

五、內聯盒模型基本概念理解

內容區域：文本選中的背景色區域作為內容區域；

內聯盒子：光禿禿的文字-匿名內聯盒子；由行內元素包裹的屬于內聯盒子

行框盒子：每一行就是一個“行框盒子”，每個“行框盒子”又是由一個個“內聯盒子” 組成的

包含盒子：由行框盒子組成

幽靈空白節點：

“幽靈空白節點”是內聯盒模型中非常重要的一個概念，具體指的是:在 HTML5 文檔聲明中，內聯元素的所有解析和渲染表現就如同每個行框盒子的前面有一個“空白節點”一樣。這個“空白節點”永遠透明，不占據任何寬度，看不見也無法通過腳本獲取，就好像幽靈一樣，但又確確實實地存在，表現如同文本節點一樣，因此，我稱之為“幽靈空白節點”。

證明幽靈空白節點存在的最簡單案例：



div {
  background-color: #cd0000;
}
span {
  display: inline-block;
}

代碼中沒有設置高度，最終的頁面卻有高度。這個可以由幽靈空白節點解釋

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

云服務器 GPU云服務器 css元素學習筆記一 js如何獲取一組元素任意尺寸

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

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

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

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

lylwyy2016 2019-08-29 18:31 評論0 收藏0
《CSS世界》筆記二：盒模型四大家族

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

icyfire 2019-08-29 16:09 評論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