【文件流】
元素自上而下，自左而右，塊元素獨佔一行，行內元素在一行上顯示，碰到父級元素的邊框換行。
【浮動布局】
float:left | right
元素浮動後不佔據原來的位置（脫標，可看作飛起來了）
浮動的盒子在一行上顯示
【浮動的作用】
1.文字繞圖
讓（img）浮動，文字不會在它後面，而是會環繞。
2.製作導航
使li浮動，可以在一行顯示
3.網頁布局
【清除浮動】
當父盒子沒有定義高度，巢狀的盒子浮動後，下邊的元素發生位置錯誤。
清除浮動不是不用浮動，而是清除浮動產生的不利影響。
方法：clear：left | right | both；
1.額外標籤法：在最後乙個浮動元素後新增標籤。
2.給父級元素使用overflow：hidden；
當有內容出了盒子，不能使用這個方法。
3.偽元素清除浮動
.clearfix：after{
content：「.」；
display：block；
height：0；
line-height：0；
visibility：hidden；
clear：both；
相容ie瀏覽器：
.clearfix{
zoom：1；
【css初始化】直接去**複製源**
【overflow屬性】
overflow：visible； 預設值，內容不會被修剪，會呈現在元素框之外
overflow：hidden； 內容會被修剪，並且其其餘內容是不可見的
overflow：scroll； 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容，不管內容出不出都設滾動條
overflow：auto； 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容
【定位】
定位的方向：left | right | top| bottom
position：static； 靜態定位，預設值，就是文件流
position：absolute； 絕對定位
特點：1.元素使用後不佔據原來的位置，會脫標；
left：100px； 向左走100px
bottom：100px； 向下走100px
2.元素使用絕對定位，位置是從瀏覽器出發
3.巢狀的盒子，父盒子沒有使用定位，子盒子的位置還是從瀏覽器出發
4.巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子的位置是從父盒子出發
5.給行內元素使用絕對定位之後，轉換為行內塊元素
position：relative； 相對定位
特點：1.使用相對定位，位置從自身出發
2.不脫標，還佔據原來的位置
3.子絕父相（父元素相對定位（不脫標），子元素絕對定位（會脫標））
4.行內元素使用相對定位不能轉行內塊元素
position：fixed； 固定定位
固定定位之後不佔據原來的位置，會脫標；位置從瀏覽器出發；
元素使用固定定位之後會轉化成行內塊元素
2020 11 03 學習總結 css基礎4
網頁元素的狀態 在文件流中 不在文件流中 網頁元素在文件流中的特點 塊元素獨佔一行 從上到下排列 寬度預設是父元素的寬度 不能超過父元素寬度 高都預設被內容撐開 行元素不獨佔一行 從左到右依次排列 如果一行不能容納 則換行繼續從左到右依次排列 寬高預設被內容撐開none 預設值 不浮動 left 左...
前端基礎（4） CSS 基礎語法（1）
日期 2017 10 26 通過使用 css 我們可以大大提公升網頁開發的工作效率！html 標籤原本被設計為用於定義文件內容，如下例項 這是乙個段落。樣式表定義如何顯示 html 元素，就像 html 3.2 的字型標籤和顏色屬性所起的作用那樣。樣式通常儲存在外部的 css 檔案中。通過僅僅編輯乙...
前端基礎（4） css盒模型
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框 邊界 補白 內容區，這就是盒模型。說明 填充 padding,在設定頁面中乙個元素內容到元素的邊緣 邊框 之間的距離。也稱補白。用法 1 用來調整內容在容器中...