CSS基本知識總結

2021-10-04 18:13:04 字數 1089 閱讀 6938

day 1

(eg.

(eg.、、、....)

①不獨佔一行,一行可以顯示多個

②高、寬、外邊距及內邊距不可以自行控制,無效果

③寬度預設為自己的寬度(靠自己把它撐開)

④只能容納文字或其他行內元素

(注:鏈結不能巢狀鏈結 特殊情況下可以包含塊級元素)

其實就是某些行內元素具有塊狀元素的某些特點,比如img、input和td、form等

①不獨佔一行,一行可以顯示多個但是中間會有空白縫隙

②高、寬、外邊距及內邊距可以自行控制

③預設寬度為本身內容的寬度,同行內元素特點③

(注:鏈結不能巢狀鏈結 特殊情況下可以包含塊級元素)

當然了 以上三種元素的顯示模式也可以通過display來相互轉換,使其具有某種元素的特點(比如我們可以通過display轉換成塊狀元素間接的來給行內元素設定寬高等..)

在display的應用中,比較常用的就是通過給a標籤設定寬高增加其觸發的範圍

怎樣讓在盒子內的元素垂直居中呢——>讓文字的行高==盒子的高度 (如果想要水平垂直居中的話可以在設定text-align來設定)

行高是由:上空隙 文字本身的高度 下空隙(自上而下)組成的,如果在乙個盒子中,我們給盒子也設定了同行高一樣的高度,那麼文字肯定就整好是在盒子的內部正當中了。(也就是 行高的上空隙和下空隙把文字擠到中間了,如果行高小與盒子的高度那麼文字應該時往上偏的,大於盒子的高度,文字應該時往下偏移的)

當我們往乙個容器裡面插入背景時(background-image:url())如果當前的寬高小於當前盒子的寬高會預設出現平鋪效果,so為了更好的控制背景的效果我們可以通過background-repeat(repeart,no-repeat,repeat-x,repeat-y)屬性來為其設定效果

背景影象位置background-position:x  y;(x和y方位名詞或者是px都可以 )  x為左右 y軸  y為上下 x軸 p118

CSS基本知識總結2 1

簡單點來說盒子模型就是把html中的布局元素看作是乙個矩形的盒子 css盒子模型本質上是乙個盒子,封裝周圍的html元素,它包括以上的內容 由邊框寬度 樣式以及顏色組成 add 的細線邊框border collapse 控制相鄰單元格的邊框 collapse屬性值表示相鄰邊框合併 給 設定邊框時會出...

CSS基本知識

選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...

CSS 基本知識

html示例 塊級元素 display block 每個塊級元素佔一行,多個塊級元素上下堆疊顯示,它的寬度預設為父元素的寬度,高度由它的內容高度決定 內容撐開 塊級元素有 6級標籤 段落 有序列表 列表項 等等行內元素 display inline 多個行內元素在一行內顯示,當同一行寬度不夠時,才到...