html 7 盒子模型

2022-08-19 09:51:08 字數 1791 閱讀 1844

網頁中,所有的html標籤,都可以做為乙個盒子

a)border-width:寬度( border-top-width border-right-width

border-bottom-width   border-left-width)

b)border-style:樣式( solid細邊框、dashed虛線邊框)

c)border-color:顏色

d)簡寫:border:1px solid red;

屬性說明(順時針:上右下左)

border-top-color

設定上邊框顏色

border-right-color

設定右邊框顏色

border-bottom-color

設定下邊框顏色

border-left-color

設定左邊框顏色

border-color

設定4個邊框為同一顏色

border-color:red;

上下邊框顏色為blue

左右邊框顏色為red

border-color:

blue red;

上邊框顏色為blue

左右邊框顏色為red

下邊框顏色為green

border-color:

blue red green;

上、下、左、右邊框顏色

分別為blue、red、green、black

border-color:

blue red green black;

e)  外邊距(盒子之間的距離)——margin

1、            居中——margin : 0px auto;

2、            margin-left\right\top\bottom:數字px;

f)  內邊距(文字或和盒子中間的間隙)——padding

padding-top\right\bottom\left   (數字px)

說明:邊框、外邊距、內邊距,

簡寫方式方向(順時針),按上、右、下、左設定

一、    標準文件流

1、            塊級元素

a)        特徵:單獨佔據一塊區域,單獨佔一行,裡面包含內聯元素

b)        常用的塊級元素:

i.              標題標籤——

ii.             段落標籤——

iii.             層——

iv.              **——

v.              表單——

vi.              列表:有序列表、無序列表、定義列表

2、  內聯元素

常用的內聯元素:、、、、、

表單元素

3、            標準文件流規則:塊級元素,包含內聯元素,反之則不行

三、    控制元素顯示和隱藏——display屬性

none——隱藏                    block——顯示

html盒子模型 jquery盒子模型

最近學了jquery的盒子模型之後,感覺真的顛覆我之前對盒子模型的看法,我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件,那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...

0416 盒子模型

css盒子模型樣式 定義 margin 外邊距,圍繞在元素邊框的空白區,在元素外建立額外的空白。border 邊框,圍繞元素內容和內邊距的一條或多條線。padding 內邊距,在邊框和內容區之間。屬性 margin 外邊距也叫作空白 接受任何長度單位,百分數值和負值,還可設定為auto。margin...

3 盒子模型

盒子模型是我學習css中使用頻率最高的模型,其中主要還是理解整個盒子的構成,以及其中各屬性的作用,最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...