CSS 面试总结

最新推荐文章于 2024-08-05 18:36:07 发布

程程.

最新推荐文章于 2024-08-05 18:36:07 发布

阅读量235

点赞数

分类专栏：面试面经文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45828332/article/details/114137497

版权

面试面经专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css 面试总结

一、flex布局

传统布局：基于盒子模型，依赖于display 属性 + position属性 + float属性
缺点：对于特殊布局不方便（垂直居中）

Flex 布局（）：可以简便、完整、响应式地实现各种页面布局；

1. flex 基本介绍

Flex（Flexible box） --弹性布局
Webkit 内核的浏览器，必须加上-webkit前缀。
flex布局以后，子元素的float、clear和vertical-align属性失效

2. 容器

2.1 基本定义

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"

容器默认存在两条轴：

水平的主轴（main axis）和垂直的交叉轴（cross axis）
主轴

开始位置（main start）

结束位置（main end）
交叉轴

开始位置（cross start）

结束位置（cross end）

2.2 容器属性

2.2.1 flex-direction

决定主轴方向（项目排列方向）

取值：

row：主轴为水平方向，起点在左端。–>
row-reverse：主轴为水平方向，起点在右端。<–
column：主轴为垂直方向，起点在上沿。M
column-reverse：主轴为垂直方向，起点在下沿。W

2.2.2 flex-wrap

默认情况，项目都在一条线上。该属性定义如何换行

取值：

nowrap:(默认)不换行
wrap:换行，第一行在上方
wrap-reverse：换行，第一行在下方

2.2.3 flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认为 row，nowrap

2.2.4 justify-content

定义了项目在主轴上的对齐方式。

取值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.2.5 align-items

定义项目在交叉轴上如何对齐

取值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.2.6 align-content

定义了多根轴线的对齐方式（至少2条轴线）

取值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

3. 项目

3.1 基本定义

容器的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
单个项目

占据的主轴空间（main size）

占据的交叉轴空间（cross size）

3.2 项目属性

3.2.1 order

项目的排列顺序。数值越小，排列越靠前，默认为0。

3.2.2 flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

3.2.3 flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

3.2.4 flex-basis（auto）

定义了在分配多余空间之前，项目占据的主轴空间（main size）

flex（推荐使用）：（默认值：0 1 auto）flex-grow, flex-shrink 和 flex-basis的简写
快捷值：auto（1 1 auto） none（0 0 auto）

3.2.5 align-self

属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认：auto（表示继承父元素，若无父元素，则等同stretch）

二、三栏布局（左右固定，中间自适应）布局

三、盒子的水平垂直居中

1. 子元素定宽高（2种）

水平垂直居中（1.1）

水平垂直居中（1.2）

2. 子元素不定宽高（3种）

水平垂直居中（2.1）

水平垂直居中（2.2）

水平垂直居中（2.3）

四、常见伪类、伪元素

1. 伪类（前缀为 ’ : '）

1.1 链接伪类

必须按照固定的顺序写–>love hate（link-visited-hover-active）

1.1.1 静态伪类

只能用于超链接样式

:link 未访问的链接
:visited 已经访问的链接

1.1.2 动态伪类

针对所有标签都适用的样式

:hover 鼠标悬停的链接
:active 链接激活的状态
:focus 某个标签获得焦点时的样式（比如某个输入框获得焦点）

1.2 选择器伪类

:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素

2. 伪元素（前缀为’ :: '）

* 添加到选择器后面去选择某个元素的某个部分
* 伪元素创建了不存在 DOM 树中的元素，并为其添加样式

::after(:after)
–> 会创建一个伪元素，该伪元素会成为选中元素的最后一个子元素
::before(:before)
–>会创建一个伪元素，该伪元素会成为选中元素的第一个子元素
::selection
–>用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

五、position 有哪些取值？

1. static（默认）

没有定位，遵循正常的文档流对象。

2. relative（相对定位）

元素的定位是相对其正常位置。移动相对定位元素，它原本所占空间不会改变

3. absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

Fixed定位使元素的位置与文档流无关，因此不占据空间
Fixed定位的元素和其他元素重叠

4. fixed（固定定位）

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

Fixed定位使元素的位置与文档流无关，因此不占据空间
Fixed定位的元素和其他元素重叠

5.sticky

基于用户的滚动位置来定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
特定阈值指的是 top, right, bottom 或 left 之一

6.inherit

规定应该从父元素继承 position 属性的值。

六、选择器和优先级

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

1. css优先级（权重）

由高到低

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式
id 选择器
类选择器、伪类选择器、属性选择器
标签选择器、伪元素选择器
通配符选择器
继承
浏览器自定义

2. 优先级计算

每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加 1、0、0、0
若是 ID选择符，则加 0、1、0、0
若是类选择符/属性选择符/伪类选择符，则分别加 0、0、1、0
若是元素选择符/伪元素选择符，则分别加 0、0、0、1

七、CSS选择器有哪些？哪些属性可以继承？

