注意:/*外盒尺寸計算(元素空間尺寸)*/
element空間高度 = content height + padding + border + margin
element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算(元素實際大小)*/
element height = content height + padding + border (height為內容高度)
element width = content width + padding + border (width為內容寬度)
1.width,height僅使用塊級元素,對行內元素無效
2.計算盒子總高度時,還應考慮上下兩個盒子的外邊距合併情況
3.如果乙個盒子沒有給定寬度和高度時,padding不會影響盒子大小
width > padding > margin
1.margin外邊距合併問題,ie6 margin加倍的bug,所以最後使用
2.padding會影響內盒的大小,經常使用加減法
3.width 寬度剩餘法,高度剩餘法
1.content-box :盒子模型 width + padding + boder
2.border-box:盒子模型即為寬度 padding 和boder 都包含再width
1.預設設定,優先保證內部的內容所佔區域不變
2.boder-box 優先保證自己盒子的所佔區域不變,對內容進行壓縮
注意:box-shadow
:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影;
1.子盒子浮動不會壓住padding
2.浮動的元素會找最近的父級元素對齊,不會超出內邊距的範圍
浮動的目的是,讓多個塊級元素同一行顯示
語法:
選擇器
屬性值
描述left
不允許左側有浮動元素(清除左側浮動的影響)
right
不允許右側有浮動元素(清除右側浮動的影響)
both
同時清除左右兩側浮動的影響
優點:通俗易懂,書寫方便
缺點:新增了許多無意義的標籤,結構化更差。
可以給父級新增overflow:hidden auto scroll
優點:**簡介
缺點:內容增多的時候,不會自動換行,無法顯示溢位元素
:after 的公升級版p:after
/* 偽元素產生出的是 行內元素
在整個父元素後面內容 轉成塊元素
高度為0 隱藏掉點 清除浮動*/
.clearfix:after
.clearfix
優點:符合閉合浮動的思想,結構語義化正確
缺點: ie6不支援after,
清除浮動:clear:both 塊級元素下移,直到兩邊沒有浮動元素.clearfix:before, .clearfix:after
.clearfix:after
.clearfix
閉合浮動:使浮動元素閉合,使父元素能夠包含浮動元素,從而減少浮動影響,**更簡潔
html 基礎入門
html的基礎知識 1.html語言的遵循的規範 1 乙個html檔案開始標籤和結束標籤 2 html包含兩部分內容 顯示在頁面上的內容都寫在body裡面 3 html的標籤有開始標籤,也要有結束標籤 4 html的 不區分大小寫的 5 有些標籤是沒有結束標籤的 比如 換行 html的操作思想 網頁...
HTML基礎入門
可以使用專業的html編輯器來編輯html 這裡推薦幾款常用的編輯器 notepad 和 sublime text 還可以配合 emmet 外掛程式來提高編碼速度。emmet 官網 head標籤 作用 用於存放 title,meta,base,style,script,link 注意在head標籤中...
HTML 基礎入門
最近學習html5的知識,屬於入門級別。粗略接觸感覺並不是十分枯燥困難,不過據說html都是入門容易深入很難,但願以後不會被難倒吧。html是hypertext markup language 超文字標記語言 的簡寫,他不是一種程式語言,而是一種標記語言,用於告訴瀏覽器如何構造你的頁面。他可以由一系...