◆內邊距撐大盒子的問題
影響盒子寬度的因素
內邊距影響盒子的寬度 padding會撐大盒子的大小
邊框影響盒子的寬度
盒子的寬度=定義的寬度+邊框寬度+左右內邊距
◆繼承的盒子一般不會被撐大
包含（巢狀）的盒子，如果子盒子沒有定義寬度，給子盒子設定左右內邊距，一般不會撐大盒子。
◆垂直方向外邊距合併
兩個盒子垂直乙個設定上外邊距，乙個設定下外邊距，取的是設定較大的值。
◆巢狀的盒子外邊距塌陷：直接給子盒子設定垂直方向外邊距的時候，會發生外邊距塌陷
解決方法: 1 給父盒子設定邊框(不推薦使用)
2 給父盒子overflow:hidden; bfc 格式化上下文
bfc的詳解:
◆行內元素關於padding和margin問題
兩個注意:行內元素不要給上下的margin和padding 上下的margin和padding會被忽略
左右margin和padding會起作用
◆絕對定位
position:absolute;
特點：★元素使用絕對定位之後不佔據原來的位置（脫標）
★元素使用絕對定位，位置是從瀏覽器出發。
★巢狀的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發。
★巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發。
★給行內元素使用絕對定位之後，轉換為行內塊。（不推薦使用，推薦使用display:inline-block;）
◆相對定位
position: relative;
特點：★使用相對定位，位置從自身出發。
★還佔據原來的位置。
★子絕父相（父元素相對定位，子元素絕對定位）
★行內元素使用相對定位不能轉行內塊
◆display總結
/* inline */
1.同行顯示, 就相當於純文字, 當一行顯示不下, 如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷
2.支援部分css樣式, 不支援寬高 | 行高(行高會對映到父級block標籤) | margin上下
3.content由文字內容撐開
4.inline標籤只巢狀inline標籤
/* inline-block */
1.同行顯示, 當一行顯示不下, 標籤會作為乙個整體換行顯示
2.支援所有css樣式
3.content預設由文字()內容撐開,也可以自定義寬高, 當自定義寬高後,一定採用自定義寬高(顯示區域不足,內容會在標籤內容換行顯示,可能超出顯示區域)
4.inline-block標籤不建議巢狀任意標籤
/* block */
1.異行顯示, 不管自身區域多大, 都會獨佔一行
2.支援所有css樣式
3.width預設繼承父級,height由內容(文字,,子標籤)撐開, 當設定自定義寬高後,一定採用自定義寬高
4.block可以巢狀任意標籤
◆overflow總結
/* 本質 */
1.overflow: 處理內容超出盒子顯示區域
overflow: auto | scroll | hidden
auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示
scroll: 一直採用滾動方式顯示
hidden: 隱藏超出盒子顯示範圍的內容
◆浮動布局
float: 浮動布局, 改變bfc的參照方位
為什麼要使用: 使用它, 塊級盒子就會同行顯示
float: left | right; 左 | 右 浮動
left: bfc參照方向從左向右
right: bfc參照方向從右向左
浮動的區域有父級的width決定
◆清浮動
浮動問題: 子級浮動了,不再撐開父級的高度, 那麼父級如果擁有兄弟標籤,可能就會出現布局重疊問題
清浮動: 解決上面的問題, 通過使父級獲取乙個合適的高度, 這樣子級就不會和父級的兄弟布局發生重疊
clear: left | right | both
① 設定父級的死高度
② 通過兄弟設定 clear: both
③ 設定父級overflow屬性
.sup
④ 通過父級:after偽類
.sup:after
基本標籤: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style
分類: 單雙 | dispaly
inline: span | b | i | a
inline-block: img | input
block: div | h1-h6 | p | ul | hr | br
◆浮動布局總結
1.同一結構下, 如果採用浮動布局,所有的同級別兄弟標籤都要採用浮動布局
2.浮動布局的盒子寬度在沒有設定時會自適應內容寬度
◆盒子顯隱
display: none;
在頁面中不佔位, 顯示會影響其他標籤布局,採用定位布局後, 顯示隱藏都不會影響其他標籤布局, 不需要用動畫處理時
opacity: 0;
在頁面中佔位, 採用定位布局後, 顯示隱藏都不會影響其他標籤布局, 需要採用動畫處理時
WEB前端問題總結 JavaScript（2）
一.閉包 函式的巢狀定義,定義在內部的函式就稱之為 閉包 1.乙個函式要使用另乙個函式的區域性變數 2.閉包會持久化包裹自身的函式的區域性變數 3.解決迴圈繫結 function outer return inner var innerfn outer 2.借助閉包,將區域性變數num的生命週期提公...
WEB前端知識總結
1 css3中設定max width 為讓更好適應螢幕 2 position absolute 讓元素脫離，z index屬性可以改變堆疊順序 3 如何讓元素透明 background color transparent 4 設定透明度 opacity 0.5 5 後台頁面可以使用bootstrap...
Web前端初學總結
恢復內容開始 學習了一周的c 這一周學了不少東西，也寫了不少 感覺挺不錯的，總結一下學到的東西。最基礎的就是變數 資料 運算。這裡面包含了不少的 基礎規則，多用，多記就好了。然後是流程控制，這其中所包含的東西就不僅是需要記住就可以的，還得弄明白，想明白。裡面牽涉到邏輯問題，if判斷，switch選擇...