Day3

1-在一个页面中给多个元素设置同样的 id，会导致什么问题？

    通过js操作页面时,如果有多个id那么在获取id时只能获取一个。

    设置样式时会设置一样的样式

2-用伪类实现一个上三角（代码）

<div id="a">123</div>
#a{
width: 200px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
#a::before{
content: "";
border: 10px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
position: absolute;
top:-20px;
left: 130px;
}
#a::after{
content: "";
border: 9px solid white;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid transparent;
position: absolute;
top:-18px;
left: 131.5px;
z-index: 9999;
}

3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？

①弹性布局
< body >
< div class= "one" >
< div class= "two" ></ div >
< div class= "three" ></ div >
< div class= "four" ></ div >
< div class= "five" ></ div >
</ div >
</ body >

.one {
width: 500px;
height: 500px;
display: flex; //弹性布局
justify-content: space-around; //水平居中
align-items: center; //垂直居中
}

②定位
< body >
< div class= "one" >
< div class= "two" >wo </ div >
</ div >
</ body >

.one {
position: relative;
width: 200px;
height: 200px;
}

.two {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}

③css
< body >
< div class= "one" >
< div class= "two" >wo </ div >
</ div >
</ body >

.one {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100px;
height: 100px;
}

.two {
vertical-align: middle;
display: inline-block;
}

4-清浮动的方式有哪些？

　　overflow:hidden

　　clear:both

5-如何让两个块级元素显示在同一行

　　浮动