網(wǎng)頁布局的核心砸西，就是用 CSS 來擺放盒子椅野。
CSS 提供了 3 種機制來設(shè)置盒子的擺放位置，分別是標(biāo)準(zhǔn)流籍胯、浮動和定位竟闪，這里先介紹標(biāo)準(zhǔn)流。
標(biāo)準(zhǔn)流中杖狼，HTML 元素一般分為塊元素和行內(nèi)元素兩種類型炼蛤。
一、塊元素
常見的塊元素有<h1>~<h6>蝶涩、<p>理朋、<div>、<ul>绿聘、<ol>嗽上、<li>等，其中 <div> 標(biāo)簽是最典型的塊元素熄攘，它們具有以下特點：
- 自己獨占一行兽愤，寬度默認(rèn)是容器（父級寬度）的100%
- 是一個容器及盒子，里面可以放行內(nèi)或者塊級元素
- 高度挪圾，寬度浅萧、外邊距以及內(nèi)邊距都可以控制
- 文字類塊級標(biāo)簽，里面不能放其它塊級元素哲思，例如<p>洼畅、<h1>
二、行內(nèi)元素
常見的行內(nèi)元素有 <a>棚赔、<strong>帝簇、<b>、<em>靠益、<i>丧肴、<del>、<s>捆毫、<ins>闪湾、<u>冲甘、<span>等绩卤，其中 <span> 標(biāo)簽是最典型的行內(nèi)元素途样。有的地方也將行內(nèi)元素稱為內(nèi)聯(lián)元素，它們具有以下特點：
- 相鄰行內(nèi)元素在一行上濒憋，一行可以顯示多個
- 高何暇、寬直接設(shè)置是無效的，默認(rèn)寬度就是它本身內(nèi)容的寬度
- 行內(nèi)元素只能容納文本或其他行內(nèi)元素
- 鏈接里面不能再放鏈接
三凛驮、行內(nèi)塊元素
在行內(nèi)元素中有幾個特殊的標(biāo)簽 —— <img />裆站、<input />、<td>黔夭，它們同時具有塊元素和行內(nèi)元素的特點宏胯。 也可以稱它們?yōu)樾袃?nèi)塊元素。它們具有以下特點：
- 和相鄰行內(nèi)元素（行內(nèi)塊）在一行上本姥，但是他們之間會有空白縫隙
- 默認(rèn)寬度就是它本身內(nèi)容的寬度
- 高度肩袍，行高、外邊距以及內(nèi)邊距都可以控制（塊級元素特點）
四婚惫、元素模式的轉(zhuǎn)換
- 轉(zhuǎn)換為塊元素：display:block;
- 轉(zhuǎn)換為行內(nèi)元素：display:inline;
- 轉(zhuǎn)換為行內(nèi)塊元素：display: inline-block;
