前端面试题_css
程序员文章站
2022-06-09 17:58:21
...
1.实现不使用border画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<div style="height:1px;overflow:hidden;background:red"></div>
2.介绍一下标准的CSS盒子模型,低版本的IE盒子模型有什么不同
- 有两种:IE盒子模型、W3C盒子模型
- 盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)
- 区别:IE的content部分把border和padding 都计算进去
3.box-sizing属性
用来控制元素的盒子模型的解析模式。默认为content-box
- content-box:W3C的标准盒子模型,设置元素的height/width属性指的是content部分的高/宽
- border-box:IE传统盒子模型,设置元素的height/width属性指的是border+padding+content部分的高/宽
4.CSS选择器有哪些?哪些属性可以继承?
css选择符:ID选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器
- 可继承的属性:font-size、font-family、color
- 优先级(就近原则):!important>[ud>class>tag]
5.CSS3新增伪类
- p:first-of-type 选择属于其父元素的首个元素
- p:last-of-type 选择属于其父元素的最后元素
- p:only-of-type 选择属于其父元素唯一的元素
- p:only-child 选择属于其父元素的唯一子元素
- p:nth-child(2) 选择属于其父元素的第二个子元素
- :enabled :disabled 表单控件的禁用状态
- :checked 单选框或复选框被选中
6.CSS3新特性
- RGBA和透明度
- background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
- word-wrap(对长的不可分割单词换行)word-wrap:break-word
- 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
- font-face属性:定义自己的字体
- 圆角(边框半径):border-radius 属性用于创建圆角
- 边框图片:border-image: url(border.png) 30 30 round
- 盒阴影:box-shadow: 10px 10px 5px #888888
- 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性
7.纯CSS创建三角形
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
8.常见的兼容性问题
- 不同浏览器的标签默认的margin和padding不一样 *{margin:0;padding:0;}
- 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
9.为什么要初始化css样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
10.display:none与visibility:hidden区别
- display:none 不显示对应的元素, 在文档布局中不再分配空间(回流+重绘)
- visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)
11.清除浮动的方式
- 父级定义高度
- 最后一个元素后加div 设置clear:both
- 父级元素定义overflow:hidden或auto
- 父级定义zoom
12.CSS优化方法
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免!important,可以选择其他选择器
- 尽可能的精简规则,你可以合并不同类里的重复规则
上一篇: react第一天内容简单总结
下一篇: 前端面试题 CSS