2022年html5常见面试题目合集(二)

　　1、boder如何实现0.5像素？

　　实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如下：

```html

<div class="content">伪类设置的边框</div>

</div>

<style>

margin:0;padding:0

}

.border3{

position: relative;

}

.border3:before{

content: '';

position: absolute;

width: 200%;

height: 200%;

border: 1px solid red;

transform-origin: 0 0;

transform: scale(0.5, 0.5);

box-sizing: border-box;

}

</style>

```

　　2、css 选择器有哪些，权重是什么样的？

　　选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。

　　常用的选择器有以下内容：

　　1、ID　　#id

　　2、class　　.class

　　3、标签　　p

　　4、通用　　*

　　5、属性　　type="text"

　　6、伪类　　:link :visited :hover :active

　　7、伪元素　　::first-line :first-letter

　　8、子选择器 div>p

　　9、后代选择器 div p

　　10、相邻兄弟 div+p

　　11、通用兄弟 div~p

　　12、结构伪类 :nth-child :first-child :last-child

　　权重计算规则：

　　1、第一等：代表内联样式，如: style=””，权值为1000。

　　2、第二等：代表ID选择器，如：#content，权值为0100。

　　3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

　　4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

　　5、通配符、*权值为0000。

　　6、继承的样式没有权重值。

　　important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符

　　3、css：一个容器(页面)，里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应(手写)

```html

<div class="right">北京千锋互联科技有限公司（下面简称“千锋教育”），成立于2011年1月，立足于职业教育培训领域，公司现有教育培训、高校服务、企业服务三大业务板块。教育培训业务分为大学生技能培训和职后技能培训；高校服务业务主要提供校企合作全解决方案与定制服务；企...</div>

</div>

<style>

margin: 0;

padding: 0;

}

.container{

max-width: 1000px;

height: 500px;

background-color: yellow;

margin: 20px auto;

display: flex;

}

.container .left{

width: 300px;

background-color: orange;

}

.container .right{

flex: 1;

background-color: red;

}

</style>

```

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年 IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。