深入認識CSS的行內元素

2021-07-28 06:24:11 字數 1335 閱讀 5426

一直從事ios開發

,前段時間接觸到前端,簡單的學習了一下css,下面給大家簡單的說一下,我使用

css來寫乙個頁面的心得與體會。

.我是在

w3c那裡,通過看文件對

css有了初步的認識,

css的知識點整體看起來並不難。都是一些屬性。但是如果僅僅是這樣,那你就大錯特錯了,其實

css並沒有人們想象中的那麼簡單。先來說一下

css的行內元素

行內元素(inline)

: 元素在一行內水平排列,高度由元素的內容決定,height屬性不起作用,行內元素也稱為內聯元素。如span,input等元素。

常見的行內元素有:

–  a – 錨點

–  abbr – 縮寫

–  acronym – 首字

–  b – 粗體(不推薦)

–  bdo – bidi override

–  big – 大字型

–  br – 換行

–  cite – 引用

–  code – 計算機**(在引用原始碼的時候需要)

–  dfn – 定義字段

–  em – 強調

–  font – 字型設定(不推薦)

–  i – 斜體

–  img – 

–  input – 輸入框

–  kbd – 定義鍵盤文字

–  label – **標籤

–  q – 短引用

–  s – 中劃線(不推薦)

–  samp – 定義範例計算機**

–  select – 專案選擇

–  small – 小字型文字

–  span – 常用內聯容器,定義文字內區塊

–  strike – 中劃線

–  strong – 粗體強調

–  sub – 下標

–  sup – 上標

–  textarea – 多行文字輸入框

–  tt – 電傳文字

–  u – 下劃線

行內元素的特點:

–  1.設定寬度width 無效。

–  2.設定高度height 無效,可以通過line-height來設定。

–  3.設定margin 只有左右margin有效,上下無效。

4.設定padding 只有左右padding有效,上下則無效。注意元素範圍是增大了,但是對元素周圍的內容是沒影響的。

5. 和其他元素在同一行

6. 行內元素只能容納文字或者其他行內元素

css行內元素和塊元素

塊元素 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 行內元素 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度,不可改變 內聯元素只能容納文字或者其他內聯元素 塊級元素 div ...

CSS元素分類(塊元素,行內元素,行內塊元素)

塊元素特點 自己獨佔一行 高度,寬度,外邊距和內邊距都可以更改 寬度預設是父級寬度的100 是乙個容器及盒子,裡面可以放行內或者塊級元素。注 p標籤主要用於存放文字,因此p裡面不能放塊級元素,特別是不能放div,同理,h1 h6等都是文字類塊級標籤,裡面也不能放其他塊級元素。行內元素特點 可以一行顯...

CSS塊級元素 行內元素 行內塊級元素

塊級元素 根據css規範的規定,每乙個網頁元素都有乙個display屬性,用於確定該元素的型別,每乙個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為 block 成為塊級元素 display block 常見塊級元素 div p ul ol li 等 1 每個塊級...