1. 盒子
針對於塊元素來說(比如div,ul,li,h1等)
基本屬性:
外邊距 margin(當前盒子與其他元素的距離)
margin-top
margin-right
margin-bottom
margin-left
基本用法:(margin:0 auto能讓塊級元素在父元素中居中顯示)
margin:10px; 上右下左
margin:0 10px; 上下，左右
margin:0 10px 5px; 上 左右 下
margin:0 10px 5px 20px; 上 右 下 左
邊框 border
盒子邊框(border:1px solid #ccc;)分為以下三個
border-color(也可分為上下左右邊框)
border-width(邊框寬度)
border-style(邊框樣式)
內邊距 padding(屬性與margin相似)內邊框距離內容的距離
padding:0 10px 5px;
盒子計算方式
1)box-sizing: border-box (邊框盒子,border為邊框寬度)
width = 2*border + 2*padding + 內容寬度
height = 2*border + 2*padding + 內容高度
2)box-sizing: content-box(內容盒子)
width = 內容寬度
height = 內容高度
2. 布局 :一般通過塊元素進行布局，但是塊元素的特點是獨佔一行空間，通過特殊的機制使得多個塊元素能夠在一行中顯示
1) 行布局(利用塊元素的特點來進行布局)乙個塊元素獨佔一行空間
2) 浮動布局(float:left使此元素下的子塊級元素統一像左浮動)如果給塊元素加，塊元素的寬度就不再佔據整個螢幕，而是由內容決定
如果list的子元素都浮動，那麼他們會排列在一行，如果當前行放不下，會自動換行
元素浮動後的特點：
1. 脫離文件流，原來的位置會被其他元素佔據
2. 寬度預設由內容決定
3. 在同一父元素中的多個浮動元素會在一行中排布，如果放不下會自動換行
4. 元素浮動後不再對父元素起到支撐作用
1) 左右布局（方式一）
左側元素浮動，右側元素新增margin-left
左右元素不再同乙個文件流中，不會相互擠壓
2) 左右布局（方式二）
左側元素浮動，右側元素也浮動
商品列表
3) 定位布局
position:static;【預設】
如果position的取值為以下值之一
relative,absolute,fixed
那麼當前元素就為【定位元素】，定位元素可以使用top/bottom/right/left屬性來進行定位
1) 相對定位(position:relative;
相對點：相對於當前元素所在位置
特點：原來所在位置不會被其他元素佔據。在變成相對定位的時候該元素的寬高還是符合塊元素的特點，不脫離文件流
應用: 為其他子元素提供相對點
2) 絕對定位(position:absolute;
相對點：相對於距離它最近的父定位元素;如果父元素沒有定位元素那麼就相對於瀏覽器視口
特點：脫離文件流，不佔據元素原先所在的空間。與float類似，如果脫離了文件流，寬度由內容決定
應用：二級選單
3) 固定定位(position:fixed;
相對點：相對於瀏覽器視口
特點：脫離文件流，不佔據元素原先所在的空間。與float類似，如果脫離了文件流，寬度由內容決定
應用:聯絡客服對話方塊
4). 粘性定位（position:sticky)超過一定的值為相對定位
相對定位與固定定位的一種結合
flex: 1 1 300px;
flex: flex-grow flex-shrink flex-basis;
flex: 1;(只配置了flex-grow屬性)
5) 柵格系統(bootstrap 12柵格系統)
CSS基本布局 定位
css有三種基本的布局機制 標準流 浮動和定位。定位就是確定元素的位置，利用top right bottom left這四個偏移屬性，可以準確地定義元素框相對於其正常位置應該出現的位置。top的優先順序要高於bottom，left的優先順序要高於right 相對定位 相對於元素原有位置的定位。相對定...
CSS基本布局16例
css基本布局16例 單行單列 content voice family inherit width 370px html body content content voice family inherit width 370px html body content content voice fa...
CSS布局入門 css
css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位，通過層的margin,padding,border等屬性來控制版塊的間距。分析乙個典型的定義div例子 sample 說明如下 下面是這個層...