CSS 面试题

CSS3有哪些新能特性?

新增特性:

  • 圆角border-radius
  • 阴影 box-shadow
  • 文字特效 text-shadow
  • 线性渐变 gradient
  • 变形 transform

增加了css选择器、媒体属性、多栏布局

媒体查询在CSS2中已经存在,只不过只能作用于style和link标签上

 

css选择器的优先级顺序?

内联样式 > ID选择器 > 类选择器 > 标签选择器

 

通过CSS有哪些方式可以实现隐藏页面上的元素?

 方式  说明
 opactiy: 0  
visibility: hidden   
 overflow: hidden  
display: none   
transform: scale(0,0)  
 z-index: -9999   
left: -9999   

 

 

在CSS中有哪些定位方式?position的属性?

static:默认值,没有定位,元素正常出现在文档流中

relative:相对定位,相对于其在普通流中的位置进行定位

absolute:绝对定位,相对于最近的非static的祖先元素进行定位

fixed:固定定位,相对于浏览器窗口进行定位

sticky:粘性定位,像relative和fixed的结合,它的父元素在视口区域,当前元素就以fixed的方式进行定位,否则就以relative进行定位

 

水平垂直居中的方法?
未知宽高:position + transform

div{
  position:absolute;
  left:50%;
  top:50%;
  tansform:translate(-50%, -50%);       
}

已知宽高:position + margin

复制代码
div{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  argin-left: -100px;
  margin-top: -100px;
}
复制代码

绝对定位方法:top left bottom right为0

复制代码
div{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}
复制代码

flex布局方法

div{
    display: flex;
    justify-content: center;
    align-items: center;
}

转成行级块,给父盒子设置text-align:center

复制代码
.father {
    text-align: center;
}

.child {
width
: 100px;
height
: 100px;
display
: inline-block;
}

复制代码

 

CSS属性content有什么作用?

css的content属性专门应用在after / before伪元素上,用于插入生成内容,可以配合自定义字体显示特殊符号

 

translate和 margin 的百分比是根据什么计算的?(translate 和 margin 有什么不同?)

translate是根据自身宽度,margin是根据参照物

 

rgba() 和 opacity 有什么不同?

  • opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色
  • 设置rgba的元素,子元素不会继承透明效果

 

解释一下浮动及其工作原理

浮动元素脱离文档流,不占据空间。

浮动元素碰到包含它的边框或者浮动元素的边框停留

 

浮动元素引起的问题?

  • 父元素的高度无法撑开
  • 与浮动元素同级的,非浮动元素会跟随其后
  • 若非第一个元素浮动,则该元素之前的元素也需要浮动。否则会影响页面显示的结构

 

清除浮动的方式?

  • 父级元素定高,定义height
  • 父级元素增加 overflow: hidden
  • 结尾处增加 br
    <br style="clear:both"/>
  • 父级元素增加伪元素 :after

    .clearfix:after{
      content: '';
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }

 

clear 实现清除浮动的原理?

原理:clear是css中的定位属性,规定元素的那一侧不允许浮动元素,clear: both 就是规定在左右两侧都不允许浮动元素

 

怎么理解盒子模型?

浏览器的渲染引擎对网页文档进行布局时,会按照”CSS基础盒模型“ (CSS Basic Box Model)标准,将文档中的所有元素都表示成一个个矩形的盒子,再用CSS决定这些盒子的大小尺寸、显示位置、以及其他属性(如颜色、背景、边框等)。

盒模型由以下几部分组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)

 

标准盒模型 和 怪异盒模型有哪些区别?

两者的区别主要提现在元素尺寸的表示上。

盒模型的指定

在CSS3中,可以通过设置box-sizing的值:

  • content-box 标准盒模型
  • border-box 怪异盒模型

标准盒模型  box-sizing: content-box;

标准盒模型的width和height属性的范围只包含了content

标准盒模型下,元素的宽(width)高(height)值即为盒模型中内容(content)实际宽高值

盒子宽度 = border-left + padding-left + width + padding-right + border-right

占据页面宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

怪异盒模型 box-sizing: border-box;

IE盒模型的width和height属性的范围包含了border、padding和content

在怪异盒模型下,元素的宽(width)高(height)不是 content的实际宽高,而是去除margin后,元素占用区域的宽高

盒子宽度 = width

盒子占据页面宽度 = margin-left + width + margin-right

 

盒模型中,content-box是标准,为什么经常使用border-box?

content-box是W3C的标准盒模型,元素的宽(width)(height)指的是content区域的宽高。增加border、padding会把破坏布局

border-box是IE的怪异盒模型,元素的宽(width)(height)指的是content宽高 + border + padding,在元素基础上添加border和padding,不会把破坏布局

 

什么是BFC?

BFC(Block Formatting Context),块级格式化上下文。是页面布局中的一种css渲染模式。相当于一个独立的布局容器。里面的元素和外部的元素相互不影响

 

怎么创建BFC?

  • position值为 absolute 或 fixed
  • float值不为 none
  • overflow值不为visible
  • display值为 inline-block、flex、inline-flex、grid、inline-grid

 

BFC的作用?

避免外边距重叠(两个相邻的盒子外边距重叠或父子盒子的外边距塌陷)

清除浮动