1. CSS选择符

id选择器(#myid)、类选择器(.myclassname)、标签选择器(p, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）

2. 可继承的属性

所有元素可继承

visibility 和 cursor。
内联元素可继承

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承

text-indent 和 text-align。
列表元素可继承

list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承

border-collapse
注意

标签有自己的颜色和样式，不会继承自父元素

八、盒子模型

1. W3C盒模型（标准）

W3C盒模型中内容的宽或高不会包含内边距和边框
width=content

2. IE盒模型（低版本）

IE盒模型中内容的宽或高将会包含内边距和边框
width=content+padding+border

3. 解决：box-sizing(c3新增)

取值：
content-box（默认）：代表W3C
border-box：代表IE

九、BFC是什么？

1. 概念

BFC(Block formatting context)直译为"块级格式化上下文"。
具有 BFC 特性的元素可以看作是隔离了的独立容器。
容器里面的元素不会在布局上影响到外面的元素。
并且 BFC 具有普通容器所没有的一些特性。

2. 触发条件

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

3. 渲染规则

根元素是一个BFC元素。
在同一个BFC元素中，相邻盒子垂直方向上的margin会发生折叠，取较大的margin值。
BFC元素是一个独立的容器，外部元素和内部元素互不影响。
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
BFC元素不再和其子元素发生 margin 折叠。

4. 应用场景

4.1 清除浮动

原因：浮动元素由于不占据文档流位置，故无法撑开父容器高度，会影响整体界面的布局
解决：为父元素设置display:flow-root属性

4.2 外边距合并问题

原因：在同一个BFC元素中，相邻盒子垂直方向上的margin会发生折叠，取较大的margin值
解决：可以给某box设置一个父容器，给该父容器创建一个BFC

十、移动端适配

1. 目的

在不同尺寸的手机设备上，页面“保持统一效果的等比缩放（看起来差不多）

移动端视口要想视觉效果和体验好，那么我们的视口宽度必须无限接近理想视口
理想视口：用户不进行手动缩放下，所谓的理想宽度就是浏览器(屏幕)的宽度

2. viewport

<meta 
	name="viewport" 
	content="width=device-width; 
	initial-scale=1; 
	maximum-scale=1;
> 
    
/*
* width:定义视口的高度，单位为像素。取值：正整数或设备高度 
* height：同width
* initial-scale:定义初始缩放值，整数或小数
* minimun-scale：定义缩小最小比例
* minimun-scale：定义放大最大比例
* user-scalable：定义是否允许用户手动缩放页面，默认值yes yes/no
*/

3. 适配方法

3.1 rem方案

<div>
    <p>1<p>
</div>

<style>
	div{
		font-size: 12px;
	}
	p{
		width: 10em;
		height: 10em;
		background-color: red;
	}
</style>

<!--
输出：
p为一个宽高为120px，背景为红色的盒子
-->

引用 flexible.js ，我们在页面上统一使用 rem 来布局

//（1）设置viewport
//（2）动态设置rem
const WIDTH = 750//设计稿宽度
function setRemUnit() {
	let rem = 100*screen.width/WIDTH
	document.documentElement.style.fontSize = `${rem}px`
}
setRemUnit()
//screen.width：属性声明了显示浏览器的屏幕的宽度，以像素计

3.2 vw/vh 方案

视口：浏览器中用于呈现网页的区域
1vw，等于视口宽度的1%；
1vh，等于视口高度的1%；
vmin，选取vw和vh中最小的那个值；
vmax，选取vw和vh中最大的那个值；
使用的时候，所有的px单位除以100（使用PostCSS的插件postcss-px-to-viewport，可以直接在代码中写px。）

优点：

纯css，不需要依赖脚本
根据视口宽度的百分比来定义元素宽度，计算方便

3.3 rem+vw方案

设置html{font-size:13.333vw}，在样式代码中1rem=13.333vw=100px。

即1rem等于设计稿上的100px，使用的时候除以100，直接小数点向左移动2位，1rem等于100px，那么10px就是0.1rem。

3.4 百分比（高度固定，宽度百分比）

相对于父元素的宽度，使用百分比的单位来定义子元素的宽度。

子元素的高度使用px来定义，使用max-width/min-width

控制子元素的最大最小尺寸

参考：

height/width 相对于子元素的直接父元素
op/bottom/left/right 相对于有定位属性的父元素
padding/margin 相对于直接父元素
border-radius 相对于自身

优点：

原理简单，不存在兼容性问题

缺点：字体大小无法无法随着屏幕大小改变

3.5 基于媒体查询的响应式设计

@media screen and (max-width: 600px) {
	/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
	.class {
		backgroundd: #ccc;
	}
}

4. 适配流程

1. 在 head 设置 width=device-width 的 viewport‘
2. 在 css 中使用 px
3. 在适当的场景使用 flex 布局，或者配合 vw 进行自适应
4. 在跨设备类型的时候(pc <-> 手机 <-> 平板)使用媒体查询