瀏覽器的私有前綴有哪些呢捶闸？
-moz- /*火狐等使用Mozilla內(nèi)核的瀏覽器
-webkie- /*Safari垃帅、谷歌等使用webkit內(nèi)核的瀏覽器
-o- /*opera 瀏覽器
-ms- /*IE內(nèi)核瀏覽器
css3選擇器
1.屬性選擇器
Element[attr]表示attr存在即可
E[attr=‘val’]表示屬性值完全等于val值
E[attr~=’val’] 表示一個(gè)單獨(dú)的屬性值，用空格分割開來
E[attr |= ‘val’]表示要么是一個(gè)單獨(dú)的屬性值消玄，要么以“-”分割開來
E[attr*=’val’]表示屬性值包含val字符并且在任意位置
E[attr^=’val’]表示屬性值包含val字符，并且在開始位置
E[attr$=’val’]表示屬性值包含val字符丢胚，并且在結(jié)束位置
2.偽類選擇器
E：nth-child(n) 第n個(gè)元素翩瓜，計(jì)算方式是E元素的全部兄弟元素
li:nth-child(2)所有l(wèi)i的第二個(gè)兄弟
E：first-child 相對(duì)于父級(jí)作參考，‘所有’子元素的第一個(gè)元素
E：last-child 相對(duì)父級(jí)做參考携龟，‘所有子元素’的最后一個(gè)元素
E：nth-of-type(n) 第N個(gè)子元素兔跌，計(jì)算方法，只算E元素峡蟋，會(huì)忽略其他元素
E:nth-last-child(n)計(jì)算方法和E：nth-child相同坟桅，只不過從后往前數(shù)
E：nth –last-of-child(n)計(jì)算方法和E：nth-of-type相同，只不過從后往前數(shù)
E：only-child表示當(dāng)前以E確定的父元素蕊蝗，除了E以外沒有其他子元素仅乓，就選擇E
E：only-of-type表示同類型的子元素E是唯一的，就選擇E
E：target結(jié)合錨點(diǎn)使用蓬戚，處于當(dāng)前錨點(diǎn)的元素會(huì)被選擇
E：empty選中沒有任何子節(jié)點(diǎn)的E元素
3.偽元素選擇器
E：：selection 可以改變選中文本的樣式
E：：after在E元素后面添加一個(gè)元素
E：：before在E元素前面添加一個(gè)元素
E：after和E：before在舊版本里面夸楣，是偽類，但是在新版本里面子漩，他們是偽元素豫喧，所以他們會(huì)被瀏覽器自動(dòng)識(shí)別成E：：after和E：：before
“：”和“：：”的區(qū)別？
一個(gè)冒號(hào)的時(shí)候幢泼，代表是偽類紧显，當(dāng)兩個(gè)冒號(hào)的時(shí)候，代表是偽元素缕棵、
4.透明度
Opacity的透明會(huì)將整個(gè)元素透明化孵班，包括子元素在內(nèi)，而rgba則只透明背景色挥吵，而不會(huì)改變子元素以及內(nèi)容
1.opacity子元素會(huì)繼承父元素重父，在實(shí)際開發(fā)中容易帶來干擾
2.transparent設(shè)置透明花椭，則會(huì)完全將元素玻璃化忽匈，徹底透明
5.顏色
在CSS3中，新增了RGBA矿辽、HSLA模式丹允，也就是說郭厌，之前的設(shè)置英文，設(shè)置十進(jìn)制雕蔽，都是CSS2的折柠，
這兩種算是通道調(diào)色，其中A代表著透明通道批狐，相比較opacity扇售，不會(huì)具有繼承性，也不會(huì)影響到子元素的透明度
R red ,G green , B blue嚣艇，A alpha承冰，即成RGBA
RGB取值范圍是0~255，
H取值范圍是0~360,0/360代表紅色食零，120代表綠色困乒，240代表藍(lán)色
H 顏色，S飽和度贰谣，L亮度娜搂，A透明度
S的取值范圍是0%-100%
L的取值范圍是0%-100%
A的取值范圍是0-1
6.文本
文本陰影與邊框陰影相似，可以分別設(shè)置偏移量吱抚，模糊度百宇，顏色（可以設(shè)置透明度）
單行文本溢出，必須配合三個(gè)屬性使用：
第一個(gè)秘豹，文本強(qiáng)制不換行：white-space: nowrap
第二個(gè)恳谎，溢出隱藏：overflow: hidden;
第三個(gè)，文本溢出：text-overflow: ellipsis;
多行文本溢出：
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
存在很多問題憋肖，兼容性極差因痛，平時(shí)想要做多行文本溢出，最好采用JS輔助完成岸更，盡量不要采用這個(gè)方法鸵膏；
demo 添加節(jié)點(diǎn)
<style>
*{
margin: 0;
padding: 0;
}
button{
width: 100px;
height: 30px;
cursor: pointer;
font-size: 16px;
}
span{
width: 20px;
height: 20px;
background: blue;
border-radius: 50%;
cursor: pointer;
position: fixed;
left: 0;
top: 5%;
}
</style>
</head>
<body>
<button id="btn">添加節(jié)點(diǎn)</button>
<div class="box" id="box">
</div>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//JS寫法
// var btn = document.getElementsByTagName("button")[0];
// var box = document.getElementById("box");
//
//
// btn.onclick = function(){
// var span = document.createElement("span");
// box.appendChild(span);
//
// span.onmousedown = function(e){
// var e = e || window.e;
// var x = e.clientX - this.offsetLeft;
// var y = e.clientY - this.offsetTop;
// document.onmousemove = function(e){
// var e = e || window.e;
// span.style.left = e.clientX - x + "px";
// span.style.top = e.clientY - y + "px";
// }
// }
//
// document.onmouseup = function(){
// document.onmousemove = null;
// }
// }
//JQ寫法
$("#btn").click(function(){
var span = document.createElement("span");
$("#box").append(span);
doDrag(span);
})
function doDrag(obj){
var posX,posY;
$(obj).mousedown(function(event){
event = event||window.event;
posX = event.clientX - $(this).offset().left;
posY = event.clientY - $(this).offset().top;
$(document).on('mousemove',function(e){
e = e||window.e;
$(obj).css({'left':(e.clientX-posX),'top':(e.clientY-posY)});
});
});
$(obj).mouseup(function(){
$(document).off('mousemove');
});
}
</script>
