css高频面试题

阿离e
93 阅读4分钟

1.1 H5 cs3新增特性有哪些?

H5:语义化标签（nav header footer aside section） audio video canvas svg LocalStorage SessionStorage 新的表单类型 emali number url search color tel date 新的表单属性 placehoder required min max height width autofocus CS3: - 圆角 边框背景 盒子阴影 字体阴影

  • 渐变 过渡 循转 帧动画
  • 弹性布局

1.2 css选择器优先级是怎么样的?

  • id选择器 ，class类选择器，标签选择器，属性选择器，后代选择器，子代选择器，并集选择器
  • 伪类选择器，伪元素选择器

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

  • 每个HTML元素都是一个盒子，这个盒子中可能又会包裹着其他的盒子，这就是盒子模型
  • 盒子模型分为 【标准盒模型】与【IE盒模型】
  • 标准盒模型：
    • 外边距 + 边框 + 内边距 + 内容（宽高）
  • IE盒模型：
    • 外边距+内容（宽高 + 内 边距 + 边框）
  • 设置盒子模型的方式：
    • Box-sizing:content-box 设置标注盒模型 默认
    • Box-sizing:border-box 设置IE盒模型

1.4 盒子水平垂直居中

方法一:弹性布局:display:flex; justify-content:center; align-items:center;

方法二:left:0; top:0; bottom:0; margin:auto;

方法三:子绝父相 position:relative; position:absolute;top:50%; left:50%; //x轴往左走自己宽的一半,y轴往上走自己高的一半 transform:translate(-50%,-50%)

1.5如何画一个三角形

        width: 0;
        height: 0;
        border-right: 10px solid transparent ;
        border-left: 10px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 50px solid  skyblue;

1.6em/px/rem/vw/vh的区别

  • px 绝对单位 网页布局最常用的单位， 一般用于pc端布局。 px 像素的意思。 版心是 1200px
  • pt 点 常用于 印刷。 或者 ios 常用的单位。 我们前端基本不用。
  • em 相对单位。 1em 就是当前的一个文字大小。 场景： 段落首行缩进 2个字。 text-indent: 2em;
  • rem 相对单位。 相对于 html标签 的文字大小，跟其余标签没有任何关系。 场景： 做适配。
  • vw 可以看做是适配的终极版本。 vw也是相对单位。 vw 把屏幕划分了 100等份。 场景： 做适配。

1.7说说伪类和伪元素的区别

1.伪类是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中。

二、区别 1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

1.8谈谈你对flex的理解

flex 布局是 flexible box 的缩写 ，意思为 弹性布局 ，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为弹性布局。

1.9 BFC了解（什么是BFC，如何实现BFC，解决什么问题）

  • 1.什么是BFC(Block Formatting Contenxts) : 块级格式上下文

    • BFC是一种CSS渲染模式

      • BFC不是一种技术，也不是一个框架，而是我们浏览器自带的一种渲染模式。（类似于flex伸缩盒子一样，BFC也是一种盒子模型，都是CSS自带的）

  • 2.如何使用BFC（四种方式开启BFC盒子）

    • float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)
    • overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)
    • position属性不是static和relative
    • display属性为以下值 ： table-cell 、 inline-block 、 table-caption

  • 3.开启BFC 盒子变化

    • 当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。
    • 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

  • 4.BFC解决哪些问题

    • 清除元素内部浮动

    • 解决盒子margin合并问题（塌陷也可以解决）

    • 实现元素宽度自适应多列布局

      • 制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）

        • 当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。
avatar
文章
阅读
粉丝