基本概念
- 文檔流 mdn
- 塊邢享、內聯、內聯塊纬傲？
- margin合并
- 兩種盒模型
文檔流 Normal Flow
文檔流動方向
- 從左到右：內聯元素像默認的
<span></span>直到排滿一行换帜，才會另起一行 - 從上到下：塊級元素像默認的
<div></div>每一個元素占據一行藏雏，不并排（注意不加任何樣式為前提下）
eg.
css-demo-1 with CSS animation & SCSS
內聯元素占滿一行数初，空間不夠時找爱，折行，即攔腰折斷顯示到下一行
塊級元素就算設置了寬度不占滿泡孩，也不會合成一行缴允，即不并排，除非設置定位屬性：默認情況下，每個塊級元素獨占一行
文檔流小結
- 流動方向
-
inline元素從左到右练般，到達最右邊才會換行 -
block元素從上到下，每一個都會另起一行 -
inline-block也是從左到右
-
- 寬度
-
inline寬度為所有內部內聯元素的寬度锈候，一般即文字寬度的和所決定薄料，指定width無效 -
block默認自動計算寬度width:auto;，指能有多寬就占多寬泵琳，盡量得寬摄职，并不一定是100%，可用width指定获列，指定了也不會換行谷市，除非有其他非默認屬性 -
inline-block結合前兩者部分特點，默認寬度和inline相同击孩，盡量得窄迫悠，緊密包裹里面的內容，但可設置width
-
- 高度
-
inline高度由inline-height間接確定巩梢，跟它的height或者padding無關 -
block高度由所有內部正常文檔流中的元素高度之和決定创泄，全部包裹住，可以設height -
inline-block和block類似括蝠，可以設置height
-
這里
內聯/行內 | 塊級 | 行盒 元素指的是display：[inline | block | inline-block]的元素鞠抑，因為HTML5標準不分塊級、內聯級忌警，只分瀏覽器的默認屬性搁拙，可以隨時切換
永遠不要寫
width:100%;，除非特殊說明
默認
<span></span>的高度是由誰決定的法绵？
css-demo_flow with CSS animation & SCSS
- demo里默認
<span></span>既不接受寬度箕速，也不接受高度； - 包裹它的
<div></div>并沒有被<span></span>設置的padding撐開礼烈，而<div></div>的高度由其里面的元素決定弧满，包裹住其中的元素； - 加了內邊距的
<span></span>被撐高的只是可視高度 -
inline元素的實際高度是由行高line-height間接確定的 - 包裹它的
<div></div>被內部元素的實際高度撐開此熬，行高會繼承庭呜，寫在div后也一樣 - 間接？還受到不同字體的影響犀忱，請看行盒模型深入理解CSS:字體度量...by方應杭
- 脫離文檔流元素不計算入父元素的高度募谎， 具體看層疊上下文 mdn
屬性overflow溢出
當內容
content大于容器box
- 等內容的寬度或高度大于容器的，會溢出
- 可用
overflow來設置是否顯示滾動條 -
auto：靈活設置 -
scroll：永遠顯示阴汇，太丑数冬，多出的像素會影響布局，不用，在cssReset里干掉 -
hidden：直接隱藏溢出部分 -
visible：直接顯示溢出部分 -
overflow可以分為overflow-x和overflow-y
脫離文檔流 mdn
超出的內容...
- visible 可見
- hidden 不給看
- scroll 可滾（太丑 高度不超過也顯示滾動條）
- auto 超出部分拐纱，自動顯示滾動條
<div></div>里面什么也沒有铜异，即高度為0px，里面沒有文檔流元素而
<span></span>里面什么也沒有時秸架，加了border揍庄，看出高度是由line-height決定的指定除visible(默認值)以外的值將創(chuàng)建一個新的 塊級格式化上下文.
為使overflow有效果，塊級容器必須有一個指定的高度（height或者max-height）或者將white-space設置為nowrap东抹。
注意: 設置一個軸為visible（默認值）蚂子，同時設置另一個軸為不同的值，會導致設置visible的軸的行為會變成auto缭黔。
注意: 即使將overflow設置為hidden食茎，也可以使用JavaScript Element.scrollTop 屬性來滾動HTML元素。
如果有滾動條馏谨，那么里面的元素默認只在第一屏顯示别渔，后面留空
讓一個元素脫離文檔流
回憶一下
-
block高度由內部文檔流元素決定，可以設height - 有些元素可以不在文檔流中田巴，放飛自我
哪些元素脫離文檔流
如何讓一個元素脫離文檔流钠糊？
內聯元素的高度是由行高決定的-->確定了行高的文字內容形成文檔流元素-->決定了其外部塊級元素的高度-->高度撐開其外部的塊級元素
現在讓文字即其內聯元素脫離文檔流
- 加屬性
float - 加屬性
position:absolute | fixed;
怎么讓元素不脫離文檔流
- 不要用以上提到的屬性
- 一個元素脫離文檔流，就不影響塊級父元素的高度壹哺，換句話說父容器計算高度時就不把它計算在內了
- 以后會學清除浮動抄伍，但一旦脫離文檔流，就回不去了
塊管宵、內聯截珍、內聯塊？過時的概念
元素的默認level
內聯/行內 | 塊級 | 行盒 元素指的是display：[inline | block | inline-block]的元素箩朴，因為HTML5標準不分塊級岗喉、內聯級，只分瀏覽器的默認屬性炸庞，可以隨時切換钱床，塊級元素與行內元素 mdn
默認是block-level box的元素
默認是in-line-level box的元素
通過
display:[inline | block | inline-block|];來隨時切換inline-block在文檔流上很像inline，但是不會跨兩行顯示
Flow Layout and Overflow 流布局和溢出
塊級元素設置的高度比內容矮時埠居，內容溢出邊框
margin合并（死記硬背）
兩種盒模型（border-box更符合人類思維查牌、直覺）
更符合人類思維、直覺
eg.
第三視角
CSS不是重點滥壕，面向工作學習市場上比較需要的技術才是王道纸颜，張*旭的職業(yè)發(fā)展不適大多數人，選擇比努力更重要
·未完待續(xù)·
參考文章
相關文章
- 無
