盒子模型
頁面元素的大小
邊框與其他元素的距離
定位機制
文件流浮動定位
層定位
盒子模型組成
>
>
charset
="utf-8"
>
type
="text/css"
>
#box
style
>
head
>
>
"box"
>
內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容
div>
body
>
html
>
border屬性
>
>
charset
="utf-8"
>
type
="text/css"
>
.box
style
>
head
>
>
class
="box"
>
內容內容內容
內容內容內容
div>
body
>
html
>
*外邊距方向
padding: 5px;
margin: 10%;
上右下左
padding-top: 5px;
margin-top: 10%;
上padding-right: 5px;
margin-right: 10%;
右padding-bottom: 5px;
margin-bottom: 10%;
下padding-left: 5px;
margin-left: 10%;
左水平居中
div水平居中：margin: # auto;（左側和右側取值設為auto，瀏覽器根據外層區域的寬度以及當前div區域的寬度自動將div區域水平居中）
案例
前端基礎筆記 CSS 04 浮動
清除浮動 1.普通流 標準流 2.浮動 讓盒子從普通流中浮起來，主要作用是讓多個塊級盒子在一行內顯示。3.定位 將某個盒子定位在瀏覽器的某一固定位置。float的語法 選擇器 例1 兩個普通流塊級元素各佔一行從上到下順序排列 當給乙個元素設定浮動之後，它就會 飄起來 例2 將三個塊級元素設定disp...
前端學習之路css 04 基礎知識
分組選擇器 在樣式中，我們可能有很多元素擁有同樣的樣式，我們可以使用分組選擇器將它們一次性定義出來。每個選擇器用逗號分隔。巢狀選擇器 它適用於選擇器內部的選擇器樣式。css中允許我們控制元素的寬高，屬性大致包括以下 此屬性就是控制元素是否顯示的。隱藏元素有兩種表示方式 visibility hidd...
浮動詳細解說 CSS 04
一 浮動 1.1css布局的三種機制 1 普通流 標準流 2 浮動 讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示 3 定位 讓盒子定在瀏覽器的某乙個位置 css離不開定位，特別是後面的js特效 1.2為什麼需要浮動 如何讓多個盒子水平排列成一行？如何讓盒子左右對齊？行內塊元素有缺陷 1 它...