欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题_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,可以选择其他选择器
  • 尽可能的精简规则,你可以合并不同类里的重复规则
相关标签: css 面试