HTML筆記

一、?盒模型

可以裝東西

大部分是矩形為主

盒模型相關(guān)屬性： padding?border?margin

?

內(nèi)容區(qū) ?width??height

內(nèi)邊距 ?padding

邊框 ???border

外邊距 ?margin

?

二、?padding?內(nèi)邊距、補(bǔ)白、填充、內(nèi)補(bǔ)白、內(nèi)填充

ul標(biāo)簽?zāi)J(rèn)攜帶左padding

1、?支持背景色

2、?寫完padding看寬高，如果有做減法

3、?一值法 ?padding:20px;?四個(gè)方向 ?

二值法 ?padding:20px 50px;??上下 ?左右

三值法 ?padding:10px 20px 30px;?上 ?左右 ?下

四值法 ?padding:10px 20px 30px 40px;?上右下左

?

4、?可以定義單一方向

padding-left

padding-top

padding-right

padding-bottom

?

5、?padding取值不可以為負(fù)數(shù)

?

三、?border??邊框

1、border:1px?solid?#ccc;???border:red 2px solid;??border:solid 2px #ccc;

邊框子屬性

border-width?邊框?qū)?/p>

border-style??邊框類型

solid實(shí)線?dashed線狀虛線?dotted點(diǎn)狀虛線?double雙線（至少三像素）

border-color?邊框顏色

2、border-top: 1px solid #ccc;

border-left:1px solid #ccc;

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

3、border不支持四值法， border-width支持

4、支持背景色

5、邊框楔形

解決方案：用盒子模擬邊框

繪制三角形：width: 0;height: 0;border: 100px solid transparent; border-left-color: #f0f;

?

四、?margin??外邊距，外邊界，邊界，邊距

1、?不支持背景色

2、?支持四值法

3、?支持單一方向的定義

margin-top

margin-right

margin-left

margin-bottom

4、margin取值可以為負(fù)數(shù)

使相應(yīng)的盒子向相反方向移動(dòng)

取值為正改變誰，取值為負(fù)數(shù)就改變誰

正常左上會(huì)影響盒子自身的位置，

如果加了右浮動(dòng)，margin-right就會(huì)影響自己的位置

左右只可能有一個(gè)方向會(huì)影響自己的位置