CSS基礎知識
- 盒子模型
- 看透網頁布局的本質
- 概念
- 盒子邊框
- 內邊距
- 外邊距
- 塊級盒子水平居中
- 文字居中和盒子居中區別
- 清除元素的默認內外邊距
- 外邊距合并
- 相鄰塊元素垂直外邊距的合并
- 嵌套塊元素垂直外邊距的合并
- 盒子模型布局穩定性
- 浮動
- CSS 布局的三種機制
- 普通流（標準流）
- 浮動
- 定位
- 為什么需要浮動
- 什么是浮動
- 概念
- 作用
- 語法
- 特點
- 浮動的應用
- 浮動的擴展
- 清除浮動
- 為什么要清除浮動
- 清除浮動本質
- 清除浮動的方法
- 語法
- 額外標簽法
- 父級添加overflow屬性方法
- 使用after偽元素清除浮動
- 使用雙偽元素清除浮動
- Photoshop切圖
- PS切片工具
- 切圖插件
盒子模型
看透網頁布局的本質
首先利用CSS設定好盒子的大小，然后擺放盒子的位置，最后把網頁元素比如文字圖片等等，放入盒子里面，
概念
盒子模型由元素的內容邊框border內邊距padding和外邊距margin組成
盒子里面的文字和圖片等元素是內容區域，盒子的厚度我們稱為盒子的邊框
盒子內容與邊框的距離是內邊距，盒子與盒子之間的距離是外邊距
盒子邊框
語法
border:border-width粗細|border-style樣式|border-color顏色
邊框綜合設定
border: 1px solid red; 沒有順序
表格的細線邊框
cellspacing=“0” ,將單元格與單元格之間的距離設定為0
border-collapse:collapse; 表示相鄰邊框合并在一起
內邊距
padding屬性用于設定內邊距，是指邊框與內容之間的距離
屬性
padding-left左內邊距padding-right右內邊距padding-top上內邊距padding-bottom下內邊距
簡寫
2個值 padding: 上下內邊距 左右內邊距 ；
4個值 padding: 上內邊距 右內邊距 下內邊距 左內邊距 ；
內盒尺寸計算（元素實際大小）
盒子的實際的大小 = 內容的寬度和高度 + 內邊距 + 邊框
外邊距
margin屬性用于設定外邊距，margin控制盒子和盒子之間的距離，屬性和簡寫與padding相同
塊級盒子水平居中
盒子必須指定寬度（width）然后就給左右的外邊距都設定為auto
文字居中和盒子居中區別
盒子內的文字水平居中是text-align:center, 而且還可以讓行內元素和行內塊居中對齊
塊級盒子水平居中 左右margin 改為 auto
清除元素的默認內外邊距
代碼
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意
行內元素為了兼容性， 盡量只設定左右內外邊距， 不設定上下內外邊距
外邊距合并
相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并
解決方案
盡量給只給一個盒子添加margin值
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者
解決方案
可以為父元素定義上邊框
可以為父元素定義上內邊距
可以為父元素添加overflow:hidden
盒子模型布局穩定性
按照優先使用寬度（width）內邊距（padding）外邊距（margin）
原因
margin有外邊距合并還有ie6下面margin加倍的bug所以最后使用
padding會影響盒子大小，需要進行加減計算，其次使用
width沒有問題，經常使用寬度剩余法高度剩余法來做
浮動
CSS 布局的三種機制
普通流（標準流）
塊級元素會獨占一行，從上向下順序排列
行內元素會按照從左到右順序排列，碰到父元素邊緣則自動換行
浮動
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示
定位
將盒子定在瀏覽器的某一個位置
為什么需要浮動
因為行內塊元素可以實作多個元素一行顯示但中間會有空白縫隙
因為行內塊元素不能實作盒子左右對齊
什么是浮動
概念
元素的浮動是指設定了浮動屬性的元素
會脫離標準普通流的控制并可以移動到指定位置
作用
讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段
浮動最早是用來控制圖片，實作文字環繞圖片的效果
可以實作盒子的左右對齊等等
語法
選擇器 { float: 屬性值; }
屬性值
none（元素不浮動（默認））left（元素左浮動）right（右浮動）
特點
浮
加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面
漏
加了浮動的盒子不占位置，它原來的位置漏給了標準流的盒子
特
浮動元素改變display屬性， 類似轉換成行內塊元素，但是元素之間沒有空白縫隙
浮動的應用
浮動和標準流的父盒子搭配
實際的導航欄中不直接用鏈接a而是用li包含鏈接(li+a)
li+a語意更清晰
直接用a搜索引擎容易辨別為有堆砌關鍵字嫌疑而影響網站排名
浮動的擴展
浮動元素與父盒子的關系
子盒子的浮動參照父盒子對齊
不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
浮動元素與兄弟盒子的關系
在一個同一個父級盒子中，如果前一個兄弟盒子是浮動的，那么當前盒子會與前一個盒子的頂部對齊
在一個同一個父級盒子中，如果前一個兄弟盒子是普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方
清除浮動
為什么要清除浮動
浮動元素不占用原檔案流的位置，會對后面的元素排版產生影響
清除浮動本質
父級元素因為子級浮動導致內部高度為0，清除浮動后，父級會根據浮動的子盒子檢測高度，父級有高度就不會影響下面的標準流
清除浮動的方法
語法
選擇器{clear:屬性值;} clear 清除
屬性值
left清除左浮動right清除右浮動both同時清除左右浮動
額外標簽法
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如<div style=”clear:both”></div>，或則其他標簽br等亦可
優缺點
通俗易懂，書寫方便，但是添加許多無意義的標簽，結構化較差
父級添加overflow屬性方法
可以給父級添加：overflow為hidden|auto|scroll都可以實作
優缺點
代碼簡潔，但是內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素
使用after偽元素清除浮動
:after 方式為空元素額外標簽法的升級版，.clearfix:after { content: ""; display: block; height: 0; clear: both;visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 專有 */
優缺點
符合閉合浮動思想結構語意化正確，但是由于IE6-7不支持:after，使用zoom:1觸發hasLayout
使用雙偽元素清除浮動
方法
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優缺點
代碼更簡潔，但由于IE6-7不支持:after使用zoom:1觸發hasLayout
Photoshop切圖
PS切片工具
用切片選中圖片
利用切片工具手動劃出，圖層選單—新建基于圖層的切片，利用輔助線 來切圖–基于參考線的切片
匯出切片
檔案選單–存盤為web設備所用格式–選擇我們要的圖片格式–點存盤–選中的切片
切圖插件
Cutterman是photoshop中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工挨個切圖的繁瑣流程
官網
http://www.cutterman.cn/zh/cutterman
cutterman插件要求你的ps 必須是完整版，不能是綠色版
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/6324.html
標籤：其他