有关CSS的面试题

三生梅雨渡潇潇
118 阅读4分钟

1、Flex相关

1.1、参考文档：
1.2、相关知识点
  • 设置在容器上的属性
// 定义主轴的方向
flex-direction

// 是否允许换行
flex-wrap

// flex-direction和flex-wrap的简写
flex-flow

// 主轴方向上的对齐方式
justify-content

// 交叉轴方向上的对齐方式
align-items

// 多根轴线对齐方式
align-content
  • 设置在项目上的属性
// 定义项目的排列顺序
order

// 项目的放大比例
flex-grow

// 项目的缩小比例
flex-shrink

// 分配多余空间之前，项目占据的主轴空间
flex-basis

// flex-grow\flex-shrink\flex-basis的简写
flex

// 单个项目对齐方式
align-self

2、定位

2.1、position属性值
static // 默认值 没有定位
relative // 相对于其正常的位置进行定位
fixed // 相对于浏览器窗口定位，位置是固定的
absolute // 相对于最近的已定位的父元素进行定位，如果没有，则相对于<html>
sticky // 粘性定位
2.2 参考文档

CSS position定位

3、margin、padding、border

3.1、相关知识点
margin // 设置外边距

padding // 设置内边距

border // 设置边框

margin相对于什么定位？

css深入理解之margin

4、BFC：块级格式上下文

BFC--块级格式化上下文

BFC

5、水平垂直居中

5.1、vertical-align属性
div {
  display: inline-block;
  vertical-align: middle;
}
5.2、display：flex属性
div {
    display:flex;
    align-items: center;
}
5.3、display：table-cell属性
// 父元素
div {
    display:table;
}
// 子元素
divChildren {
    display: table-cell;
    vertical-align: middle;
}
5.4、伪元素:before
// 为父元素添加伪元素，使子元素实现垂直居中
div:before {
    content: '';
    display:inline-block;
    vertical-align:middle;
    height: 100%
}
5.5、position + top + transform
// 1、父元素相对定位，子元素绝对定位
div {
    position: relative;
}

divChildren {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

// 2、子元素相对定位
divChildren {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}
5.6、line-height（单行文本情况下）
// 子元素的line-height值等于父元素的height
div {
    height: 300px;
}
divChildren {
    line-height: 300px;
}

参考文档：

6、盒模型

CSS盒模型有两种：

  • W3c标准盒模型: width和height指的是内容的宽度和高度
  • IE盒模型（怪异盒模型）：width和height指的是内容区域、border、padding的总宽度和高度

box-sizing属性可以指定盒子的模型

box-sizing: content-box; // 标准盒子模型，width = content

box-sizing: border-box; // IE盒模型 width = content + padding + border

参考文档： CSS的盒模型 css盒模型

7、CSS3新特性

7.1、css3选择器
// 简单举几个例子
//1、属性选择器
element[attribute] //为带有attribute属性的元素设置样式

// 2、伪类选择器
:hover
:active

// 3、css3结构类，nth选择器
:first-child/last-child
:nth-child(n)

// 4、否定选择器
ul:not(span)

// 5、伪元素
p::befaore
7.2、css3新样式
  • css3新增三个边框属性
border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框
  • box-shadow 设置元素阴影
  • 新增背景属性
background-clip // 确定背景画区
background-origin // 设置图片对齐
background-size // 调整背景图片大小
background-break // 元素可以分为几个独立盒子，该属性用来控制背景怎样显示
  • word-wrap: 文字换行
  • text-overflow:文字溢出处理
  • text-shadow: 给文本设置阴影
  • text-decoration:文字更深层次的渲染
  • 新的颜色表示：rgba和hsla
  • transition过渡:transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
  • transform转换：
-   transform: translate(120px, 50%)：位移
-   transform: scale(2, 0.5)：缩放
-   transform: rotate(0.5turn)：旋转
-   transform: skew(30deg, 20deg)：倾斜
  • animation动画
  • 渐变：background-image: linear-gradient()

参考文档：

8、选择器

1.！important 优先级10000
2.内联选择器 优先级1000
3.ID选择器 优先级100
4.类别选择器 优先级10
5.属性选择器 优先级10
6.伪类 优先级10
7.元素选择器 优先级1
8.通配符选择器 优先级0
9.继承选择器 没有优先级

参考文档：css选择器的优先级，以及用法

9、H5标签

列举几个标签

-   <header> //定义页面或区段的头部；
-   <footer> //定义页面或区段的尾部；
-   <nav> //定义页面或区段的导航区域；
-   <section> //页面的逻辑区域或内容组合；
-   <article> //定义正文或一篇完整的内容；
-   <aside> //定义补充或相关内容

参考文档: html5：

avatar
文章
阅读
粉丝