1.標準文件流
1.1 當瀏覽器解析網頁的時候，遵循從上向下，從左向右的順序來進行
解析1.2 塊級元素和行內元素的特性 -->如果元素一旦離開了標準文件流，那麼這些特性將不會存在
1.3 空白摺疊
1.4 高矮不齊，底邊對其
1.5 單詞一旦結束並且到達了邊界將自動換行
1.6 如果單詞始終沒有空格來表示單詞結束，那麼單詞不會換行
tip：讓元素脫離標準文件流的方式：
1. 浮動float
2. 定位position
標準文字流 : 主要針對的是網頁中的文字(a標籤和img也會被遵從文字流的規則來解析)
標準文件流 : 主要針對的是標籤
網頁中的任何乙個標籤都相當於是乙個盒子模型，而所有盒子模型
都存在五個必要屬性：
width height padding border margin
有乙個div ，width 300px padding:20px border:1px
那麼此時這個div標籤在網頁中實際所佔的寬度：
300px + 40px + 2px = 實際所佔的寬度
width height 寬度和高度
padding: 內邊距，內容距離邊框之間的距離。
padding:10px; 上下左右四個方向的padding全部都是10px
padding-top:
padding-bottom:
padding-left:
padding-right:
準則：在使用css的時候，能夠使用簡寫就使用簡寫
padding:10px 20px; 第乙個值表示上下的padding 第二個值表示左右的padding
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
padding:上為20px 下為30px 左右為15px；
padding:20px 15px 30px;
padding:20px; 上下左右
padding-left:30px; 左 30px
border: 邊框
border: 1px solid #ccc;
1px 邊框的寬度
solid 邊框的線型
#ccc 邊框的顏色 英文單詞 八進位制表示 十六進製制表示
border-width:邊框的寬度
border-style:邊框的線型
border-color:邊框的顏色
margin 外邊距
margin:10px 20px 30px 40px;規則同padding.
margin-top:
margin-bottom:
margin-left:
margin-right:
在使用margin時需要注意的點：
1.塌陷
margin塌陷存在於塊級元素之間
如果元素變成了行內塊元素或者行內元素則不會塌陷
如果元素脫離了標準文件流則也不會塌陷
2. 通過margin讓盒子居中。
讓盒子左右居中margin:0 auto;
使用margin:0 auto;讓盒子居中需要注意的點:
盒子必須要有明確的width
盒子必須處於標準文件流中
margin:0 auto ;是讓盒子居中，而不是讓盒子裡面的
文字居中。如果讓文字居中用text-align:center;
text-align:center / left /right
tip:如果想要移動子元素的位置，非必要情況下推薦使用父元素
的padding，而不是子元素的margin，如果必須使用margin，父元素就必須要有
border
float: left / right ;
浮動的特點：
1. 脫離標準文件流 (脫標)，元素一旦脫離標準文件流，後面的元素
會佔據浮動元素原本的位置，元素一旦浮動脫標，那麼就不必
遵守文件流中的塊級元素和行內元素的特性。
2. 元素浮動，會脫離文件流，但是不會脫離文字流。所以會產生字圍效果。
3. 相互貼靠
1. 能夠讓浮動之後的元素布局產生混亂
2. 子元素浮動會對父元素產生影響
1. 給浮動的外層父元素新增高度 不推薦
2. overflow:hidden 溢位 hidden 隱藏
3. clear:both 清除浮動帶來的影響
4. 隔牆法 ： 外牆法 內牆法(不僅僅可以清除浮動還可以給父元素以高度)
line-height行高
font-size:字型大小
font-size:20px;
文字垂直居中：行高=盒子的高度
(盒子高度-總行高 ) /2 = padding-top
盒子高度 - padding-top = 新的盒子的高度
多行文字垂直居中
font:14px/30px "kaiti";
上面的**等同於下面的三句**：
font-size:14px; 字型大小
line-height:30px; 行高
font-family:"kaiti"; 字型族科
font-family:"kaiti", "", "", ""
yandex
CSS標準盒子模型
css中，box model叫盒子模型 或框模型 box model規定了元素框處理元素內容 element content 內邊距 padding 邊框 border 和 外邊距 margin 的方式。在html文件中，每個元素 element 都有盒子模型，所以說在web世界裡 特別是頁面布局 ...
css 標準盒子模型和IE盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...
課堂筆記之盒子模型
在html中，任何元素都可以看做乙個盒子 這個 盒子 的作用就是用來包裹頁面中的內容，比如 文字等等 在w3c的規定下，盒子模型 標準盒子模型 從內到外的基本組成為 margin border padding content 如圖所示，見水印 在w3c下，在任一方向新增margin，border，p...