css常用屬性
?盒模型
包含：內(nèi)容、padding、border、margin
盒模型相關(guān)屬性
內(nèi)容屬性
?width屬性：元素的寬度
height屬性：元素的高度
屬性值單位像素
?width: 100px;? 元素的寬度100像素
height: 100px; 元素的高度100像素
padding屬性：內(nèi)填充
?padding: 10px 20px 30px 40px;/* 元素的上10像素、右20像素、下30像素、左40像素的內(nèi)填充 */
padding-top屬性? 上內(nèi)填充
?padding-right屬性? 右內(nèi)填充
?padding-bottom屬性? 下內(nèi)填充
padding-left屬性? 左內(nèi)填充
背景在padding區(qū)域顯示
?border屬性：邊框
?border-left屬性 左邊框
border-right屬性 右邊框
?border-top屬性 上邊框
border-bottom屬性? 下邊框
屬性值：
邊框?qū)挾?單位像素px
邊框線型 solid單實(shí)線、double雙實(shí)現(xiàn)、dotted點(diǎn)狀虛線、dashed條狀虛線、none沒(méi)有邊框
?邊框的顏色 關(guān)鍵詞
?border-top: 10px solid red;
border屬性：元素的四周都有邊框
border: 邊框?qū)挾? 邊框線型? 邊框顏色;
?margin屬性? 外間距
?margin: 10px 20px 30px 40px;/* 元素有上10像素，右20像素，下30像素，左40像素的外間距 */
?margin-top 屬性? 上外間距
?margin-right屬性 右外間距
?margin-bottom屬性? 下外間距
?margin-left屬性? 左外間距
文字相關(guān)屬性
在Photoshop中，選中圖層（T），“窗口”菜單--“字符”打開字符面板，獲取文字樣式。
打開Photoshop，英文狀態(tài)快捷鍵T；在工作區(qū)位置單擊，輸入相應(yīng)文字--ctrl + enter；調(diào)整字號(hào)；英文狀態(tài)快捷鍵v，移動(dòng)文字圖層，與效果圖吻合，保存為.psd文件（分層文件）
font-size屬性 字號(hào) 屬性值單位像素
?font-family屬性 字體
屬性值：
字體名稱為中文或字體中包含空格，字體名稱必須加引號(hào)
可以設(shè)置多種字體，后面字體作為備用字體，多個(gè)字體名稱之間用逗號(hào)隔開
?font-weight屬性 文字加粗
font-weight: bold; 文字加粗
font-weight: normal; 正常
font-style屬性? 文字樣式
font-style: italic; 文字傾斜
?font-style: normal; 正常
?line-height屬性 行高? 單位px|沒(méi)有單位（字號(hào)的倍數(shù)）
在Photoshop中：
標(biāo)尺：“視圖”帶單--標(biāo)尺 或? ctrl + r
參考線：在標(biāo)尺上按住鼠標(biāo)左鍵不松手，拖拽鼠標(biāo)
?矩形選框工具
修改單位：“編輯”--“首選項(xiàng)”--“單位與標(biāo)尺”，修改單位（標(biāo)尺單位像素，文字單位像素），單擊保存
文字在行高范圍內(nèi)垂直居中
文本相關(guān)屬性
?color屬性? 文字樣式
關(guān)鍵詞：red? blue? green? pink
十六進(jìn)值色值: #加六位十六進(jìn)制數(shù)（0-9 a-f）
在photoshop中，英文狀態(tài)快捷鍵i，右鍵單擊--拷貝顏色的十六進(jìn)制代碼
rgba(r,g,b,a)
r-red 取值范圍0-255
g-green? 取值范圍0-255
b-blue? 取值范圍0-255
a-alpha? 取值范圍0~1之間表示半透明，1完全不透明，0完全透明
text-align屬性 文本水平對(duì)齊方式
text-align: left; 左對(duì)齊
text-align: center; 居中對(duì)齊
text-align: right; 右對(duì)齊
?text-indent屬性 文本縮進(jìn)? 單位px|em(字符寬度的倍數(shù))
?text-decoration屬性 文本裝飾線
?text-decoration: none; 去掉文本裝飾線
text-decoration: line-through; 刪除線
?text-decoration: underline; 下劃線
?信息面板：“窗口”帶單--“信息”? 或 F8
背景屬性——要顯示背景，元素必須要有尺寸
background-color屬性 背景顏色
?默認(rèn)顏色為透明transparent
屬性值可以為
?關(guān)鍵詞
?十六進(jìn)制色值
?rgba(r,g,b,a)
background-image屬性? 背景圖片
background-image: url();
默認(rèn)重復(fù)平鋪，鋪滿整個(gè)元素
?background-repeat屬性? 是否重復(fù)
no-repeat? 不重復(fù)
repeat-x? 沿著水平方向重復(fù)
epeat-y? 沿著垂直方向重復(fù)
?background-position屬性 背景圖定位
屬性值：
?數(shù)值
關(guān)鍵詞：left|center|right|top|center|bottom
位置屬性?
文檔流
塊級(jí)元素——默認(rèn)垂直顯示
行級(jí)元素、行塊元素——默認(rèn)水平顯示
margin屬性
浮動(dòng)——元素水平方向移動(dòng)
屬性
float: left; 左浮動(dòng)
float: right; 右浮動(dòng)
?浮動(dòng)元素不占位，父級(jí)盒高度為0
?清浮動(dòng)的方法
? ? ? ? ? ? .clearfix::after{
? ? ? ? ? ? ? ? content: "";
? ? ? ? ? ? ? ? display: block; /*將其他類型元素轉(zhuǎn)為塊級(jí)*/
? ? ? ? ? ? ? ? clear: both; /* 清浮動(dòng) */}
定位——出現(xiàn)覆蓋關(guān)系
屬性：
?position: relative; 相對(duì)定位，可以作為絕對(duì)定位的參照元素——元素占位
?position: absolute; 絕對(duì)定位，需要做特殊位置調(diào)整的元素——元素不占位
?位置屬性：
?left:0; | right:0;
?top: 0; | bottom: 0;
不能單獨(dú)使用，必須與position屬性組合使用才會(huì)有效
其他屬性
vertical-align屬性 垂直對(duì)齊方式
ertical-align: top; 頂端對(duì)齊
vertical-align: bottom; 底端對(duì)齊
vertical-align: middle; 中部對(duì)齊
?圖片下方間隙
?display屬性? 框類型轉(zhuǎn)換
display: block; 將其他類型的元素轉(zhuǎn)為塊級(jí)元素，具有塊級(jí)元素的特性
