1月29

Day3
1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
id相同样式相同，id是唯一的，如果多个元素设置相同样式应该尽量使用class
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 实现垂直和水平居中（三种方法 代码）？
1弹性布局
< body >
< div class= "one" >
< div class= "two" >wo </ div >
< div class= "three" >shi </ div >
< div class= "four" >xian </ div >
< div class= "five" >yu </ div >
</ div >
</ body >

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

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

css
.one {
position: relative;
width: 200px;
height: 200px;
background-color: rebeccapurple;
}

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

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

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

.two {
vertical-align: middle;
display: inline-block;
}
4-清浮动的方式有哪些？
overflow:hidden
clear:both
给父级元素设置高度
5-如何让两个块级元素显示在同一行
使用浮动 float：left float：right