CSS 基本樣式：寬高糯景、邊框荧关、邊距魏颓、display字體格仲、文本、顏色
關(guān)鍵詞：塊級元素+行內(nèi)元素引颈、寬高耕皮、邊框(制作三角形)、邊距蝙场、display(CSS繼承)凌停、font、文本售滤、顏色罚拟、單位台诗、其他（a鏈接、小圓點(diǎn)）
注意：默認(rèn)樣式1em=16px
寬高-width赐俗、height?只對塊級元素設(shè)置生效拉队，對行內(nèi)元素設(shè)置無效
邊框-border 邊框的幾個元素?粗細(xì)、顏色阻逮、類型（實(shí)線氏仗、虛線、點(diǎn)線）
border-width 粗細(xì)
border-color 顏色
border-style style:solid 實(shí)線?
style:dotted 點(diǎn)線?
style:dashed 虛線
第一個：style：solid 實(shí)線
第二個：style：dotted 點(diǎn)線
第三個：style：dashed 虛線
第四個：組合
第五個：去掉一邊
2夺鲜、如何使用邊框做三角形？
width:0; //中間的區(qū)域的寬和高 height:0;?
//中間的區(qū)域的寬和高 border-top:30px solid transparent; border-left:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid blue;
第一個：
第二個：
第三個：transparent 透明
四呐舔、邊距
1币励、盒模型
padding-內(nèi)邊距?四個方向的值，可以合寫珊拼，值是數(shù)值食呻、百分比（相對于父容器，不是自身）
padding-top padding-right padding-bottom padding-left
margin-外邊距?四個方向的值澎现，可以合寫仅胞，值可以是數(shù)值、百分比（相對于父容器剑辫，不是自身）干旧，還可以是負(fù)值
外邊距合并問題 行內(nèi)元素中，使用margin和padding左右生效 塊級元素居中?margin:0 auto清除元素默認(rèn)樣式的margin 和padding?*{margin:0; padding:0;}
行內(nèi)元素中妹蔽，使用margin和padding左右生效椎眯，上下不生效，如圖：
margin:0 auto 塊級元素居中
對于塊級元素設(shè)置?margin:0 auto（即：margin:0 auto 0 auto;）達(dá)到居中目的
清除元素默認(rèn)樣式的margin 和padding?由于頁面元素在瀏覽器會有自身的默認(rèn)樣式
margin 和padding清除瀏覽器的固定樣式胳岂，重新設(shè)置寬高
display-布局
1编整、塊級和行內(nèi)布局：
塊級：block，list-item,table 行內(nèi)：inline乳丰，inline-table掌测，inline-block
display:inline
display:inline-block
2、CSS繼承和不繼承
繼承：每一個父級元素的CSS屬性值都可以被應(yīng)用到它的子元素产园」可繼承屬性：font-size、font-family淆两、color
C不繼承：頁面細(xì)節(jié)元素断箫，border、padding秋冰、margin仲义、background-color 、width、height
六埃撵、font（可繼承）
font-size：字體大小?12px（較姓月）14px（正常）16px（瀏覽器默認(rèn)）20px（標(biāo)題大小）22暂刘、28饺谬、60px（大標(biāo)題大小）?font-family：字體?常用Arial?font-weight：文字粗度?常用默認(rèn)值：regular谣拣、bold?line-height：行高（文字大小）?可以用百分比募寨、倍數(shù)或者固定尺寸。?font-size*line-height?：垂直高度（行+文字占據(jù)的垂直空間）
body{
? font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
或者
p {
? line-height: 1.5;
? font-size: 14px;
? font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
? font-weight: bold;
}
2森缠、font-family
（1）字體原理
使用瀏覽器打開頁面時拔鹰，瀏覽器會讀取 HTML 文件進(jìn)行解析渲染。當(dāng)讀到文字時會轉(zhuǎn)換成對應(yīng)的 unicode碼（可以認(rèn)為是世界上任意一種文字的特定編號）贵涵。再根據(jù)HTML 里設(shè)置的 font-family （如果沒設(shè)置則使用瀏覽器默認(rèn)設(shè)置）去查找電腦里（如果有自定義字體@font-face 列肢，則加載對應(yīng)字體文件）對應(yīng)字體的字體文件。找到文件后根據(jù) unicode 碼去查找繪制外形宾茂，找到后繪制到頁面上
（3）font-family寫法
在 CSS 中設(shè)置字體時瓷马，直接寫字體中文或英文名稱瀏覽器都能識別，直接寫中文的情況下編碼（GB2312跨晴、UTF-8 等）不匹配時會產(chǎn)生亂碼欧聘。保險的方式是將字體名稱用Unicode來表示
宋體?| SimSun | \5B8B\4F53?（Unicode碼）
黑體?| SimHei | \9ED1\4F53
微軟雅黑?| Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
？可打開控制臺 escape('微軟雅黑')坟奥，將 %u替換成 \
3树瞭、chrome最小字體
chrome 默認(rèn)字體大小16px, 最小字體 12px
若需要小于12px的字體，可參考以下解決方案：Web-Developer/compatible-with-less-than-12px-fontsize.md at master · islittle/Web-Developer · GitHub
文本
1爱谁、類型
text-align：?文本對其方式 left晒喷、center（行內(nèi)元素居中）、right访敌、justify（≈兩端對齊）text-indent：文案第一行縮進(jìn)距離?text-decoration：none（去掉下劃線）凉敲、underline(增加下劃線)、line-through（刪除線）寺旺、overline（頂部線）?color：?文字顏色?text-transform：改變文字大小?none（不改寫）爷抓、uppercase（小寫展示大寫） lowercase（大寫展示小寫）、capitalize（單詞的首字母變大寫展示）?word-spacing：可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔（對于中文阻塑，每字就是一單詞）?letter-spacing：字母間隔修改的是字符或字母之間的間隔
圖：
2蓝撇、單行文本溢出
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
.card > h3{
? white-space: nowrap; //規(guī)定段落中的文本不進(jìn)行換行
? overflow: hidden; //清除浮動
? text-overflow: ellipsis;
}
顏色
1、單詞：?red陈莽、blue渤昌、pink虽抄、yellow、white独柑、black
2迈窟、十六進(jìn)制：
#ff0000 紅色
#0000ff 藍(lán)色
#008000 綠色
#000000（黑色）= #000
#ffffff（白色）= #fff
#eeeeee（淡灰色）= #eee
#cccccc（灰色）= #ccc
#666666（深灰色）= #666
#333333（深黑色）= #333
#f00（紅色）
#0f0（綠色）
#00f（藍(lán)色）
rgb:?rgb(255,255,255)，rgb(0,255,0)
rgba:?rgba(0,0,0,0.5)?css3中涉及
九忌栅、單位
px?固定單位?em?長度單位（相對于當(dāng)前元素的字體大小）?rem?相對于根元素（html）字體大小车酣，即1rem = font-size。移動端較常用索绪。?vw vh?相對單位湖员，1vw為屏幕寬度的1%?兼容性較差?百分比?涉及寬高？文字大腥鹎破衔？line-height、position
1钱烟、px：固定單位
2、em：相對長度單位嫡丙，相對于當(dāng)前元素的字體大小拴袭。
3、rem：相對單位曙博，相對于根元素（html）字體大小拥刻，即1rem = html設(shè)置的font-size。移動端較常用父泳。
4般哼、vw vh：相對單位，1vw為屏幕寬度的1%?兼容性較差
5惠窄、百分比：（涉及寬高蒸眠？文字大小杆融？line-height楞卡、position）
其他
a鏈接?text-decoration: none;?ul/li(列表)?list-style: none;
1、a鏈接設(shè)置顏色
當(dāng)鼠標(biāo)放置a鏈接脾歇，本身就會出現(xiàn)“手”指針的形狀效果
a有默認(rèn)顏色和樣式蒋腮，會覆蓋繼承的樣式
a{
color：red；
text-decoration: none;
}
2池摧、列表去掉點(diǎn)
/* 設(shè)定列表樣式為：無 ,即沒有順序數(shù)字、圓點(diǎn)出現(xiàn)*/
ul{
? list-style: none;
}
/*也可這樣*/
li{
? list-style: none;
}
如圖：
CSS 基本樣式：背景激况、隱藏&透明作彤、inline-block膘魄、line-height
（一）CSS基本樣式
關(guān)鍵詞：背景、隱藏&透明宦棺、display:inline-block瓣距、（文本行高）line-height、
一代咸、背景
屬性 描述
background?簡寫屬性蹈丸，將背景屬性設(shè)置在一個生命中
background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動
background-color?可設(shè)置元素的背景顏色
background-image?可把圖像設(shè)置為背景
background-position 設(shè)置背景圖像的起始位置（常用于圖標(biāo)在頁面上的設(shè)置）
background-repeat?設(shè)置背景圖像是否重復(fù)，以及如何重復(fù)
background-size 設(shè)置背景的大心沤妗（兼容性）（css3）
1逻杖、background-position：默認(rèn)圖片主要從左上角方向偏移
x y
x% y%
[top | center | bottom] [left | center | right]
2、background-repeat：背景圖像是否重復(fù)或如何重復(fù)
no-repeat：背景圖片在規(guī)定位置
repeat-x：圖片橫向重復(fù)
repeat-y：圖片縱向重復(fù)
repeat：全部重復(fù)
3思瘟、background-size：背景圖片大小的設(shè)置荸百，用來拉伸、縮放
100px 100px
contain
cover
4滨攻、關(guān)于background相關(guān)元素的屬性够话，
代碼：
/*背景色和背景圖片使用場景
場景1：兩元素適用于頁面大、背景圖片小
場景2：背景圖為.png格式的圖片*/
background-color: #f00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
/*背景位置與頁面窗口的寬光绕、高成正相關(guān)*/
可縮寫為一句：
background: #f00? url(background.gif)? no-repeat? fixed? 0 0;
注：使用background-color和background-image诞帐，需要注意：
（1）將該頁面撐開
（2）注意background-size使用
三欣尼、隱藏or透明
opacity: 0;?透明度為0，整體（透明度0-1停蕉，0.5為半透明）
visibility: hidden;?即元素看不見愕鼓，但存在。 和opacity：0慧起；類似
display：none菇晃；?消失，不占位置（頁面上渲染的其他元素都察覺不到）
background-color：rgba（0蚓挤，0谋旦，0，0.2）?只是背景色透明
四屈尼、inline-block
1册着、定義：既呈現(xiàn)inline特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定）脾歧，又呈現(xiàn)block特性（可設(shè)置寬高甲捏，內(nèi)外邊距）
注：display:block;的布局下，塊級元素的寬度是一個可忽視的問題
2鞭执、縫隙問題：如圖司顿，
3芒粹、行內(nèi)元素對齊問題：如圖，
在inline-block的布局下大溜，可以看成文字對齊化漆。默認(rèn)情況下，行內(nèi)元素對齊是以里面內(nèi)容的底部為基線對齊（至少兩個元素進(jìn)行對比）钦奋，其他則設(shè)置vertical-align：top（bottom座云、middle等）進(jìn)行基線對齊（在表格中使用尤為明顯）
五、line-height
1付材、定義：用于設(shè)置單行文本的行高朦拖。
2、幾個問題：
（1）了解line-height和margin厌衔、padding在使用上的一個區(qū)別
line-height: 2璧帝，所占據(jù)的行高是本身文字高度的2倍。margin是外邊距富寿，padding則是內(nèi)邊距
（2）line-height的用法睬隶，數(shù)字和百分比的區(qū)別
line-height：2 VS line-height： 100%
line-height具有繼承性。
line-height: 2页徐，所占據(jù)的行高是本身文字高度的2倍理疙。想要頁面每個元素都擁有幾倍的行高，則設(shè)置為數(shù)字泞坦。
line-height: 200% ，是其父元素文字高度的2倍砖顷。（注：百分比有一定的相對性贰锁，如本身無設(shè)置和設(shè)置百分比，便可看出差別）
3滤蝠、height=line-heihgt
設(shè)置垂直居中單行文本豌熄，如圖：
補(bǔ)充
一、讓一個元素"看不見"有幾種方式物咳？有什么區(qū)別?
1锣险、display: none;
給元素設(shè)置display: none;后，元素會從頁面中徹底消失览闰，它原本占據(jù)的空間會被其他元素占有芯肤，會造成瀏覽器的回流與重繪。
2压鉴、visibility: hidden;
給元素設(shè)置visibility: hidden;后崖咨，元素會從頁面中消失，它原本占據(jù)的空間會被保留油吭，會造成瀏覽器的重繪击蹲，適用于希望元素隱藏又不影響頁面布局的場景署拟。
3、opacity: 0;
給元素設(shè)置opacity: 0;后歌豺，元素變成透明的我們?nèi)庋劬涂床坏搅送魄睿栽菊紦?jù)的空間還在。
4类咧、設(shè)置盒模型屬性為0
將height馒铃、width、padding轮听、border骗露、margin等盒模型屬性的值全設(shè)為0，如果元素內(nèi)還有子元素或內(nèi)容血巍，還應(yīng)overflow: hidden;來隱藏子元素萧锉。
.box1 {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? padding: 0;
? ? ? ? border: 0;
? ? ? ? margin: 0;
? ? ? ? overflow: hidden;
}
5、設(shè)置元素絕對定位與top述寡、right柿隙、bottom、left等將元素移出屏幕
如：
.box1 {
? ? ? ? position: absolute;
? ? ? ? left: 100%;
}
或:
.box1 {
? ? ? ? position: absolute;
? ? ? ? top: 100px;
}
6鲫凶、設(shè)置元素的絕對定位與z-index禀崖，將z-index設(shè)置成盡量小的負(fù)數(shù)。
但z-index是相對而言的 螟炫，用z-index就要設(shè)置其他元素的z-index值波附，且如果元素本身占據(jù)空間很大就不一定會被z-index值比它大的元素完全覆蓋，所以不推薦這種方法昼钻。 如：
.box1 {
? ? ? ? position: absolute;
? ? ? ? z-index: -100;
}
.box2 {
? ? ? ? position: absolute;
? ? ? ? z-index: 1;
}
inline-block 元素對不齊 ——無解 —— 用 flex 或 float
inline-block 有空隙 ——用 flex 或 float
