（四十二）HTML標籤--3

1、標籤嵌套規則

塊級標籤可以嵌套某些塊級標籤和內聯標籤(行內標籤)

內聯標籤不能塊級標籤,只能嵌套內聯標籤

塊級標籤可以設置高度和寬度

內聯標籤不能設置,設置沒有效果

2、Css樣式

高度寬度:

Width:100px

Height:100px

字體:

Font-family:’宋體’

Font-size:10px; 默認大小是16px

Font-weight:bold;  自重 粗細 bold加粗

Color:red;rgb(255,255,255) rgba(255,255,255,0.3)  0.3是色彩透明度  兩位重重複的可簡寫#ffffff ==> #fff  

文字對齊方式:

Text-align:center,right,left

 

文字裝飾,

Text-decoration:none;//underline,line-through去除橫線 多用於a標籤

 

首行縮進

Text-indent:32px;縮進兩個字符

背景屬性

背景顏色

Background:url(‘路徑’) no-repeat right top(200px,200px)

Display:

Display:none;隱藏標籤

Visibility:hidden;隱藏標籤,可是保留標籤所佔位置

Display:block;將內聯標籤改成塊級標籤

Display:inline;將塊級標籤改成內聯標籤

Display:inline-block;將塊級標籤或者內聯標籤,改爲塊級標籤和內聯標籤的屬性,也就是不獨佔一行,能夠設置高度和寬度

 

Box-model:

Content： 裏面的內容  高度寬度就是咱們設置width和height

Padding:內邊距(內填充)

Padding-left

Padding-right

Padding-top

Padding-bottom

Border: 邊框

border-bottom:1px solid blue;
border-right:1px solid orange;
border-top: 2px solid red;
border-left: 3px dashed orange;
/*border: 3px orange;*/

 

Margin  外邊距,距離其餘標籤的距離,兩個標籤若是都設置了margin,那麼兩個標籤之間的距離取最大的那個margin

Margin-left:距離左邊邊框
margin-top:距離上面邊框

Margin-right:距離右側邊框

Margin-bottom:距離底部邊框

 

 

標籤佔的寬度:content寬度+左右padding + 左右邊框的距離