CSS顯示模式

2021-10-12 08:31:09 字數 1907 閱讀 2026

css顯示模式

塊元素

獨佔一行

高度,寬度,外邊距以及內邊距都能控制

寬度預設是100%

是乙個容器及盒子,裡面可以放行內或者塊級元素

行內元素

一行可以顯示多個

寬高無法設定

預設高度是本身內容的寬度

行內元素只能容納文字或行內元素

行內塊元素

寬高可調

一行多個

預設高度是本身內容的寬度

css模式轉化

行內元素轉塊級元素:display: block;

塊元素轉化為行內元素:display:inline;

轉化為行內塊元素:display:inline-biock;

注意:單行文字垂直居中,讓行高等於盒子的高度

css背景

注意:會預設鋪滿盒子

背景平鋪(就是會不會鋪滿整個盒子)

用background-repeat來實現

引數值型別

repeat

背景影象在x和y方向都平鋪

no-repeat

背景影象不平鋪

repeat-x

背景影象在x方向上平鋪

repeat-y

背景影象在y方向上平鋪

注意:可以與背景顏色一起存在,背景顏色會被置於最底層

背景位置

用background-position屬性來實現

left center等

為了讓背景居中可以用background-position: center top;

背景位置-精確單位background-position: x px y px;

第乙個引數一定對應x,第二個對應y

如果只寫乙個引數那就是x的值,y預設為垂直居中

背景位置-混合單位

background-position: 20px center

同樣的第乙個對應x的值,第二個對應y的值

背景固定

background-attachment來實現

引數作用

scroll

背景隨物件內容滾動

fixed

背景影象固定

注意:預設值是scroll

背景屬性的復合寫法:

背景顏色半透明

用 background: rgba(); 來實現

background:rgba(0,0,0,0.3);

注意:背景總結屬性

作用值background-color

背景顏色

預定義的顏色值/十六進值/rgb**

background-image

背景url(路徑)

background-repeat

是否平鋪

repeat/no-repeat/repeat-x/repeat-y

background-position

背景位置

length/position 分別是x,y座標

background-attachment

背景固定

scroll/fixed

背景半透明

實現半透明

rgba(rgba**)a為透明度

css的顯示模式

1.在html中所有標籤分為兩類,一類是容器級標籤,另一類是文本級標籤 2.在css中所有標籤分為兩類,一類是塊級元素,另一類是行內元素 1.塊級元素會獨佔一行,而行內元素不會獨佔一行 2.容器級元素 div ul ol dl 文本級元素 p span huis stong ins em del 3...

css標籤顯示模式

1.1.1 塊級元素 block level 常見的塊級元素 等,其中標籤是典型的塊元素。塊級元素的特點 1 比較霸道,自己獨佔一行 2 高度,寬度,外邊距和內邊距都可以控制 3 寬度預設是父元素寬度的100 4 是乙個容器及盒子,裡面可以放行內或者塊級元素 1.1.2 行內元素 inline le...

CSS元素顯示模式

行內元素 元素顯示模式轉換 單行文字垂直居中 導航欄案例 元素以什麼方式進行顯示.常見的塊元素有常見的行內元素有,等 相鄰行內元素在一行上,一行可以顯示多個 高和寬直接設定是無效的 預設寬度就是它本身內容的寬度 行內元素只能容納文字或者其他行內元素 行內元素中有幾個特殊的標籤 它們同時具有塊元素和行...