2022年高频前端面试题汇总之CSS篇(一)
1、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 > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符
2、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人才近2万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。