css面试题一1. CSS选择器的优先级是怎么样的？ !important > 行内样式 > id选择器 > 类选择器

1. CSS选择器的优先级是怎么样的？

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符* > 继承

下面的css权重会高于上面的css权重。

2. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？

图片.png

3. px、em、rem之间有什么区别？

考察点: 相对单位, 绝对单位, 以及适配问题

图片.png 正常开发 px 使用率较高, 如果要做 rem 适配, 会用到 rem 单位!

rem布局的原理：

使用 rem 为单位
动态的设置 html font-size (媒体查询, js设置, 插件设置都可以) webpack有工具, 可以写 px, 自动转 rem youzan.github.io/vant/#/zh-C…

4. 让元素水平居中的方法有哪些？

方法一：使用 margin

通过为元素设置左右的 margin 为 auto，实现让元素居中。

<div class="center">本内容会居中</div>

.center {
    height: 500px;
    width: 500px;
    background-color: pink;
    margin: 0 auto;
}

方式二: 转成行内块, 给父盒子设置 text-align: center

<div class="father">
    <div class="center">我是内容盒子</div>
</div>

.father {
    text-align: center;
}

.center {
    width: 400px;
    height: 400px;
    background-color: pink;
    display: inline-block;
}

方法三：使用 flflex 布局

使用 flflex 提供的子元素居中排列功能，对元素进行居中。

<div class="father">
    <div class="center">我是内容盒子</div>
</div>

.father {
    display: flex;
    background-color: skyblue;
    justify-content: center;
    align-items: center;
}

.center {
    width: 400px;
    height: 400px;
    background-color: pink;
}

方式四: 使用定位布局

<div class="father">
    <div class="center">我是内容盒子</div>
</div>

.father {
    background-color: skyblue;
    position: relative;
    height: 500px;
}

.center {
    width: 400px;
    height: 400px;
    background-color: pink;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

5. 在 CSS 中有哪些定位方式？

也就是 position 样式的几个属性。

1、static 正常文档流定位

此时设置 top、right、bottom、left 以及 z-index 都无效
块级元素遵循从上往下纵向排列，行级元素遵循从左到右排列

2、relative 相对定位

这个 “相对” 是指相对于正常文档流的位置。

3、absolute 绝对定位

当前元素相对于最近的非 static 定位的祖先元素来确定自己的偏移位置。

例如，当前为 absolute 的元素的父元素、祖父元素都为 relative，则当前元素会相对于父元素进行偏移定位。

4、fixed 固定定位

当前元素相对于屏幕视口 viewport 来确定自己的位置。并且当屏幕滚动时，当前元素的位置也不会发生改变。

5、sticky 粘性定位

这个定位方式有点像 relative 和 fixed 的结合。当它的父元素在视口区域、并进入 top 值给定的范围内时，当前元素就以 fixed 的方式进行定位，否则就以 relative 的方式进行定位。

<style>

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 100px;
    background-color: orange;
}

.nav {
    width: 100%;
    height: 200px;
    background-color: pink;
    position: sticky;
    top: 0px;
}

.main {
    width: 100%;
    height: 100px;
    background-color: skyblue;
}
</style>

<div class="header">我是头部</div>
<div class="nav">我是导航</div>
<div class="container">
    <div class="main">我是主体部分1</div>
    <div class="main">我是主体部分2</div>
    <div class="main">我是主体部分3</div>
    <div class="main">我是主体部分4</div>
    <div class="main">我是主体部分5</div>
    <div class="main">我是主体部分6</div>
    <div class="main">我是主体部分7</div>
    <div class="main">我是主体部分8</div>
</div>

6. 如何理解 z-index？

可以将它看做三维坐标系中的z轴方向上的图层层叠顺序。

元素默认的 z-index 为 0，可通过修改 z-index 来控制设置了postion 值的元素的图层位置。

图片.png

可以将这种关系想象成一摞书本，通过 z-index 可以改变一本书在这摞书中的上下位置。

z-index的小坑, 如果父辈元素有定位, 且配置了z-index, 优先按照父辈元素的定位的z-index进行比较层级

<style>

.father {
    width: 100%;
    height: 200px;
    position: relative;
    background-color: skyblue;
    z-index: 1;
}

.son {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 0;
    top: 0;
    z-index: 999;
}

.box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    left: 0;
    top: 0;
    z-index: 100;
}

</style>

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

<div class="box2"></div>

7. 如何清除浮动？

可以有以下几种方式：

1. 定高法

2. 使用一个空的div，并设置样式

<div style="clear:both"></div>

3. 为父元素添加 overflow: hidden

4. 定义一个 clearfix 样式类

.clearfix:after {
    content: ""; /*设置内容为空*/
    height: 0; /*高度为0*/
    line-height: 0; /*行高为0*/
    display: block; /*将文本转为块级元素*/
    visibility: hidden; /*将元素隐藏*/
    clear: both; /*清除浮动*/
}

.clearfix {
    zoom: 1; /*为了兼容IE*/
}

说明：当前 flex 已成为主流布局方式，适应性强, 且稳定, 所以浮动使用率目前已逐步降低。

css面试题一