CSS的元素顯示方法(塊 行內元素)及背景屬性

2021-10-09 12:50:11 字數 2022 閱讀 7348

元素顯示模式:即元素(標籤)以什麼方式進行展示

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 每個塊級...