資訊專欄INFORMATION COLUMN
摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。
CSS 盒子模型
（點擊查看官方解釋）
實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成
content 內容區域
padding 內邊距
border 邊框
margin 外邊距
并且margin, border, padding分別有上下左右4個值
如上圖所示，可以很容易的得出盒子的大小，也就是對應標簽真正大小。
所謂的寬高不是width和height,而是盒子的寬度和高度。
高度 = 內容高度 + 上下內邊距 + 上下邊框 + 上下外邊距 寬度 = 內容寬度 + 左右內邊距 + 左右邊框 + 左右外邊距
margin,border,padding三個屬性在設值的時候均可以對上下左右進行多帶帶設置：
margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px;
也可以一次性使用簡寫的方法設置：
/* 上 右 下 左*/ margin: 100px 100px 50px 50px; /* 上下 左右*/ margin: 100px 50px; /* 上 左右 下*/ margin: 100px 20px 50px;
這里需要注意的是，多次設置時要先寫大后寫小：
/* 錯誤寫法 */ margin-left: 20px; margin: 10px;
這個種寫法會導致 margin-left:20px失效。
在使用盒子模型進行布局的時候要格外注意的一個問題是： margin塌陷。
* {
margin:0;
}
div {
width: 300px;
height: 300px;
}
.d1 {
background-color: #c1c1c1;
margin-bottom: 20px;
}
.d2 {
background-color: pink;
margin-top: 30px;
}
上述代碼實際效果如下圖所示
肉色部分是Chrome瀏覽器檢查div.d2屬性的margin邊距，很明顯它的top是30px,也就是說margin距離是距離上下左右容器border的距離，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。
在計算盒子之間的距離時需要考慮margin，但margin也有一個很好用的方法使塊劇中：
margin: 0 auto;
border屬性的三要素：
border-width 粗線
border-style 線形
border-color 顏色
一般設置border的樣式時一般使用簡寫方式：
border: 1px solid red;
再說行內元素的盒模型與塊級元素的盒模型之間的差異：
行內元素不能設置寬和高。行內元素的寬高是由其內容決定的；而塊級元素可以設置寬和高。
塊級元素會獨占一行。而行內元素卻部能夠獨占一行，只能和其他的行內元素共用一行。
如果塊級元素不設置寬度，那么塊級元素會自動的沾滿父元素的全部寬度。
可以通過設置dispaly屬性將元素在行內和塊之間轉換，其參數包括：
inline
block
inline-block
標準文檔流標準文檔流實際上是一個不太好的翻譯，一開始不是很理解，查了一下發現，標準中說的是 normal flow 翻譯為普通流或者常規流更好。
當瀏覽器解析網頁的時候，遵循從上往下，從左到右的順序。
一旦元素脫離了標準文檔流的時候，行內元素和塊元素的特性將消失。
標準文檔流的常見現象：
空白折疊現象。
高矮不齊，底邊對齊。
自動換行，一行寫不完，自動換行。
單詞沒寫完不換行。
浮動float: left / right;
浮動的特點：
脫離標準文檔流，元素一旦脫離標準文檔流(脫標)，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。
元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。
相互貼靠。
浮動會帶來的影響：
能讓浮動后的元素布局混亂
子元素浮動會對父元素產生影響
HTML代碼：
- HTML
- CSS
- JavaScript
- jQuery
- 測試文字
- 測試文字
- 測試文字
- 測試文字
CSS代碼：
.box ul li {
float: left;
width: 100px;
height: 50px;
background-color: orange;
margin-left: 10px;
}
此時效果如下圖：
如何清除浮動帶來的影響：
1.首先可以通過為父元素設置高度來消除浮動：
.box {
height: 50px;
}
2.使用overflow:hidden屬性清除浮動：
.box {
overflow:hidden;
}
3.在父元素底部插入一個具有clear:both屬性的空標簽：
.clear { clear:both; }
- HTML
- CSS
- JavaScript
- jQuery
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112187.html
摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。 CSS 盒子模型 （點擊查看官方解釋） 實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成 conten...
摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...
摘要：之小白初入江湖超文本標記語言簡稱是一種用于創建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創建網頁的標準標記語言...
摘要：原文鏈接在這之前先要了解一下循環中和的區別是函數級作用域或者全局作用域，是塊級作用域看一個例子循環中的邏輯代碼函數下的輸出，全局下的不存在現在我們把換為循環中的邏輯代碼報錯了，不在函數作用域下，當然肯定也不會再全局下因為和的這個區別當然和的 原文鏈接在這之前先要了解一下 for循環中let 和var的區別 var 是函數級作用域或者全局作用域，let是塊級作用域看一個例子 fu...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
閱讀 1090·2021-11-15 18:00
閱讀 2802·2021-09-22 15:18
閱讀 1964·2021-09-04 16:45
閱讀 750·2019-08-30 15:55
閱讀 3853·2019-08-30 13:10
閱讀 1331·2019-08-30 11:06
閱讀 1984·2019-08-29 12:51
閱讀 2294·2019-08-26 13:55
