Day01（css3选择器，demo 添加节点）
2017-11-07 本文已影响0人
AnnQi
浏览器的私有前缀有哪些呢？
-moz- /*火狐等使用Mozilla内核的浏览器
-webkie- /*Safari、谷歌等使用webkit内核的浏览器
-o- /*opera 浏览器
-ms- /*IE内核浏览器
css3选择器
1.属性选择器
Element[attr]表示attr存在即可
E[attr=‘val’]表示属性值完全等于val值
E[attr~=’val’] 表示一个单独的属性值，用空格分割开来
E[attr |= ‘val’]表示要么是一个单独的属性值，要么以“-”分割开来
E[attr*=’val’]表示属性值包含val字符并且在任意位置
E[attr^=’val’]表示属性值包含val字符，并且在开始位置
E[attr$=’val’]表示属性值包含val字符，并且在结束位置
2.伪类选择器
E：nth-child(n) 第n个元素，计算方式是E元素的全部兄弟元素
li:nth-child(2)所有li的第二个兄弟
E：first-child 相对于父级作参考，‘所有’子元素的第一个元素
E：last-child 相对父级做参考，‘所有子元素’的最后一个元素
E：nth-of-type(n) 第N个子元素，计算方法，只算E元素，会忽略其他元素
E:nth-last-child(n)计算方法和E：nth-child相同，只不过从后往前数
E：nth –last-of-child(n)计算方法和E：nth-of-type相同，只不过从后往前数
E：only-child表示当前以E确定的父元素，除了E以外没有其他子元素，就选择E
E：only-of-type表示同类型的子元素E是唯一的，就选择E
E：target结合锚点使用，处于当前锚点的元素会被选择
E：empty选中没有任何子节点的E元素
3.伪元素选择器
E：：selection 可以改变选中文本的样式
E：：after在E元素后面添加一个元素
E：：before在E元素前面添加一个元素
E：after和E：before在旧版本里面，是伪类，但是在新版本里面，他们是伪元素，所以他们会被浏览器自动识别成E：：after和E：：before
“：”和“：：”的区别？
一个冒号的时候，代表是伪类，当两个冒号的时候，代表是伪元素、
4.透明度
Opacity的透明会将整个元素透明化，包括子元素在内，而rgba则只透明背景色，而不会改变子元素以及内容
1.opacity子元素会继承父元素，在实际开发中容易带来干扰
2.transparent设置透明，则会完全将元素玻璃化，彻底透明
5.颜色
在CSS3中，新增了RGBA、HSLA模式，也就是说，之前的设置英文，设置十进制，都是CSS2的，
这两种算是通道调色，其中A代表着透明通道，相比较opacity，不会具有继承性，也不会影响到子元素的透明度
R red ,G green , B blue，A alpha，即成RGBA
RGB取值范围是0~255，
H取值范围是0~360,0/360代表红色，120代表绿色，240代表蓝色
H 颜色，S饱和度，L亮度，A透明度
S的取值范围是0%-100%
L的取值范围是0%-100%
A的取值范围是0-1
6.文本
文本阴影与边框阴影相似，可以分别设置偏移量，模糊度，颜色（可以设置透明度）
单行文本溢出，必须配合三个属性使用：
第一个，文本强制不换行：white-space: nowrap
第二个，溢出隐藏：overflow: hidden;
第三个，文本溢出：text-overflow: ellipsis;
多行文本溢出：
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
存在很多问题，兼容性极差，平时想要做多行文本溢出，最好采用JS辅助完成，尽量不要采用这个方法；
demo 添加节点
<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">添加节点</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>
