0428 專題塊狀元素

專題：

一、行內元素與塊狀元素

1、塊狀元素

特點：預設佔一整行、可以自動換行、可以設定大小

常見塊狀元素：div、li

2、行內元素

特點：不能設定寬高，內容有多大，我就有多大；

對margin僅設定左右方向有效，上下無效；

對padding設定上下左右都有效，即會撐大空間

不會自動進行換行

常見的行內元素：span、input

3、行內塊狀元素

特點：不自動換行，能夠識別寬高，預設排列方式為從左到右

#kuaizhuang1

#kuaizhuang2
#kuaizhuang3
#kuaizhuang4
#hangneiyuansu
"kuaizhuang1
">
"kuaizhuang2
">
"kuaizhuang3
">
class="
qcfd
">
"kuaizhuang4
">這是塊狀元素
class="
qcfd
">
"hangneiyuansu
">這是行內元素

1、轉行內 inline

2、轉塊狀 block（塊）

3、轉行內塊狀 在html5中，程式設計師可以自定義標籤，在任意定義標籤中，加入display:block;即可，當然也可以是行內或行內塊狀。-block

"display: inline; width: 100px; height: 100px; background-color: red;

">這是塊狀元素轉行內元素測試
"display: inline-block;  height: 100px; background-color: green;
">這是塊狀元素轉行內塊狀元素測試
"width: 100px; height: 100px; background-color: red;
">這是塊狀元素這是塊狀元素
"display: block; width: 200px; height: 200px; background-color: green;
">這是行內元素轉塊狀元素測試
"display: inline-block;  height: 200px; background-color: red;
">這是行內元素轉行內塊狀元素測試

1、間距

margin 外邊距

padding 內間距

2、浮動

float：漂流

clear-both：清除漂流

#daohang

.dh"
daohang
">
class="
dh">語文
class="
dh">數學
class="
dh">英語
class="
dh">物理
class="
dh">化學

0428css基礎 行內元素與塊狀元素

專題 行內元素與塊狀元素 塊狀元素 特點 預設佔一整行 可以自動換行 可以設定大小 常見塊狀元素 div li 行內元素 特點 不能設定寬高，內容有多大，我就有多大 對margin僅設定左右方向有效，上下無效 對padding設定上下左右都有效，即會撐大空間 不會自動進行換行 常見的行內元素 spa...

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行，無法設定寬高 有 a,img,span，i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸，可設定高寬，不會自動換行 有 button,in...

行內元素 塊狀元素 行內塊狀元素

頁面元素主要分為三類 塊元素 行內元素，行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div，其他如p h1 h6 ul ol dl...