日常来点面试题2021.2.21

今天看看CSS相关的内容。

问题:

  1. CSS有哪些基本选择器?它们的权重如何表示?
  2. CSS的引入方式有哪些?link和@import的区别是什么?
  3. 浮动元素引起的问题与解决方法?
  4. position的值分别相对于哪个位置定位?
  5. CSS选择器都有哪些?
  6. CSS哪些样式可以继承?哪些不可以?
  7. 什么是CSS Sprite?
  8. 如何居中一个div?
  9. display的值与作用?
  10. 如何使用盒模型实现三栏布局?(左右200px,中间自适应)

回答:

  1. 基本选择器分三类,类选择器,id选择器,标签选择器。选择器的权重分为四个等级,可以用0.0.0.0表示这四个等级。!important关键字优先级最高,内联样式优先级可以看成1.0.0.0,id选择器可以看成0.1.0.0,类,属性,伪类选择器可以看成0.0.1.0,元素,伪元素选择器可以看成0.0.0.1,通配符没有优先级贡献。当选择器混合使用时,层级权重可以递增,比如同时使用id和类选择器可以写成0.1.1.0。
  2. 引入方式有三种,行内style属性,HTML内style标签,link引入外部css文件。@import方式只能加载CSS,link方式也可以加载如RSS等其他事务。link引用的CSS在页面加载时同步加载,使用@import加载的CSS需要等到网页完全载入后再加载,属于异步加载。link是XHTML标签,无兼容问题,@import是在CSS2.1中提出的,不支持低版本浏览器。link的标签是DOM元素,可以使用JavaScript控制,@import是一种方法,JavaScript不可控制。
  3. 父元素的高度无法被撑开,影响与父元素同级的元素,与元素同级的非浮动元素会被遮盖,如果一个元素浮动,则该元素之前的元素也需要浮动,否则会影响显示结构。解决办法是为父元素设定固定高度,父元素设置overflow: hidden;即可清楚浮动,让父元素高度被撑开,使用clear: both;也可以清除元素浮动。也可以使用通用类clearfix:.clearfix:after{content: ''; display: 'block; clear: both;}
  4. relative表示相对定位,相对于自己本身所在正常文档流中的位置进行定位,absolute表示绝对定位,相对于最近的根元素进行定位。fixed表示固定定位,相对于浏览器视口或frame进行定位。static为默认值,没有定位,出现在正常文档流中。sticky是粘性定位,用于做吸顶效果。
  5. id选择器,类选择器,标签选择器,相邻选择器(+),子选择器(>),级联选择器( ),通配符选择器(*),属性选择器([]),伪类选择器(:hover等),伪元素选择器(::before)
  6. font-size,color等可以继承,border,padding,margin,width,height等不可以继承。
  7. 雪碧图,把网页中的一些图片整合到一张图片文件中,再利用background-imagebackground-position等CSS设置进行定位,显示出图片,这样可以减少网络请求量。
  8. 一般情况使用margin: 0 auto即可(块级元素),如果是行内元素,可以对父级元素使用text-align: center
  9. block为块级元素,none为不显示,inline为行内元素,inline-block为默认宽度为内容宽度,可以设置宽高同行显示,list-item是指像块类型元素一样显示,并添加样式列表标记。还有flex为flex布局。
  10. 核心点:设定三个float为left,左右盒子宽度200px,中间盒子宽度100%,其他css稍微写点美化一下就好了。
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信