第五章 盒子模型

2022-09-13 23:24:19 字數 4802 閱讀 8156

5.1 元素分類

常用的塊狀元素有:

<

div>、<

p>、<

h1>~<

h6>、<

ol>、<

ul>、<

li>、<

dl>、<

dt>、<

table

>、<

form

>

常用的內聯元素有

<

a>、<

span

>、<

i>、<

em>、<

strong

>、<

label

>

常見的內聯塊狀元素有

<

input

>、<

img>

標籤分類的特點是對現有的html常用標籤進行分類,那麼這些特點在後面的學習過程中我們還可以通過display屬性進行強制修改規則。

5.2 盒模型的常用屬性

/*乙個200px*200px範圍的div盒子,背景顏色是紅色的。*/

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>內容的寬高

title

>

<

style

type

="text/css"

>

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

div>

body

>

html

>

.box

padding有四個方向,分別描述四個方向的padding。

padding-top:10px;

padding-right:3px;

padding-bottom:50px;

padding-left:70px;

/*上 右 下 左 四個方向*/

padding: 20px 30px 40px 50px ;

/*上 左右 下*/

padding: 20px 30px 40px;

/* 上下 左右*/

padding: 20px 30px;

/*上下左右*/

padding: 20px;

邊框

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>border的使用

title

>

<

style

type

="text/css"

>

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

div>

body

>

html

>

border-width:3px;

border-style:solid;

border-color:red;

/*上面三句**相當於一句**:border:3px solid red;*/

/*同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。*/

/*上下5px 左右10px*/

border-width:5px 10px;

/*上:實現 右:點狀 下:雙線 左:虛線*/

border-style: solid dotted double dashed;

/*上:紅色 左右:綠色 下:黃色*/

border-color: red green yellow;

border-top-width: 10px;

border-top-color: red;

border-top-style: solid;

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;

border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;

border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

上面12條語句,相當於 bordr: 10px solid red;

還可以簡寫成:

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10pxb solid red;

清除預設邊框

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>border預設清除

title

>

<

style

type

="text/css"

>

input

style

>

head

>

<

body

>

<

input

type

="text"

name

="">

body

>

html

>

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>水平方向外邊距

title

>

<

style

type

="text/css"

>

.box_l

.box_r

style

>

head

>

<

body

>

<

span

class

="box_l"

>左盒子

span

><

span

class

="box_r"

>右盒子

span

>

body

>

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>垂直方向上外邊距合併

title

>

<

style

type

="text/css"

>

.father

.box1

.box2

style

>

head

>

<

body

>

<

div

class

="father"

>

<

div

class

="box1"

>

div>

<

div

class

="box2"

>

div>

div>

body

>

html

>

python第五章 Python學習(第五章)

記錄所有的名片字典 card list defshow menu 顯示資訊 print 50 print 歡迎使用 名片管理系統 v1.0 print print 1.新增名片 print 2.顯示全部 print 3.搜尋名片 print print 0.退出系統 print 50 defnew ...

第五章 雜湊

雜湊表adt,只支援二叉樹查詢所允許的一部分操作。比如插入,刪除,查詢等。那些需要元素間排序資訊的操作將不會得到支援。比如findmin,findmax和線性時間按排序順序列印整個表的操作時不支援的。雜湊函式在理想狀態是能將任何兩個不同的關鍵字對映到不同的單元,但是這是不可能,因為關鍵字是無窮的,但...

第五章 函式

第五章 函式 1 函式的定義 shell函式定義可以放在 bash profile 檔案中,也可以在使用該函式的指令碼中,還可以在命令列中 通過 source 或 執行bash profile檔案,使修改能夠立即生效 function 函式名 declare f 顯示定義的函式清單 export f...