Bootsrap、Css----data-*归纳，lable标签理解，清除浮动,复合选择器

Bootstrap与Css知识回顾

1. DATA属性的一些归纳

（1）data-toggle:指以什么类型触发；

  data-toggle="dropdown"//下拉菜单data-toggle="model"//模态框事件data-dismiss="model"常常用于在模态窗口关闭模态框data-toggle="tooltip"//提示框事件data-toggle="tab"//标签页data-toggle="collapse"//折叠data-toggle="popover"//弹出框data-toggle="button"//按钮

（2）常用于轮播图的data

data-slide:接受关键字"prev"和"next"用来改变幻灯片相对于当前的位置。
data-slide-to:是指来向轮播传递一个滑动索引。
data-slide-to="2":将滑块移动到一个特定的索引，索引从零开始计数。
**data-ride="carousel":**属性则是用于标记轮播在页面加载时就开始动画播放。

 <div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li></ol></div>

2.对 lable标签的理解

所谓l<lable>标签即是说如果在lable元素内点击文本就会触发此控件，即是说，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。（无论是点击名字还是表单框，都会触发事件）

<form class="form-horizontal" role="form"><div class="form-group"><label for="firstname" class="col-sm-2 control-label">名字</label><div class="col-sm-10"><input type="text" class="form-control" id="firstname" placeholder="请输入名字"></div></div>
</form>

3.清除浮动

• 额外标签法：在浮动元素后面加一个空的<div>并为它清除浮动。

<div class="first"><div class="a">a</div><div class="b">b</div><div class="clear">额外标签法</div>
</div>

• 伪元素

.clearfix:after{content:"  ";      ------伪元素必写属性；display:block;     ------插入的元素必须是块级；height：0；         ------不要看见这个元素；clear：both；       ------核心代码清除浮动；visibility:hidden； ------不要看见这个元素；}

• 双伪元素清除浮动

   .clearfix:after,.clearfix:before{content: "  ";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}

• 父级添加overflow属性（父元素添加overflow:hidden）

 .fahter{width: 400px;border: 1px solid deeppink;overflow: hidden;}

4 复合选择器

1. 后代选择器：可是子孙后代 空格 .nav a
2. 子孙选择器：亲儿子 大于 .nav>p
3. 并集选择器：用于集体声明 逗号 .nav,.header
4. 链接为类选择器：跟连接有关 a{} a:hover
5. :focus选择器：选择获得光标的表单 与表单有关： input：focus