web前端HTML5和CSS3常见面试题及相关基础知识(2)

1，在一个页面中给多个元素设置相同的id，会导致什么问题？
会导致通过js获取dom元素的时候，只能获取到第一个元素，后面的元素都无法正常获取。
2，用伪类实现一个上三角？

<div class="sanjiao"></div>
.sanjiao {
    border: 90px solid red;
    border-top:0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    width: 0px;
}

3，怎么让一个不定宽高的div，垂直水平居中？

<div class="parent">
        <div class="son"></div>
</div>

方案一：tranform

.parent{
    background: #ddd;
    width: 400px;
    height: 400px;
}
.son{
    position: relative;
    background: pink;
    width: 200px;
    height: 200px;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方案二：flex弹性布局

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ddd;
    width: 400px;
    height: 400px;
}
.son{
    background: pink;
    width: 200px;
    height: 200px;
}

方案三：绝对定位

.parent{
    position: relative;
    background: #ddd;
    width: 400px;
    height: 400px;
}
.son{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background: pink;
    width: 200px;
    height: 200px;
    margin: auto;
}

4，清除浮动有哪些方式？
额外标签法：在浮动元素的最后添加一个块级标签，给其设置一个clear: both的属性，缺点是会在页面上产生很多空白标签；
给浮动元素的父元素设置高度，缺点不太灵活
给浮动元素的父元素设置overflow:hidden;
使用伪元素法：(推荐使用)

.clear:after{
    content: '';
    display: block;
    overflow: hidden;
    visibility: hidden;
    clear: both;
}

5，让两个块级元素在一行显示有哪些做法？
设置显示模式：display:inline|inline-block;
flex布局：给父元素设置display:flex;
使用浮动
6，如果设置一个元素在垂直方向居中？
给父元素设置一个垂直方向的padding，也可以给子元素设置一个垂直方向的margin
如果是单行文本的话，使用height=line-height
也可以使用flex布局，align-items:center
也可以使用绝对定位的方式，设置元素在相对定位的父元素中垂直对齐。
7，CSS新增了什么新特性？
媒体查询@media，transfrom，translate平移，scale缩放，rotate旋转，animate动画，transition过渡效果，flex弹性布局，盒模型计算方式box-sizing:border-box，线性渐变linear-gradient，伪元素，文字阴影text-shadow，边框阴影box-shadow，圆角border-radius
8，display:none和visibility:hidden的区别？
display:none隐藏元素后，不占位；
visibility:hidden隐藏元素后占位
9，less和scss，stylus是什么？
它们都是css预处理语言，可以定义一些变量和表达式以及使用嵌套语法，提高开发效率和提高代码的可维护性。

最后编辑于：2019.12.10 19:23:37