-
設(shè)置background-origin之前必須先設(shè)置該盒子有padding，border，
查看全部 -
列間距
column-gap:normal，<length>可以使用px,em單位的任何整數(shù)值
查看全部 -
多列
列寬和列數(shù)
columns：150px 2;
要加各瀏覽器的私有前綴
-webkit-columns: 150px 3;
? -moz-columns: 150px 3;
? -o-columns:150px 3;
? -ms-columns: 150px 3;
查看全部 -
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
查看全部 -
chrome、safari、firefox、opera
查看全部 -
Text- shadow 設(shè)置文本的文字是否有陰影的效果查看全部
-
：inset 可以寫在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無效的。
查看全部 -
background-origin屬性可以改變背景圖片的初始位置，但是這個(gè)背景圖片必須是no-repeat
否則該屬性無效，并且從邊框開始顯示
這個(gè)屬性有三個(gè)值border-box/padding-box/content-box
他們分別代表的是：
1.從邊框開始顯示，也就是會(huì)被邊框給遮住一些
2.從內(nèi)邊距開始顯示，這是默認(rèn)值，通常我們使用的也是這個(gè)
3.從內(nèi)容區(qū)域開始顯示查看全部 -
text-shadow可以用來設(shè)置文本的陰影效果。
語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值為正值時(shí)陰影向右偏移，反之向左偏移； ? ? ?
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時(shí)，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負(fù)值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設(shè)置為0；
Color：是指陰影的顏色，其可以使用rgba色。查看全部 -
::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。/*類名為clearfix的div元素*/
.clearfix::before,
.clearfix::after?{
????content:?"";?/*content的中文是內(nèi)容，感覺是在div的前后插入?內(nèi)容為?空，相當(dāng)于加入一個(gè)空元素*/
????display:?block;?/*顯示為塊狀元素*/
????height:?0;?/*高度為0*/
????visibility:?hidden;?/*visbility是可見性，可視化的意思，hidden隱藏*/
}
.clearfix:after?{clear:?both;}/*clear?:?none?|?left|right|?both?。clear為清除浮動(dòng)，clear:both為清除全部浮動(dòng)*/
.clearfix?{zoom:?1;}/*低版本IE瀏覽器的清除浮動(dòng)*/陰影效果，也是通過這個(gè)來實(shí)現(xiàn)的.effect::before,?.effect::after{??/*類名為effect的div元素*/
????content:"";?/*content的中文是內(nèi)容，感覺是在div的前后插入?內(nèi)容為?空，相當(dāng)于加入一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效*/
????position:absolute;??/*絕對(duì)定位*/
????z-index:-1;?/*遮罩效果，值小的遠(yuǎn)離用戶*/
????-webkit-box-shadow:0?0?20px?rgba(0,0,0,0.8);?/*-webkit是為了讓chrome和safari瀏覽器更好的兼容。加入邊框陰影:X軸偏移量，Y軸偏移量，[陰影顏色]?rgba的a是透明度參數(shù)*/
????-moz-box-shadow:0?0?20px?rgba(0,0,0,0.8);?/*-moz是為了讓Firefox兼容*/
????box-shadow:0?0?20px?rgba(0,0,0,0.8);
????top:50%;?/*div元素高離父元素的50%*/
????bottom:0;??/*底部距離父元素為0，貼緊底部*/
????left:10px;
????right:10px;
????-moz-border-radius:100px?/?10px;?/*圓角效果*/
????border-radius:100px?/?10px;?/*如果“/”前后的值都存在，那么“/”前面的值設(shè)置其水平半徑，“/”后面值設(shè)置其垂直半徑*/
}上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效<!DOCTYPE?html>
<html>
<head>
<meta?charset=utf-8?/>
<title>before、after</title>
</head>
<body>
??<div?class=".effect">
</div>
</body>
</html>查看全部 -
“::selection”偽元素是用來匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁(yè)文本是以“深藍(lán)的背景，白色的字體”顯示的.
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。2、Firefox 支持替代的 ::-moz-selection。
查看全部 -
:checked選擇器z-index:100：使按鈕在上一層，不加點(diǎn)擊區(qū)域會(huì)不靈敏name相同才能建立互斥關(guān)系，一個(gè)選中另一個(gè)取消。+是css相鄰選擇符：????????共4種關(guān)系選擇符：空格：+>在偽類選擇器中用opacity：0-1透明度
查看全部 -
/* 選擇第n個(gè)，n位數(shù)字? */
:nth-child(n)
選擇列表中的偶數(shù)標(biāo)簽
:nth-child(2n)
選擇列表中的奇數(shù)標(biāo)簽
:nth-child(2n-1)
選擇前幾個(gè)元素
/*【負(fù)方向范圍】選擇第1個(gè)到第6個(gè) */
:nth-child(-n+6){}
從第幾個(gè)開始選擇
/*【正方向范圍】選擇從第6個(gè)開始的，直到最后? */
:nth-child(n+6){}
兩者結(jié)合使用，可以限制選擇某一個(gè)范圍
/*【限制范圍】選擇第6個(gè)到第9個(gè)，取兩者的交集【感謝小伙伴的糾正~】 */
:nth-child(-n+9):nth-child(n+6){}
選擇列表中的倒數(shù)第n個(gè)標(biāo)簽 n為數(shù)字
:nth-last-child(n)?
查看全部 -
>是子元素選擇器，空格是后代選擇器，他們的區(qū)別：
后代選擇器：匹配父子關(guān)系和祖先-后代關(guān)系
子元素選擇器：匹配父子關(guān)系
就是>（子元素選擇器 用于選擇指定標(biāo)簽元素的第一代子元素
）只是匹配到他下面的一層，而不是多層查看全部 -
:target選擇器
分析：
1、具體來說，觸發(fā)元素的URL中的標(biāo)志符通常會(huì)包含一個(gè)#號(hào)，后面帶有一個(gè)標(biāo)志符名稱，上面代碼中是：#brand
2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個(gè)div元素。
多個(gè)url（多個(gè)target）處理：
就像上面的例子，#brand與后面的id="brand"是對(duì)應(yīng)的，當(dāng)同一個(gè)頁(yè)面上有很多的url的時(shí)候你可以取不同的名字，只要#號(hào)后對(duì)的名稱與id=""中的名稱對(duì)應(yīng)就可以了。
如下面例子：
html代碼：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
css代碼：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
上面的代碼可以對(duì)不同的target對(duì)象分別設(shè)置不的樣查看全部
舉報(bào)