Css梳理
- 選擇器：
- 常見(jiàn)樣式：
選擇器
- 基本選擇器：
- 標(biāo)簽選擇器
- 類選擇器
- id 選擇器
- 高級(jí)選擇器
- 后臺(tái)選擇器：中間是空格
- 交集選擇器：點(diǎn)號(hào)
- 并集選擇器：逗號(hào)
- 標(biāo)簽選擇器
- id選擇器
- 類選擇器： 一個(gè) class 里可以有多個(gè)類
- 后代選擇器：空格代表后代
- 交集選擇器：中間沒(méi)有空格
- 并集選擇器：中間是逗號(hào)
常見(jiàn)樣式
沒(méi)什么難的菩佑，就是要多看多記
- color:red ; 字體顏色脱茉；c
- font-size:40px ;字號(hào)大小坏平；fos
- background-color: blue; 背景顏色; bgc
- font-weight: bold; 加粗; fwb, 不加粗： fwn巍膘，屬性為normal
- font-style: italic; 斜體;fsi, 也可以是:normal, fsn
- text-decoration: underline; 下劃線冶伞；tdu助隧，也可以是：none， tdn
繼承性和疊層性
繼承性：自己有的屬性嫌变，后臺(tái)也會(huì)繼承這些屬性：這些關(guān)于文字樣式的，都能夠繼承躬它； 所有關(guān)于盒子的腾啥、定位的、布局的屬性都不能繼承。
疊層性：就是css處理沖突的能力倘待，有多個(gè)css定義的時(shí)候疮跑，要進(jìn)行權(quán)重計(jì)算，詳細(xì)看CSS第2天筆記最后面
盒子模型
width凸舵，height
-
margin祖娘， padding
如果寫了四個(gè)值：
padding:30px 20px 40px 100px, 順序?yàn)樯嫌蚁伦?br> 如果寫了三個(gè)值：上右下，左邊和右邊相同
如果寫了兩個(gè)值：上右啊奄，缺少的地方和對(duì)邊相同
一些元素渐苏，默認(rèn)帶有padding，比如ul標(biāo)簽菇夸，我們?yōu)榱俗稣镜臅r(shí)候琼富，便于控制，總是喜歡清除這個(gè)默認(rèn)的padding： -
border
border屬性能夠被拆開(kāi)庄新，有兩大種拆開(kāi)的方式：
1） 按3要素:border-width鞠眉、border-style(solid dashed dotted)、border-color
2） 按方向：border-top择诈、border-right械蹋、border-bottom、border-left
標(biāo)準(zhǔn)文檔流
塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽
Html 把標(biāo)簽分為容器級(jí)和文本級(jí)羞芍，CSS把標(biāo)簽分為塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽
-
塊級(jí)元素
● 霸占一行朝蜘，不能與其他任何元素并列
● 能接受寬、高
● 如果不設(shè)置寬度涩金，那么寬度將默認(rèn)變?yōu)楦赣H的100%谱醇。
-
行內(nèi)元素
● 與其他行內(nèi)元素并排
● 不能設(shè)置寬、高步做。默認(rèn)的寬度副渴，就是文字的寬度。
通過(guò) display:inline/block可以兩者相互轉(zhuǎn)換
脫離標(biāo)準(zhǔn)流有三種方式：
- 浮動(dòng)
- 絕對(duì)定位
- 固定定位
浮動(dòng)
特性：
- 浮動(dòng)的元素脫標(biāo)
- 浮動(dòng)的元素互相貼靠
- 浮動(dòng)的元素有“字圍”效果：不浮動(dòng)的標(biāo)簽會(huì)貼著浮動(dòng)的標(biāo)簽
一個(gè)span標(biāo)簽不需要轉(zhuǎn)成塊級(jí)元素全度，就能夠設(shè)置寬度煮剧、高度了。所以能夠證明一件事兒将鸵，就是所有標(biāo)簽已經(jīng)不區(qū)分行內(nèi)勉盅、塊了。
也就是說(shuō)顶掉，一旦一個(gè)元素浮動(dòng)了草娜，那么，將能夠并排了痒筒，并且能夠設(shè)置寬高了宰闰。無(wú)論它原來(lái)是個(gè)div還是個(gè)span茬贵。
float: left 浮動(dòng)標(biāo)簽
浮動(dòng)有時(shí)候會(huì)對(duì)我們想要的效果有影響，例如：
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語(yǔ)水平</li>
<li>面試技巧</li>
</ul>
</div>
我們本以為這些li移袍，會(huì)分為兩排解藻，但是，第二組中的第1個(gè)li葡盗，去貼靠第一組中的最后一個(gè)li了,最終顯示一排螟左。
這時(shí)候就要用到清除浮動(dòng)了
清除浮動(dòng)
給父元素加上行高：只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素觅够。所以就是清除浮動(dòng)帶來(lái)的影響了胶背。但是一般我們不會(huì)給 div 設(shè)置高度，想要他的高度被內(nèi)容撐起來(lái)蔚约。
父元素加上：
clear:both標(biāo)簽奄妨，有副作用，margin 失效-
外/內(nèi)墻法：加一個(gè)清除浮動(dòng)的標(biāo)簽在中間苹祟，例如：
cl{ clear: both; } .h16{ height: 16px; } 偏方：
overflow:hidden
Margin
margin 塌陷問(wèn)題
標(biāo)準(zhǔn)文檔流中砸抛，豎直方向的margin不疊加，以較大的為準(zhǔn)
如果不在標(biāo)準(zhǔn)流树枫，比如盒子都浮動(dòng)了直焙，那么兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象的
盒子居中
直接寫成：margin : 0 auto
注意：
- 使用margin:0 auto; 的盒子，必須有width砂轻，有明確的width
- 只有標(biāo)準(zhǔn)流的盒子奔誓，才能使用margin:0 auto; 居中。
也就是說(shuō)搔涝，當(dāng)一個(gè)盒子浮動(dòng)了厨喂、絕對(duì)定位了、固定定位了庄呈，都不能使用margin:0auto;
- margin:0 auto;是在居中盒子蜕煌，不是居中文本。文本的：居中诬留，要使用
text-align:center
子標(biāo)簽的 margin 對(duì)父元素的影響
margin 適用于兄弟之間斜纪，如果用在父子之間不合適,如果父親沒(méi)有border，那么兒子的margin實(shí)際上踹的是“流”文兑，踹的是這“行”盒刚。所以，父親整體也掉下來(lái)了绿贞，設(shè)置margin-top因块，父元素也會(huì)往下有margin值，具體見(jiàn)CSS筆記第四章
font 類型標(biāo)簽樣式
主要有：
font-size
line-height
font-family
集中起來(lái)寫就是：font:12px/24px,"宋體" 行高也可以使用百分比的形式：font:12px/200%,"宋體"
a 標(biāo)簽樣式
偽類:一個(gè)標(biāo)簽樟蠕，不同的狀態(tài)有不同的樣式贮聂。
a:link/visited/hover/active, 必須要按照 love hate 愛(ài)恨準(zhǔn)則的順序?qū)懣扛蹋且话?visited/hover 不寫寨辩，就有下面的形式,寫兩種常用的：
a {
color:white;
}
a: hover {
color:blue;
}
background 標(biāo)簽樣式
主要有：
background-color: background-color: rgb(18,52,86); background-color:#ff0000;
background-image: background-image:url(images/wuyifan.jpg);
background-repeat:background-repeat:no-repeat/repeat-x/repeat-y
background-position:以屏幕左上角為起點(diǎn)進(jìn)行偏移吓懈，可以是像素：12px 24px，也可以是單詞：right bottom（圖片放到右下角）;
background-attachment：背景是否固定靡狞。如果是 background-attachment:fixed耻警，背景就會(huì)被固定住，不會(huì)被滾動(dòng)條滾走
綜合屬性：
background:red url(1.jpg) no-repeat 100px 100px fixed; 等價(jià)于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
定位
有三種：相對(duì)定位甸怕，絕對(duì)定位甘穿，固定定位
相對(duì)定位
相對(duì)于目前的位置進(jìn)行定位，不脫離標(biāo)準(zhǔn)流梢杭，只是影子出去了温兼，真實(shí)位置不變
用途：
- 微調(diào)元素
- 做絕對(duì)定位的參考，子絕父相
position: relative;
top: 10px; 相對(duì)原來(lái)位置的頂部10px武契，也就是向下移動(dòng)10px
left: 40px;
絕對(duì)定位
脫離標(biāo)準(zhǔn)流募判，絕對(duì)定位之后，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素咒唆、塊級(jí)元素了届垫，不需要display:block;就可以設(shè)置寬、高了：
span{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
參考點(diǎn)：
- 絕對(duì)定位的參考點(diǎn)全释，如果用top描述装处，那么定位參考點(diǎn)就是頁(yè)面的左上角,如果用bottom描述，那么就是瀏覽器首屏窗口尺寸浸船，對(duì)應(yīng)的頁(yè)面的左下角
- 一個(gè)絕對(duì)定位的元素妄迁，如果父輩元素中出現(xiàn)了也定位了的元素（一般設(shè)置為相對(duì)定位），那么將以父輩這個(gè)元素李命，為參考點(diǎn)登淘。
絕對(duì)定位的盒子居中：
絕對(duì)定位之后，所有標(biāo)準(zhǔn)流的規(guī)則项戴，都不適用了,所以margin:0 auto;失效, 如果想要居中形帮，就是 left:50%; margin-left: 負(fù)的寬度的一半。
width: 600px;
height: 60px;
position: absolute;
left: 50%;
top: 0;
margin-left: -300px; → 寬度的一半
固定定位
相對(duì)瀏覽器窗口定位周叮。頁(yè)面如何滾動(dòng)辩撑，這個(gè)盒子顯示的位置不變
position:fixed
z-index
- z-index值表示誰(shuí)壓著誰(shuí)。數(shù)值大的壓蓋住數(shù)值小的仿耽。
- 只有定位了的元素合冀，才能有z-index值。也就是說(shuō)项贺，不管相對(duì)定位君躺、絕對(duì)定位峭判、固定定位，都可以使用z-index值棕叫。而浮動(dòng)的東西不能用
- z-index值沒(méi)有單位林螃，就是一個(gè)正整數(shù)。默認(rèn)的z-index值是0俺泣。
- 如果大家都沒(méi)有z-index值疗认，或者z-index值一樣，那么誰(shuí)寫在HTML后面伏钠，誰(shuí)在上面能壓住別人横漏。定位了的元素，永遠(yuǎn)能夠壓住沒(méi)有定位的元素熟掂。
- 從父現(xiàn)象：父親慫了缎浇，兒子再牛逼也沒(méi)用
