美文网首页
前端面试准备之——CSS篇

前端面试准备之——CSS篇

作者: Amor_Hy | 来源:发表于2017-08-14 17:37 被阅读0次

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字符的高度

相关文章

  • 前端面试准备之——CSS篇

    1、元素定位有哪些? absolute 以第一个不是以static定位的父元素进行定位 fixed 以浏览器窗口进...

  • 面试题汇总

    css 「2021」高频前端面试题汇总之CSS篇[https://juejin.cn/post/690553919...

  • CSS总结(上)

    CSS总结(上) 由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)...

  • 2019中高级前端秘籍之JavaScript篇

    2019中高级前端秘籍之CSS篇2019中高级前端秘籍之JavaScript篇2019中高级前端秘籍之浏览器篇20...

  • 2019中高级前端秘籍之CSS篇

    2019中高级前端秘籍之CSS篇2019中高级前端秘籍之JavaScript篇2019中高级前端秘籍之浏览器篇20...

  • 2019中高级前端秘籍之服务端与网络篇

    2019中高级前端秘籍之CSS篇2019中高级前端秘籍之JavaScript篇2019中高级前端秘籍之浏览器篇20...

  • 2019中高级前端秘籍之浏览器篇

    2019中高级前端秘籍之CSS篇2019中高级前端秘籍之JavaScript篇2019中高级前端秘籍之浏览器篇20...

  • 2019中高级前端秘籍之算法篇

    2019中高级前端秘籍之CSS篇2019中高级前端秘籍之JavaScript篇2019中高级前端秘籍之浏览器篇20...

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

  • 面试准备之CSS

    页面布局 题目1:三栏布局,中间自适应,左右两栏固定宽度300px 写出3种方案算是及格给出5种方案,不管使用哪种...

网友评论

      本文标题:前端面试准备之——CSS篇

      本文链接:https://www.haomeiwen.com/subject/aacvlxtx.html