web前端面试题 - css篇

最新推荐文章于 2024-05-16 05:40:48 发布

依旧..

最新推荐文章于 2024-05-16 05:40:48 发布

阅读量223

点赞数 1

分类专栏：前端面试题--css篇文章标签： css css3 前端面试 html5

本文链接：https://blog.csdn.net/qq_45331957/article/details/115899889

版权

前端面试题--css篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css两种盒模型分别说一下,有什么区别？

标准盒模型和怪异盒模型
区别：
标准盒模型：width = 内容宽度;
怪异盒模型: width = 内容宽度 + border + padding;

一个div盒子如何垂直居中？

知道自身高度的div 200px;

/* 父盒子设置先对定位，本身设置绝对定位 */
  div{
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
    top: 50%;
    margin-top: -100px;
  }

不知道盒子自身高度

/* 父盒子设置先对定位，本身设置绝对定位 */
  div{
    background-color: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

Flex 怎么用，常用属性有哪些？

将元素属性 display 设则为 flex
属性:flex, flex-grow, flex-shrink, flex-basis, flex-flow, flex-direction, flex-wrap, align-content, align-items, align-self, justify-content, order
常用属性： flex , justify-content , align-content , flex-wrap

<style>
  /* flex: 属性值是数字，用于指定弹性子元素如何分配空间 */
  /* 所有子元素设置为 flex： 1 ，子元素会均等分配父级宽度，flex值不一样时，根据比例分配，例如：item1 -> flex: 3,其他盒子为flex： 1 ；那么item1盒子占父级元素宽度的3/6*/
  .wrap{
    display: flex;
    background-color: pink;
    height: 100px;
  }
  div[class^="item"]{
    flex: 1;
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
  }
  /* 
    justify-content：属性值为 -> 
    flex-start(默认值。位于容器的开头:从左往右开始排列),
    flex-end(位于容器的结尾：从左往右开始排列),
    center(位于容器的中心: 居中排列),
    space-between(布满容器，根据自身宽度均等排列，且头部和尾部不留空隙),
    space-around(布满容器，根据自身宽度均等排列，且头部和尾部留有空隙),
    initial(设置该属性为它的默认值),
    inherit(从父级元素继承该属性值) 
    盒子本身设置，用于指定子元素的水平排列方式
  */
  .wrap{
    display: flex;
    background-color: pink;
    height: 200px;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    justify-content: space-around;
  }
  div[class^="item"]{
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    /* flex: 1; */
  }
  div.item1{
    width: 100px;
  }
  div.item2{
    width: 150px;
  }
  /* 
    align-content：属性值为 -> 
    stretch(默认值,从上往下开始排列，将元素高度平均显示),
    flex-start(位于容器的开头:从上往下开始排列，下一行元素紧贴着上一行),
    flex-end(位于容器的底部:从上往下开始排列，下一行元素紧贴着上一行),
    center(位于容器的中心:从上往下开始排列，下一行元素紧贴着上一行),
    space-between(布满容器，根据自身宽度均等排列，且顶部和低部不留空隙),
    space-around(布满容器，根据自身宽度均等排列，且顶部和低部留有空隙),
    initial(设置该属性为它的默认值),
    inherit(从父级元素继承该属性值) 
    盒子本身设置，用于指定子元素的垂直排列方式
  */
  .wrap{
    display: flex;
    background-color: pink;
    height: 500px;
    flex-wrap: wrap;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    justify-content: space-around;
    /* align-content: stretch; */
    /* align-content: flex-start;*/
    /* align-content: flex-end; */
    /* align-content: space-between; */
    align-content: space-around; 
  }
  div[class^="item"]{
    width: 100px;
    height: 50px;
    border: 1px solid #ddd;
    /* flex: 1; */
  }
  div.item1{
    height: 100px;
  }
  div.item2{
    height: 150px;
  }
  /* 
    flex-wrap：属性值为 ->
    nowrap(默认值，子元素一行显示)，
    wrap(子元素正常显示，超出父级元素宽度换行),
    wrap-reverse(子元素正常显示，超出父级元素宽度换行,但是会以相反的顺序排列)
    盒子本身设置，用于指定子元素的排列方式
  */
</style>
<div class="wrap">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
</div>

BFC 是什么？

块级格式化上下文 (Block fomatting context-简称BFC): 一套页面渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置;
Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
BFC的区域不会与float box重叠;
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素,外面的元素也不会影响到容器里面；
如何创建BFC
float的值不是none；
position的值不是static或者relative；
display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
overflow的值不是visible；

CSS选择器设置样式优先级？

!important > 行内样式(style=""直接嵌入HTML) > id选择器 > 类、伪类和属性选择器 > 标签选择器
计算方式：行内样式=1000, id=100, class=10, div=1, !important权重最高

CSS reset 和 CSS normalize是什么？

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式；
CSS normalize，在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。
总的来说就是统一浏览器中元素的默认样式，让页面在各个浏览器中都有较为统一的样式；Normalize.css是一种CSS reset的替代方案

浮动 (Floats)元素有哪些特性？

当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度;
任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；
浮动模型不会与流动模型发生冲突，当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意浮动，它的上边线将会与未被声明为浮动时的位置一样，但是在水平方向上，它的浮动边会尽可能的靠近它的包含元素边缘

z-index和叠加上下文是如何形成的？

z-index 属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。
元素设置定位之后就可以通过z-index来控制哪一个元素在其他元素上方(z-index 相当于设置元素的z轴坐标)

CSS sprites是什么？

CSS sprites(精灵图)：就是指将网站中需要使用的多张图片合成一张图片；
优点：减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。
使用：通过给元素设置背景图片，然后通过图片定位技术background-position进行定位；

字体图标和svg图标用过吗？

字体图标：是可以使用CSS修改的文本文件；使用图标字体的一个缺点是，大多数字体集包含您可能不会使用的图标，占用空间；
svg图标：SVG（可缩放矢量图形）允许矢量图形显示在浏览器中；矢量图形完全由代码组成，因此不必从大型外部文件导入它们。它们的尺寸也比典型的JPG或PNG以及大多数图标字体库小得多；

渐进增强，优雅降级是什么？

渐进增强: 一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验;
优雅降级: 一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好;

 /*渐进增强写法*/
div {
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
 /*优雅降级写法*/
div {
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

出现原因：css3样式的出现，不同的浏览器对css3支持程度不一样导致

为什么提倡使用 translate() 而非 absolute？

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint）；
而改变绝对定位会触发重新布局，进而触发重绘和重绘。 translate()更高效

如何实现一个高性能的CSS动画效果？

通过利用css3 中transform新特性进行动画渲染

列出你所知道的 display 属性的全部值？

block,inline-block,inline,none,flex,inline-flex;
block: 块级元素，独占一行；
inline: 行内元素，一行显示，宽高设置无效；
inline-block: 行内块元素，行内元素但可以设置宽高；
none: 元素隐藏，且不保留元素位置；
flex：弹性盒子
inline-flex: 保持盒子行内块元素的属性且设置为弹性盒子

浏览器是如何判断元素是否匹配某个 CSS 选择器？

从右往左开始匹配；
浏览器会先寻找符合最右边条件的集合，然后继续往左寻找，不符合的就剔除，直到找到符合条件的元素；
比如： #warp>div .active 浏览器会先判断这个元素是否有active的类，然后再判断是否属于div的子元素，再进行判断是否是id为wrap的子元素

position设置relative、fixed、absolute 和 static 的元素的区别？

position: static 默认值，没有定位，元素正常出现在文档流当中，top,left,right,bottom,z-index设置无效
position: relative 相对定位，设置了relative属性值的元素可通过top,left,right,bottom相对自身位置进行定位，可通过z-index设置层级
position: absolute 绝对定位，设置了absolute属性值的元素可通过top,left,right,bottom相对position值不为static的父级元素进行定位，可通过z-index设置层级
position: fixed 固定定位，设置了fixed属性值的元素可通过top,left,right,bottom相对浏览器窗口进行定位，可通过z-index设置层级

你用过媒体查询吗？

媒体查询使用方法@media,能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

/* 屏幕的尺寸标准（CSS布局）  超小屏幕(手机)：<768px , 小屏幕(平板)：>=768px , 中等屏幕(电脑)：>=992px , 大屏幕(大屏电脑)：>1200px  */
@media screen and (max-width:768px){
  body {background-color:red;}
}
@media screen and (min-width:768px) and (max-width:992px){
  body {background-color:blue;}
}
@media screen and (min-width:992px) and (max-width:1200px){
  body {background-color:yellow;}
}
@media screen and (min-width:1200px){
  body {background-color:pink;}
}

栅格系统是什么？

栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

有哪些的隐藏内容的方法？

display: none 隐藏后不会保留原来位置，无法点击
opacity: 0; 隐藏保留原来位置，依然可以点击
visibility: hidden; 隐藏后会保留原来位置，无法点击
overflow:hidden; 需要设置元素高度宽度为零

    div{
      /* display: none; */
      /* visibility: hidden; */
      /* opacity: 0; */
      height: 0;
      width: 0;
      overflow:hidden;
    }

清除浮动说一下？

父级元素设置高度；
父级div定义 overflow:hidden
结尾添加空标签设置clear:both清除浮动

依旧..

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端面试题 - css篇

css两种盒模型分别说一下,有什么区别？标准盒模型和怪异盒模型区别：标准盒模型：width = 内容宽度;怪异盒模型: width = 内容宽度 + border + padding;一个div盒子如何垂直居中？知道自身高度的div 200px;/* 父盒子设置先对定位，本身设置绝对定位 */ div{ width: 200px; height: 200px; background-color: pink; position: absolute;
复制链接

扫一扫