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