day3

1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
会导致通过js获取dom元素的时候, 只能获取到第一个元素, 后面的元素都无法正常获取.
2-用伪类实现一个上三角（代码）
.bottom:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid #aaa;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 100px;
left: 70px;
}
3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
1：绝对定位
.fa {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #aaa;
}

.so {
position: absolute;
top: 0;
left：0；
width: 200px;
height: 200px;
margin: auto;
}
2:弹性布局
.fa{
display: flex;
justify-content: center;
align-items: center;;
border: 1px solid #aaa;
width: 400px;
height: 400px;
}

.so {
background: aqun;
width: 200px;
height: 200px;
}
3:transform:translate挪动位置
.fa {
width: 400px;
height: 400px;
border: 1px solid #aaa;
}

.so {
position: relative;
background: pink;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4-清浮动的方式有哪些？
额外标签法
clear: both;
/* 清除浮动之后，父元素会自动检测子元素的高度，以较高的为准 */
父元素添加overflow属性方法
给你父元素添加overflow；hideen/scroll/auto都可以
注意：scroll元素浮动效果没有了
使用after伪元素清除浮动
使用伪元素清浮动：在父元素中添加clearfix伪类
使用after和before双伪元素清浮动
使用伪元素清浮动：在父元素中添加clearfix伪类
5-如何让两个块级元素显示在同一行
设置显示模式:display:inline或inline-block;

flex布局: 给父元素设置display:flex;

使用浮动float

标签：solid,元素,day3,height,width,400px,200px
来源： https://www.cnblogs.com/lcpubg/p/14495932.html