前端面试准备之——CSS篇

1、元素定位有哪些?

absolute 以第一个不是以static定位的父元素进行定位

fixed 以浏览器窗口进行定位

relative 相对于其正常定位进行定位

static 默认定位,元素出现在正常的文档流中

2、CSS的选择符有哪些?优先级算法怎么定义?

id选择器 #id

类选择器 #class

伪类选择器 #id:after

标签选择器 div

相邻选择器 div+p( 同级兄弟元素)

子代选择器 div>p

后代选择器 div p

通配选择器 *

属性选择器 

  a[href^="http"] a的href属性以http开头的 

  a[href *="www"] a的href属性 sdwww的  

  a[href $="com"]以com结尾

  p[class ~="item"] 所有p标签中类名包括item的  

  p[title ="aaa"] p的title为aaa的

优先级算法

important > 行内样式 > id选择器> 类选择器 = 伪类选择器 > 标签选择器 > 其他

权重一样的就近原则

CSS可以继承的样式有哪些,不可以继承的样式有哪些?

可以继承 font-size    font-family    text-indent(首行缩进)     color

不可以继承  width  height  border margin padding

CSS3新增的伪类有哪些



3、如何清除元素浮动?

1、 在浮动元素后面添加<div class="clear"></div>

.clear{  clear: both;  font-size: 0;  height: 0;  overflow: hidden;}

2、 在浮动元素后面添加 <br clear="all"/>

3、还用伪类对象和zoom(推荐使用)

给浮动元素的父元素添加 .clear属性

.clear{ zoom : 1} 触发IE的hasLayout  属性

.clear:after{ dispaly: block; clear: both; content:" " ;  height: 0;  visibility: hidden;}\

4、触发元素的BFC

①、 使用overflow属性触发

给父元素设置 overflow: hidden;  或者 overflow:auto;

②、 使用display属性触发

给父元素设置 display:inline-block

③、使用float属性

给父元素设置float属性

这三种方式都会触发元素的BFC,元素内部的元素的各个属性不会影响到元素外部

4、 em 、 rem 、 百分比、 vw 、 vh 、 vmin、 vmax 、 ch、 ex 


em是依赖父元素的font-size  eg: 父元素的font-size = 16px  则1em = 16px

rem是依赖html 的font-size eg: html{font-size:16px} 则1rem = 16px  (IE9 以上) 

vw 是根据视口的宽度的百分比  vh是根据视口的高度的百分比 (IE10以上)

vmin 是 vw和vh 中较小的一个     vmax 是 vw 和 vh 中较大的一个

ch 是根据字符0的宽度    ex是小写x字符的高度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,613评论 1 19
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,675评论 32 459
  • 趁周末太阳正好,温暖而不灼热,一个人哼哧哼哧地把许久没出门的被子扛上楼顶晒了一下午。晚上吃完药洗漱完就赶紧上床睡觉...
    天涯林晓阅读 396评论 0 2
  • 苹果本也是一种愁 诺亚载不动便化作江水悠悠 在怀梦者心底慢流 望见人间独拥寒裘 问谁能再饮一杯酒 且思量初心在否 ...
    诸延煜阅读 224评论 0 1