在長沙的網(wǎng)站制作公司，作為一名網(wǎng)站制作和建設(shè)人員，網(wǎng)站制作過程中的基礎(chǔ)布局技術(shù)是CSS中最基礎(chǔ)且必須掌握的。
1. 文檔流（Normal Flow）
這是瀏覽器默認(rèn)的布局方式，無需任何CSS設(shè)置。
-
塊級元素（如 <div>, <p>, <h1>）：獨(dú)占一行，從上到下垂直排列。
-
行內(nèi)元素（如 <span>, <a>, <img>）：在一行內(nèi)水平排列，直到放不下才會(huì)換行。
2. display 屬性
通過改變元素的 display 值，可以改變其布局行為。
-
display: block;：使元素變?yōu)閴K級元素。
-
display: inline;：使元素變?yōu)樾袃?nèi)元素。
-
display: inline-block;：元素像行內(nèi)元素一樣水平排列，但可以設(shè)置寬高（類似于替換元素）。
3. 浮動(dòng)（Float）
最初是為實(shí)現(xiàn)文字環(huán)繞圖片的效果，后來被廣泛用于多欄布局。
.left { float: left;
width: 30%;
}
.right { float: right;
width: 70%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
4. 定位（Position） 用于精確控制元素的位置。
-
static（默認(rèn)）：元素處于文檔流中。
-
relative（相對定位）：相對于自身原本的位置進(jìn)行偏移，原本空間保留。
-
absolute（絕對定位）：相對于最近的非 static 定位的祖先元素進(jìn)行定位，完全脫離文檔流。
-
fixed（固定定位）：相對于瀏覽器窗口進(jìn)行定位，脫離文檔流（常用于導(dǎo)航欄、彈窗）。
-
sticky（粘性定位）：在 relative 和 fixed 之間切換。在目標(biāo)區(qū)域內(nèi)表現(xiàn)為 relative，當(dāng)滾動(dòng)超出目標(biāo)區(qū)域時(shí)表現(xiàn)為 fixed（常用于表頭）。