專題：
行內元素與塊狀元素
塊狀元素
|-特點：預設佔一整行、可以自動換行、可以設定大小
|-常見塊狀元素：div、li
行內元素
|-特點：不能設定寬高，內容有多大，我就有多大；
對margin僅設定左右方向有效，上下無效；
對padding設定上下左右都有效，即會撐大空間
不會自動進行換行
|-常見的行內元素：span、input
行內塊狀元素
|-特點：不自動換行，能夠識別寬高，預設排列方式為從左到右
#kuaizhuang1#kuaizhuang2
#kuaizhuang3
#kuaizhuang4
#hangneiyuansu
<
div
id="kuaizhuang1"
>
div>
<
div
id="kuaizhuang2"
>
div>
<
div
id="kuaizhuang3"
>
div>
<
div
class
="qcfd"
>
div>
<
div
id="kuaizhuang4"
>這是塊狀元素
div>
<
div
class
="qcfd"
>
div>
<
span
id="hangneiyuansu"
>這是行內元素
塊狀元素與行內元素的相互轉換 display
|-轉行內 inline
|-轉塊狀 block（塊）
|-轉行內塊狀 在html5中，程式設計師可以自定義標籤，在任意定義標籤中，加入display:block;即可，當然也可以是行內或行內塊狀。-block
<div
style
="display: inline; width: 100px; height: 100px; background-color: red;"
>這是塊狀元素轉行內元素測試
div><
br />
<
div
style
="display: inline-block; height: 100px; background-color: green;"
>這是塊狀元素轉行內塊狀元素測試
div>
<
div
style
="width: 100px; height: 100px; background-color: red;"
>這是塊狀元素這是塊狀元素
div>
<
span
style
="display: block; width: 200px; height: 200px; background-color: green;"
>這是行內元素轉塊狀元素測試
span
>
<
span
style
="display: inline-block; height: 200px; background-color: red;"
>這是行內元素轉行內塊狀元素測試
元素屬性
|-間距
|-margin 外邊距
|-padding 內間距
|-浮動
|--float：漂流
|--clear-both：清除漂流
#daohang.dh<
div
id="daohang"
>
<
div
class
="dh"
>語文
div>
<
div
class
="dh"
>數學
div>
<
div
class
="dh"
>英語
div>
<
div
class
="dh"
>物理
div>
<
div
class
="dh"
>化學
div>
div>
0428css基礎 樣式 選擇器 字型
css樣式表 引入的三種方式 內聯樣式 標籤內部 空格style 內嵌樣式 標籤內部 外聯樣式 stylesheet type text css href text css 選擇器 查詢方式 id 唯 一 通過 查詢 class 可以重名 通過 查詢 標籤名 通過 標籤名 查詢 控制所有div sp...
CSS塊級元素與行內元素
css塊級元素與行內元素 行內元素與塊狀元素 1 塊級元素 可以設定 width,height屬性。可以通過line height設定行高 行高和height是不同的東西 2 塊級元素 可以設定margin和padding。行內元素 水平方向margin和padding有效，豎直方向margin和p...
CSS元素分類（塊元素，行內元素，行內塊元素）
塊元素特點 自己獨佔一行 高度，寬度，外邊距和內邊距都可以更改 寬度預設是父級寬度的100 是乙個容器及盒子，裡面可以放行內或者塊級元素。注 p標籤主要用於存放文字，因此p裡面不能放塊級元素，特別是不能放div，同理，h1 h6等都是文字類塊級標籤，裡面也不能放其他塊級元素。行內元素特點 可以一行顯...