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

上一篇:四、H5和C3


下一篇:css实现左右宽度固定,中间自适应及上下宽度固定,中间自适应的方法