盒模型:
border-top
border-right
border-bottom
border-left
margin-top
margin-right
margin-bottom
margin-left
margin:20px auto 40px;
(第乙個盒子與頂端相距20畫素,左右居中,第二個盒子與第乙個盒子相距40畫素)
padding:10px; //四個方向一樣
padding:20px 10px; //上下 / 左右
padding:10px 20px 30px; //上 / 左右 / 下
padding:10px 20px 30px 40px; //上右下左
運用舉例:
content
="text/html;charset=gb2312"
/>
>
盒模型title
>
>
.box
style
>
head
>
>
class
="box"
>
馬上週末了,好開心!!!
div>
class
="box"
>
馬上週末了,好開心!!!
div>
body
>
html
>
效果圖:
display:block/inline/inline-block/none;
inline-block和none的應用例子:
使用display:inline-block將box下的div轉換為行內塊元素;
使用display-none將.box .last的元素隱藏
*/* * 主要用途是重置不同的瀏覽器預設樣式,以達到不同瀏覽器顯示網頁的結果不會差太遠的效果*/
body
.box
.box div
.box .last
style
>
head
>
>
class
="box"
>
>
div>
>
div>
>
div>
>
div>
class
="last"
>
div>
div>
body
>
html
>
效果圖
css 盒模型新增樣式
box shadow 以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。如果元素同時設定了 border radius 陰影也會有圓角效果。多個陰影時和多個 text shadows 規則相同 第乙個陰影在最上面 預設值 none 不可繼承 值 inset 預設陰影在邊框外。使用ins...
CSS選擇器 樣式 盒模型
1.通配選擇器 html,body以及body下用於顯示的標籤 html和body顏色會被改變,但是div標籤不會發生改變,由於不同的選擇器具有優先順序 語法 2.標籤名 標籤選擇器 該標籤對應的所有該標籤 在實際開發中,盡量少用或不用標籤名來作為選擇器,標籤名如果作為選擇器的話一般在該標籤為最內層...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...