元素顯示模式:即元素(標籤)以什麼方式進行展示
1.塊元素
常用有-,,,
1.文字類的元素不能使用塊元素
2.標籤主要用於存放文字,因此元素內不能放塊級元素,尤其不能放
3.同理,-
等都是文字類塊級標籤,裡面也不能放其他塊級元素
2.行內元素
常見的行內元素有
,,,,,,,,,,等
是最典型的行內元素,也稱為內聯元素
特點:1.鏈結內不能再放鏈結
2.特殊情況下內可以放塊級元素,但給
轉換一下塊級模式會更安全
3.行內塊元素
等幾個特殊的元素,同時具有塊元素和行內元素的特點,稱為行內塊元素。
特點:4.元素顯示模式轉換
即乙個模式的元素需要另乙個模式的特性:display:block/ inline /inline-block
例:想增加的觸發範圍:
a
divspan
總結:
行內元素轉換為塊級元素 : display: block;
塊級元素轉換為行內元素:display: inline;
行內元素轉換為行內塊元素 :display: inline-block;
讓div行高等於鏈結高度就可以實現文字垂直居中例:
div
a
背景屬性可以設定顏色,,背景平鋪,背景位置位置,背景影象固定等
background-color
定義了背景顏色
一般元素預設的背景顏色值為:transparent(透明)
background-image
:url(路徑)
;
背景不平鋪 (一般預設為repeat(平鋪))
background-repeat
: no-repeat;
沿著x軸平鋪
background-repeat
: repeat-x;
沿著y軸平鋪
background-repeat
: repeat-y;
背景可以設定顏色也可以設定,但會壓住背景顏色
語法:background-position: x y;
例:background-position
: center top;
-可以是精確單位:20px 50px(此時有順序),也可為方位名詞:center top(無順序),也可為混合:50px center(此時有順序)
設定背景是否固定或者隨著頁面其他部分滾動
background-attachment
:屬性值:fixed(固定)/scroll(滾動)
預設為scroll
偽類便於書寫,可將屬性合併簡寫在同乙個屬性background中
書寫一般順序為:背景顏色 背景位址 背景平鋪 背景影象滾動 設定位置各個屬性間用空格隔開
background
:rgba
(0, 0, 0, 0.3)
;
最後乙個值在0-1之間
此法是設定背景色半透明,盒子內容不會受到影響
CSS元素分類(塊元素,行內元素,行內塊元素)
塊元素特點 自己獨佔一行 高度,寬度,外邊距和內邊距都可以更改 寬度預設是父級寬度的100 是乙個容器及盒子,裡面可以放行內或者塊級元素。注 p標籤主要用於存放文字,因此p裡面不能放塊級元素,特別是不能放div,同理,h1 h6等都是文字類塊級標籤,裡面也不能放其他塊級元素。行內元素特點 可以一行顯...
css行內元素和塊元素
塊元素 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 行內元素 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度,不可改變 內聯元素只能容納文字或者其他內聯元素 塊級元素 div ...
CSS塊級元素 行內元素 行內塊級元素
塊級元素 根據css規範的規定,每乙個網頁元素都有乙個display屬性,用於確定該元素的型別,每乙個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為 block 成為塊級元素 display block 常見塊級元素 div p ul ol li 等 1 每個塊級...