计算BFC高度时,浮动元素也会参与计算

 

什么外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collaps

在css中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方式称为折叠,所结合成的外边距成为折叠外边距

折叠结果计算规则:

  • 两个相邻的外边距都是正数时,折叠结果取两者之间较大的值
  • 两个相邻的外边距都是负数时,折叠结果取两者绝对值的较大值
  • 两个外边距一正一负时,折叠结果取两者相加的和

 

浏览器是怎样解析css选择器的?

css选择器是从右向左解析的,为了避免对所有元素进行遍历

若从左向右匹配,发现不符合规则,需要回溯,会损失很多性能

若从右向左匹配,先找到最右节点,向上寻找,会筛选掉大量不符合条件的最右节点

 

谈谈对媒体查询的理解?

响应式适配,根据不同的屏幕尺寸,显示不同的效果

媒体查询由两个部分组成:

一个可选的媒体类型 (计算机屏幕screen、打印预览模式print、all所有设备)

零个或多个媒体功能限定表达式(max-width: 500px、min-width: 500px)

复制代码
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
}
复制代码

 

说一下CSS的自适应单位?

vw 是相对视口(viewport)的宽度而定,1vw是viewport宽度的1%

vh  是相对窗口(viewport)的高度而定,1vh是viewport高度的1%

vmin和vmax 比较的是vw和vh,选择其一

vmin 选择的是两者较小的值,比如宽度500px,高度300px,1vmin就是3px

vmax 选择的是两者较大的值,比如宽度500px,高度300px,1vmax就是5px

 

px、em、rem之间有什么区别?

  • px:绝对单位。代表像素数量,页面会按照给出的精确像素进行展示
  • em:相对单位。基于父元素的字体大小,如果自身定义了字体大小则按照自身的来算
  • rem:相对单位。可以理解为root em,基于根节点<html>的字体大小

 

谈谈对flex的理解?

flex是flexible box的缩写,即弹性布局,为盒模型提供灵活性

只需要声明布局应该具有的行为,而不需要给出具体的实现方式,浏览器完成实际布局

flex-direction: 调整主轴方向

row:主轴方向为水平向右
column:主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content 主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的。

align-items 用于调整侧轴的对齐方式

flex-start: 元素在侧轴的起始位置对齐。
flex-end: 元素在侧轴的结束位置对齐。
center: 元素在侧轴上居中对齐。
stretch: 元素的高度会被拉伸到最大(不给高度时, 才拉伸)。

align-content 用来设置多行的 flex 容器的排列方式

flex-start: 各行向侧轴的起始位置堆叠。
flex-end: 各行向弹性盒容器的结束位置堆叠。
center: 各行向弹性盒容器的中间位置堆叠。
space-around: 各行在侧轴中平均分布。
space-between: 第一行贴上边,最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch:拉伸,不设置高度的情况下。

flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行

nowrap: 不换行(默认),如果宽度溢出,会压缩子盒子的宽度。
wrap: 当宽度不够的时候,会换行。

 

 

display、visibility、opacity的区别?

  • display: none
    • dom结构:不会占据空间
    • 事件监听:无法进行事件监听
    • 性能:动态改变此属性,会引起重排。性能较差
    • 继承:不会被子元素继承
    • transition:不支持display
  • visibility: hidden
    • dom结构:会占据空间
    • 事件监听:无法进行事件监听
    • 性能:动态改变此属性,会引起重绘,性能较高
    • 继承:会被子元素继承,子元素可以设置visibility: visible取消隐藏
    • transition:visibility会立即显示,隐藏会延时
  • opacity: 0
    • dom结构:会占据空间
    • 事件监听:可以进行事件监听
    • 性能:不会引起重绘,性能较高
    • 继承:会被子元素继承,子元素可以通过设置opacity: 1取消隐藏
    • transition:opacity可以延时和隐藏

position的absolut与fixed有什么相同点和不同点?

相同:

  • 让元素脱离文档流,不占据空间
  • 改变行内元素呈现的方式,display被置为block

不同:

  • absolut的根元素是可以设置的,而fixed的根元素固定为浏览器窗口
  • 滚动网页的时候,fixed在浏览器窗口的位置是不会变化的

css伪类和伪元素

伪类:一般用于匹配元素特殊状态,例如::checked、:hover

伪元素:用于创建一些不在DOM树中显示的元素,并为其添加样式,例如::after、:before(注:伪元素无法注册事件,不能通过js控制伪元素)

  伪类用单冒号表示:如:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()

  伪元素用双冒号表示:如::fist-letter、::first-line、::before、::after

  部分伪类解释:

  :link  设置未被访问的链接样式       :visited  设置被访问的链接样式

  :hover  设置鼠标悬浮的样式      :active  设置鼠标松开的样式   :focus   使用键盘移动页面焦点时的样式

  伪类弥补了常规css选择器的不足,伪元素创建了一个虚拟容器

.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

 

  • 解释一下浮动及其工作原理
  • 浏览器是怎样解析css选择器的?
  • position的absolut与fixed有什么相同点和不同点?
  • css伪类和伪元素
  •  
posted @   时光凉忆  阅读(66)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2019-03-29 小程序 movable-view 在页面中的可移动图标
点击右上角即可分享
微信分享提示