当前位置:   article > 正文

前端面试的热门问题之CSS_热门话题 效果 css

热门话题 效果 css

一、link标签和import标签的区别

  • link属于html标签,而@import是css提供的
  • 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。 link方式样式的权重高于@import的。
  • link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。

二、transition和animation的区别

Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from …. to,而animation可以一帧一帧的。

三、Flex布局

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

四、BFC(块级格式化上下文,用于清楚浮动,防止margin重叠等)

直译成:块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。

BFC区域不会与float box重叠

BFC是页面上的一个独立容器,子元素不会影响到外面

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

哪些元素会生成BFC:

  1. 根元素
  2. float不为none的元素
  3. position为fixed和absolute的元素
  4. display为inline-block、table-cell、table-caption,flex,inline-flex的元素
  5. overflow不为visible的元素

五、垂直居中的方法

(1)margin:auto法

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

(2)margin负值法

margin-top: -190px; /height的一半/

margin-left: -240px; /width的一半/

(3)table-cell(未脱离文档流的)

设置父元素的display:table-cell,并且vertical-align:middle,这样子元素可以实现垂直居中。

(4)利用flex

将父元素设置为display:flex,并且设置align-items:center;justify-content:center;

六、说一下块元素和行元素

块元素:独占一行,并且有自动填满父元素,可以设置margin和pading以及高度和宽度

行元素:不会独占一行,width和height会失效,并且在垂直方向的padding和margin会失
效。

七、position属性比较

固定定位fixed:

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative:
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky:
元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

默认定位Static:
默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。

八、浮动清除

方法一:使用带clear属性的空元素

  • 在浮动元素后使用一个空元素,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
    来进行清理。

方法二:使用CSS的overflow属性

  • 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
  • 在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

方法三:给浮动的元素的容器添加浮动

  • 给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

方法四:使用邻接元素处理

  • 什么都不做,给浮动元素后面的元素添加clear属性。

方法五:使用CSS的:after伪元素

  • after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的
    IEhack 指的是触发 hasLayout。

九、css3新特性

CSS3边框如border-radius,box-shadow等;CSS3背景如background-size,background-origin等;CSS3 2D,3D转换如transform等;CSS3动画如animation等。

十、CSS选择器有哪些,优先级呢

id 选择器,class 选择器,标签选择器,伪元素选择器,伪类选择器等。

同一元素引用了多个样式时,排在后面的样式属性的优先级高。

样式选择器的类型不同时,优先级顺序为:id 选择器 > class 选择器 > 标签选择器;

样式表的来源不同时,优先级顺序为:内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

十一、怎么样让一个元素消失,讲讲

display:none; visibility:hidden; opacity: 0; 等等

十二、介绍一下盒模型

标准盒模型:一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

怪异盒模型:一个块的总宽度=width+margin(左右)(width已经包含了padding和border值)

设置盒模型:box-sizing:border-box

十三、如何实现元素的垂直居中

  • 父元素display:flex,align-items:center;
  • 元素绝对定位,top:50%,margin-top:-(高度/2)
  • 高度不确定用transform:translateY(-50%)
  • 父元素table布局,子元素设置vertical-align:center;

十四、calc属性

Calc用户动态计算长度值,任何长度值都可以使用calc()函数计算,需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px);

十五、line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度,是针对字体来设置的,height一般是指容器的整体高度,

十六、了解重绘和重排吗,知道怎么去减少重绘和重排吗,让文档脱离文档流有哪些方法?

DOM的变化影响到了预算内宿的几何属性比如宽高,浏览器重新计算元素的几何属性,其他元素的几何属性也会受到影响,浏览器需要重新构造渲染书,这个过程称之为重排。浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘,引起重排重绘的原因有:

  • 添加或者删除可见的DOM元素
  • 元素尺寸位置的改变
  • 浏览器页面初始化
  • 浏览器窗口大小发生改变,重排一定导致重绘,重绘不一定导致重排
  • 减少重绘重排的方法有
  • 不在布局信息改变时做DOM查询
  • 使用csstext,className一次性改变属性
  • 使用fragment

十七、css预处理器有什么

less,sass等

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/492002
推荐阅读
相关标签
  

闽ICP备14008679号