2022年html5常见面试题目合集(二)
1、boder如何实现0.5像素?
实现方法:CSS3有缩放的属性,我们可以利用这个属性,缩小50%的1px的边框,来实现这个功能代码如下:
```html
<div class="border3">
<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="container">
<div class="left"></div>
<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培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦想。