CSS樣式 盒模型

2021-09-26 22:53:07 字數 1822 閱讀 2689

盒模型:

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 四個屬性。由於目前大部分主流的瀏覽器...