day3
1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
也就是不同范围内的相同id取值，在ie6下返回的结果是第一个能找到，但是第二个返回的是undefined，也就是说找不到值。但是在chrome和firefox下是可以分别取到两个值的。这就是不同浏览器的区别。
综上所述，在一个页面里尽量的不要出现有相同id的元素。另外，当有相同id的元素时，如果要使用JS/JQuery的函数（innerHTML()、text()等）对id所在元素进行操作，js函数无法使用。
也就是直接用id取值的话，浏览器只会返回id相同的第一个元素的值。后面的值不会覆盖前面的值。
2-用伪类实现一个上三角（代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tri_top{
background: #CCCCCC;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}
.tri_top:before{
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #CCCCCC;
position: absolute;
top: -10px;
left: 65px;
}
</style>
</head>
<body>
<div class="tri_top"></div>
</body>
</html>
3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
使用css方法
不定宽高的div设置：display：inline-block；vertical-align：middle；
使用CSS3 transform
父盒子设置：display：relative
div：transform：transform(-50%,-50%)；position：absolute; top：50%；left：50%；
弹性盒子
父盒子设置：display：flex; justify-content：center；align-items：center;
4-清浮动的方式有哪些？
1.为父元素添加overflow：hidden
这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响。一般不使用这种方式，因为overflow:hidden属性的特点是，离开了这个属 性的区域会被隐藏，就是超出的部分会被隐藏。
2.浮动父元素
3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。
4.使用伪元素清除浮动
这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第三种方法是一样的道理。
5-如何让两个块级元素显示在同一行
1、使用浮动float
2、inline-block将这两个div变成内联-块状元素
浙公网安备 33010602011771号