CSS面试题汇总

引言

CSS是前端开发中不可或缺的一部分,掌握CSS的知识和技能对于成为一名优秀的前端工程师至关重要。在面试中,CSS面试题也是常见的考核点之一,因此,对于准备面试的前端开发者来说,掌握CSS的知识和技能是非常必要的。

1、CSS基础

1.1、CSS的选择器有哪些

以下是CSS的十大选择器:

  1. 标签选择器:通过元素的标签名来选择元素,例如p选择所有段落元素。
  2. 类选择器:通过元素的class属性值来选择元素,例如.my-class选择所有class属性值为my-class的元素。
  3. ID选择器:通过元素的id属性值来选择元素,例如#my-id选择所有id属性值为my-id的元素。
  4. 后代选择器:通过元素的后代关系来选择元素,例如ul li选择所有ul元素的子孙li元素。
  5. 相邻兄弟选择器:通过元素在同一级别上的相邻关系来选择元素,例如h1 + p选择紧接着h1元素后面的p元素。
  6. 通用选择器:选择所有元素,例如*选择所有元素。
  7. 属性选择器:通过元素的属性值来选择元素,例如[title="example"]选择所有title属性值为example的元素。
  8. 伪类选择器:通过元素的状态来选择元素,例如:hover选择鼠标悬停在元素上的元素,:nth-child(n)选择第n个子元素,:first-child选择第一个子元素等。
  9. 子元素选择器:通过元素的直接子元素来选择元素,例如ul > li选择所有直接子元素为liul元素。
  10. 伪元素选择器:用于选择元素中的特定部分,例如::before选择元素前面的内容,::after选择元素后面的内容。

1.2、CSS的选择器的优先级

CSS选择器的优先级是指在多个选择器应用于同一个元素时,浏览器根据选择器的特定规则来确定应用哪个样式。根据CSS规范,选择器的优先级按以下顺序:

  1. !important!important声明具有最高的优先级,它会覆盖所有其他声明,即使其他声明的优先级更高。
  2. 行内样式:在元素的style属性中设置的样式具有比其他选择器更高的优先级。
  3. ID选择器:通过元素的id属性值来选择元素的选择器具有比类选择器和标签选择器更高的优先级。
  4. 类选择器、属性选择器和伪类选择器:这些选择器在优先级上相等,但比标签选择器的优先级高。
  5. 标签选择器和伪元素选择器:这些选择器具有最低的优先级,只有在其他选择器未指定样式时才会应用。

当多个选择器具有相同的优先级时,浏览器会遵循“后面的规则优先”的原则,即在样式表中后面的规则会覆盖前面的规则。

需要注意的是,在编写CSS时,应尽可能避免使用!important声明,因为它可能会导致样式难以维护和调试。另外,应尽量避免过度使用ID选择器,因为它们可能会导致样式的重用性和可维护性降低。

1.3、CSS的哪些属性可以继承?那些属性不可以继承?

CSS中,有一些属性可以被子元素继承,即子元素会继承父元素的这些属性值。以下是CSS中常见的可以被继承的属性

  1. 字体属性:包括font-familyfont-sizefont-weightfont-stylefont-variantline-height
  2. 文本属性:包括text-aligntext-indenttext-transformtext-decorationletter-spacing等。
  3. 颜色属性:包括colorbackground-colorborder-color等。
  4. 其他属性:包括cursorvisibilityopacity等。

不能被继承的属性主要是那些与布局相关的属性,包括:

  1. 盒子模型属性:包括widthheightpaddingmarginborder等。
  2. 定位属性:包括positiontopbottomleftright等。
  3. 布局属性:包括displayflexfloatclearoverflow等。

1.4、什么是盒模型

盒模型(Box Model)是指在Web页面中,每个元素都被看作是一个矩形的盒子,包括内容区域、内边距、边框和外边距四个部分。这四个部分的宽度和高度都可以通过CSS来设置。

具体来说,盒模型可以分为以下四个部分:

  1. 内容区域Content):指元素内部用于显示文本、图片或其他内容的区域,其大小可以通过CSSwidthheight属性来设置。
  2. 内边距Padding):指内容区域与边框之间的距离,其大小可以通过CSSpadding属性来设置。
  3. 边框Border):指包围内容区域和内边距的线条,其大小和样式可以通过CSSborder属性来设置。
  4. 外边距Margin):指元素与相邻元素之间的距离,其大小可以通过CSSmargin属性来设置。

盒模型的大小由这四个部分的宽度和高度共同决定。它在页面中所占的实际宽度是margin + border + padding + content的宽度相加。

1.5、标准盒模型和IE的盒模型的区别

标准盒模型:

标准盒模型

IE盒模型:

IE盒模型

通过图片可以看出两者的不同之处就是标准盒模型的内容大小就是content的大小,而IE盒模型则是content + padding +border总的大小。

1.6、怎么设置标准盒模型和IE的盒模型

CSS中,盒模型有两种不同的定义方式,分别是标准盒模型IE盒模型。它们的主要区别在于如何计算元素的宽度和高度。

  1. 标准盒模型:在标准盒模型中,元素的宽度和高度包括内容区域、内边距和边框。可以通过设置CSSbox-sizing属性为content-box来使用标准盒模型。例如:

    /* 使用标准盒模型 */
    box-sizing: content-box;
    width: 200px; /* 宽度包括内容区域、内边距和边框 */
    ```
    
  2. IE盒模型:在IE盒模型中,元素的宽度和高度包括内容区域、内边距、边框和外边距。可以通过设置CSSbox-sizing属性为border-box来使用IE盒模型。例如:

    /* 使用IE盒模型 */
    box-sizing: border-box;
    width: 200px; /* 宽度包括内容区域、内边距、边框和外边距 */
    ```
    

1.7、display的值有哪些

CSS中,display是一个非常重要的属性,用于指定元素的显示方式。display属性可以取多个值,常见的包括:

  1. block:将元素呈现为块级元素,元素会在新行上开始,并占据父容器的整个宽度,可以设置宽度和高度。
  2. inline:将元素呈现为行内元素,元素不会换行,只占据自身的宽度,不可以设置宽度和高度。
  3. inline-block:将元素呈现为行内块级元素,元素不会换行,但可以设置宽度和高度。
  4. none:将元素隐藏,不占据页面空间。
  5. table:将元素呈现为表格。
  6. flex:将元素呈现为弹性盒子,可以通过设置flex-directionjustify-contentalign-items等属性来控制弹性盒子的布局。
  7. grid:将元素呈现为网格布局,可以通过设置grid-template-columnsgrid-template-rowsgrid-template-areas等属性来控制网格布局。

1.8、能详细讲一下display的block、inline和inline-block的区别吗

display属性的blockinlineinline-block值是比较常见的三种取值,它们在元素的呈现方式和处理方式上有着很大的区别,具体如下:

  • block:将元素呈现为块级元素,元素会在新行上开始,并占据父容器的整个宽度,可以设置宽度和高度。常见的块级元素包括<div><h1>-<h6><p>等。
  • inline:将元素呈现为行内元素,元素不会换行,只占据自身的宽度,不可以设置宽度和高度。常见的行内元素包括<a><span><em><strong>等。可以设置水平方向的marginpadding属性,不能设置垂直方向的paddingmargin
  • inline-block:将元素呈现为行内块级元素,元素不会换行,但可以设置宽度和高度。常见的行内块级元素包括<img><input>等。

块级元素通常用于组织网页布局,可以设置宽度和高度,可以包含其他块级元素和行内元素,常见的布局方式包括垂直排列、水平排列等。

行内元素通常用于呈现文字或者图片等内容,不可以设置宽度和高度,只能包含其他行内元素或者文本内容。

1.9、link和@import的区别

link@import都是用于在HTML文档中引入外部CSS文件的方法,但它们有一些不同之处:

  1. 加载顺序:当浏览器解析HTML文档时,link标签会同时被加载,而@import语句则会在HTML文档被加载完毕后再被加载。因此,使用link标签可以使CSS文件的加载和HTML文档的加载同时进行,加载速度更快。
  2. 兼容性link标签的兼容性更好,几乎所有的浏览器都支持,而@import语句在一些旧版本的浏览器中可能会出现兼容性问题。
  3. 功能link标签可以指定rel属性来指定引入文件的类型,如stylesheet表示引入CSS文件,icon表示引入网站图标等,而@import语句只能用于引入CSS文件。
  4. 优先级:当同时使用link标签和@import语句引入多个CSS文件时,浏览器会优先加载link标签引入的CSS文件,而@import语句引入的CSS文件则会在页面加载完毕后再被加载。此外,由于CSS规则的优先级是根据加载顺序来确定的,因此使用link标签可以更好地控制CSS规则的优先级。

总的来说,link标签是更好的引入CSS文件的方法,它具有更好的兼容性、加载速度更快、更灵活的功能和更好的优先级控制。而@import语句则适用于一些特殊情况,如在CSS文件中引入其他CSS文件等。

1.10、display:none与visibility:hidden的区别

这两个属性都是让元素隐藏,不可见。两者区别如下:

  1. 在渲染树中

    • display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间。

    • visibility:hidden不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,只是内容不可见。

  2. 是否是继承属性

    • display:none是非继承属性,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;

    • visibility:hidden是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible可以让子孙节点显示;

  3. 重排和重绘

    • 修改常规文档流中元素的 display 通常会造成文档的重排。

    • 修改visibility属性只会造成本元素的重绘;

  4. 读屏器:如果使用读屏器,设置为display:none的内容不会被读取,设置为visibility:hidden的内容会被读取。

1.11、伪元素和伪类的区别和作用

伪元素和伪类都是CSS中的重要概念,它们用于向元素添加一些特殊的效果或者样式,但它们有着不同的作用和用法。

  1. 伪元素(Pseudo-Element)

伪元素是用来在元素的某个部分添加特殊的样式和内容,它们以双冒号(::)开头。常见的伪元素包括:

  • ::before:在元素的内容之前添加内容;
  • ::after:在元素的内容之后添加内容;
  • ::first-letter:选中元素的第一个字母;
  • ::first-line:选中元素的第一行;
  • ::selection:选中元素中被用户选中的部分。

伪元素的作用是用来向元素的某个部分添加一些特殊的效果或者样式,例如可以使用::before伪元素来添加图标、箭头等特殊的内容,使用::after伪元素来添加特殊的边框、阴影等样式。

  1. 伪类(Pseudo-Class)

伪类是用来向元素添加一些特殊的状态或者行为的,它们以冒号(:)开头。常见的伪类包括:

  • :hover:鼠标悬停在元素上时的状态;
  • :active:元素被点击时的状态;
  • :visited:链接被访问过时的状态;
  • :focus:元素获得焦点时的状态;
  • :nth-child:选中元素的某个子元素。

伪类的作用是用来向元素添加一些特殊的状态或者行为,例如可以使用:hover伪类来实现鼠标悬停时的效果,使用:active伪类来实现元素被点击时的效果,使用:visited伪类来实现链接被访问过时的效果等。

需要注意的是,伪元素和伪类的使用方式有所不同。在使用伪元素时,需要使用双冒号(::)来表示,而在使用伪类时,只需要使用单冒号(:)即可。

1.12、margin和padding的使用场景

  • margin:需要在border外侧添加空白、空白处不需要背景(色)、上下相连的两个盒子之间的空白需要互相抵消时。
  • padding:需要在border内测添加空白、空白处需要背景(色)时、上下相连的两个盒子之间的空白为两者之合。

1.13、相邻的两个inline-block节点为什么会出现间隔,该如何解决

相邻的两个inline-block节点之间出现间隔的原因是由于它们之间存在空白字符(空格、回车、制表符等),这些空白字符会被解析为一个空格符号,从而导致两个inline-block节点之间产生间隔。

解决

  1. font-size

  2. 改变书写方式

  3. 使用margin负值

  4. 使用word-spacingletter-spacing

1.14、z-index属性在什么情况下会失效

z-index属性用于控制元素的层叠顺序,即元素在z轴方向上的显示顺序。但在以下情况下,z-index属性可能会失效:

  1. 父元素的z-index

如果父元素的z-index值低于子元素的z-index值,那么子元素的z-index值将失效。因为元素的层叠顺序不仅取决于元素本身的z-index属性,还取决于元素的父元素的z-index属性。

  1. 元素的position属性

只有设置了position属性(除了默认的position: static)的元素才能通过z-index属性控制层叠顺序。如果元素没有设置position属性,那么z-index属性将失效。

  1. 元素的display属性

一些display属性值可能会导致z-index属性失效,例如display: inlinedisplay: table-cell。这些属性值会导致元素的层叠顺序受到限制,从而使z-index属性失效。

  1. 元素的transform属性

如果元素设置了transform属性,那么z-index属性可能会失效。这是因为transform属性会创建一个新的层叠上下文,从而使元素的层叠顺序重新计算。

  1. 元素的opacity属性

如果元素设置了opacity属性,那么z-index属性可能会失效。这是因为opacity属性会创建一个新的层叠上下文,从而使元素的层叠顺序重新计算。

需要注意的是,z-index属性的使用应该遵循一定的规则,例如应该避免在网页中使用过多的z-index属性,避免嵌套过深的层叠上下文等,以避免出现意外的问题。

1.16、隐藏元素的方法有哪些

  • display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
  • visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。
  • opacity: 0:将元素的透明度设置为0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
  • position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。
  • z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。
  • clip/clip-path :使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
  • transform: scale(0,0):将元素缩放为0,来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

2、CSS3新特性

2.1、CSS3中有哪些新特性

  • 圆角 (border-radius:8px
  • 多列布局 (multi-column layout
  • 阴影和反射 (Shadoweflect
  • 文字特效 (text-shadow
  • 文字渲染 (Text-decoration
  • 线性渐变 (gradient
  • 旋转 (transform
  • 缩放,定位,倾斜,动画,多背景
  • flex布局
  • @media媒体查询

2.2、对媒体查询的理解

媒体查询(Media Queries)是CSS3中的一项功能,用于根据不同的媒体类型、设备特性和屏幕尺寸等条件选择不同的样式表或样式规则。通过媒体查询,可以让网页在不同的设备上呈现出更好的效果,提高用户体验。

媒体查询可以用于响应式设计,根据不同设备的屏幕大小和分辨率,选择不同的样式,以适应不同的设备。例如,在移动设备上可以选择简单的布局和少量的图像,而在桌面设备上可以选择更复杂的布局和更多的图像。

2.3、transition和animation的区别

transitionanimation都是CSS3中用于实现动画效果的属性,但它们有一些不同之处。

  1. 定义方式不同

transition通过在元素的某些属性(如colorbackgroundopacity等)之间设置过渡效果,实现从一个状态到另一个状态的平滑过渡。

animation则是通过定义一系列关键帧(keyframe)来实现动画效果。关键帧指定了动画在不同时间的状态,动画会从一个关键帧平滑过渡到另一个关键帧。

  1. 支持的动画类型不同

transition只能通过过渡某些属性值来实现动画效果,而animation可以实现更丰富、更复杂的动画效果,包括旋转、平移、缩放、透明度变化、颜色变化等。

  1. 控制方式不同

transition的过渡效果是由浏览器自动计算和控制的,只能控制过渡开始和结束的状态,无法控制过渡中间的状态。而animation是通过定义关键帧来控制动画效果,可以精确控制动画在不同时间的状态和变化方式。

  1. 使用场景不同

transition适用于需要平滑过渡的场景,例如鼠标悬停、点击等动作触发的状态变化。animation适用于需要复杂动画效果的场景,例如加载动画、页面切换动画等。

2.4、CSS预处理器和后处理器是什么

CSS预处理器和后处理器都是用于增强CSS功能和提高CSS开发效率的工具。它们可以扩展CSS的语法,提供变量、函数、嵌套、继承、混合等特性,以及自动化处理一些常见的CSS问题,如浏览器兼容性、压缩等。

  • CSS预处理器:是指在CSS编译之前,使用类似编程语言的语法编写CSS,并通过预处理器编译成标准的CSS代码。常见的CSS预处理器有SassLessStylus等。

  • CSS后处理器:则是指在CSS编译之后,对生成的CSS代码进行处理和优化,以提高性能和可维护性。常见的CSS后处理器有PostCSS

3、CSS定位与浮动

3.1、什么是BFC

BFC指的是“块级格式化上下文”(Block Formatting Context),是一个独立的渲染区域,用于控制块级元素的布局和浮动元素的交互。

BFC是一个隔离的渲染环境,其中的元素按照一定规则进行布局,不会影响到外部的元素,同时也不会受到外部的影响。在BFC中,元素的布局和尺寸计算是独立进行的,不会受到浮动元素的影响

3.2、你了解BFC的特点吗

BFC具有以下特点:

  1. BFC中的元素布局是独立的BFC内部的元素按照一定规则进行布局,不会影响到外部的元素,同时也不会受到外部的影响。
  2. BFC可以防止垂直方向上的边距重叠:在同一个BFC中,相邻两个元素的上下边距会发生重叠,而在不同的BFC中,它们的边距则不会重叠。
  3. BFC可以包含浮动元素:在BFC中,浮动元素会被包含在BFC中,不会对外部元素产生影响,从而避免了浮动元素带来的问题。
  4. BFC可以防止外部元素被浮动元素覆盖:在BFC中,元素的布局和尺寸计算是独立进行的,不会受到浮动元素的影响,从而避免了浮动元素覆盖外部元素的问题。
  5. BFC可以清除浮动:通过在父元素上触发BFC,可以清除子元素浮动带来的影响,使得父元素能够正确计算高度。
  6. BFC可以实现自适应布局:通过触发BFC,可以使得元素在其容器中自适应布局,达到一些常见的布局效果,如两栏自适应布局、垂直居中等。

3.3、如何创建BFC

BFC的形成有以下几种方式:

  1. 根元素或包含根元素的元素
  2. 浮动元素:如果一个元素的float属性不为none,则该元素会形成BFC
  3. 绝对定位元素:如果一个元素的position属性为absolutefixed,则该元素会形成BFC
  4. 行内块元素:如果一个元素的display属性为inline-block,则该元素会形成BFC
  5. overflow属性不为visible的元素:如果一个元素的overflow属性不为visible,则该元素会形成BFC

3.4、你知道BFC的作用吗

BFC有以下作用:

  • 解决margin的重叠问题:由于BFC是一个独立的区域,内部的元素和外部的元素互不影响,将两个元素变为两个BFC,就解决了margin重叠的问题。
  • 解决高度塌陷的问题:在对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden
  • 创建自适应两栏布局:可以用来创建自适应两栏布局:左边的宽度固定,右边的宽度自适应。

3.5、什么是margin重叠问题?如何解决?

问题描述: 两个块级元素的上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠

需要注意的是,浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。

重叠只会出现在垂直方向

计算原则: 折叠合并后外边距的计算原则如下:

  • 如果两者都是正数,那么就去最大者
  • 如果是一正一负,就会正值减去负值的绝对值
  • 两个都是负值时,用0减去两个中绝对值大的那个

解决办法: 对于折叠的情况,主要有两种:兄弟之间重叠父子之间重叠

1、兄弟之间重叠:

  • 底部元素变为行内盒子:display: inline-block
  • 底部元素设置浮动:float
  • 底部元素的position的值为absolute/fixed

2、父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位

3.6、position有哪些值

CSSposition属性用于设置元素的定位方式,它有以下几个值:

  1. static(默认值):元素按照文档流的方式进行定位,不受toprightbottomleft等属性的影响。
  2. relative:元素相对于其原来的位置进行定位,可以通过toprightbottomleft等属性来设置元素的偏移量。相对定位不会改变元素的文档流位置,也不会影响其他元素的位置。
  3. absolute:元素相对于其最近的已定位祖先元素进行定位,如果不存在已定位的祖先元素,则相对于文档进行定位。可以通过toprightbottomleft等属性来设置元素的偏移量。绝对定位会使元素脱离文档流,并且不占据文档流中的空间,因此可能会影响其他元素的位置。
  4. fixed:元素相对于浏览器窗口进行定位,可以通过toprightbottomleft等属性来设置元素的偏移量。与绝对定位类似,fixed定位也会使元素脱离文档流,并且不占据文档流中的空间。不过,fixed定位不会随着页面滚动而改变位置。
  5. sticky:元素在跨越特定阈值前为相对定位,之后为固定定位。可以通过toprightbottomleft等属性来设置元素的偏移量。sticky定位可以实现滚动时元素的吸附效果。

3.7、relative、absolute和fixed的区别

relativeabsolutefixedCSSposition属性的三种取值,它们的区别如下:

  1. relative:元素相对于其原来的位置进行定位,可以通过toprightbottomleft等属性来设置元素的偏移量。相对定位不会改变元素的文档流位置,也不会影响其他元素的位置。
  2. absolute:元素相对于其最近的已定位祖先元素进行定位,如果不存在已定位的祖先元素,则相对于文档进行定位。可以通过toprightbottomleft等属性来设置元素的偏移量。绝对定位会使元素脱离文档流,并且不占据文档流中的空间,因此可能会影响其他元素的位置。
  3. fixed:元素相对于浏览器窗口进行定位,可以通过toprightbottomleft等属性来设置元素的偏移量。与绝对定位类似,fixed定位也会使元素脱离文档流,并且不占据文档流中的空间。不过,fixed定位不会随着页面滚动而改变位置。

3.8、absolute与fixed共同点与不同点

absolutefixed都是CSSposition属性的取值,它们有以下共同点和不同点:

共同点

  1. 都能够使元素脱离文档流,不占据文档流中的空间。
  2. 都可以通过设置toprightbottomleft等属性来改变元素的位置。
  3. 都需要设置元素的宽度和高度,否则可能会出现意外的布局问题。

不同点

  1. 定位基准点不同:absolute是相对于其最近的已定位祖先元素进行定位,如果不存在已定位的祖先元素,则相对于文档进行定位;而fixed是相对于浏览器窗口进行定位。
  2. 滚动时表现不同:absolute随着页面滚动而改变位置,而fixed定位不会随着页面滚动而改变位置,始终固定在浏览器窗口的某个位置。
  3. 使用场景不同:absolute适合用于实现相对于某个元素的定位,例如菜单、弹窗等;而fixed适合用于实现常驻在屏幕某个位置的元素,例如导航栏、返回顶部按钮等。

3.9、对sticky定位有了解吗

sticky定位是CSS3中新增的一种定位方式,它可以使元素在跨越特定阈值前为相对定位,之后为固定定位。简单来说,就是当元素的位置在视口中可见时,它的定位行为类似于相对定位,当元素的位置在视口外不可见时,它的定位行为类似于固定定位。

sticky定位常用于实现滚动时元素的吸附效果,例如在页面滚动到一定位置时,导航栏固定在屏幕顶部。它可以通过设置toprightbottomleft等属性来控制元素的偏移量。

3.10、元素的层叠顺序

元素的层叠顺序,从底到上分别是:

  1. 背景和边框:建立当前层叠上下文元素的背景和边框。
  2. 负的z-index:当前层叠上下文中,z-index属性值为负的元素。
  3. 块级盒:文档流内非行内级非定位后代元素。
  4. 浮动盒:非定位浮动元素。
  5. 行内盒:文档流内行内级非定位后代元素。
  6. z-index:0:层叠级数为0的定位元素。
  7. 正z-indexz-index属性值为正的定位元素。

注意: 当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为0,不会建立新的层叠上下文,除非是根元素。

3.11、为什么需要清除浮动?清除浮动的方式

浮动是一种常见的CSS布局方式,它可以实现元素的排列和定位。但是,浮动元素对于父元素的高度计算和其他元素的布局会产生影响,因此在一些情况下需要对浮动进行清除。

需要清除浮动的原因有以下几个:

  1. 防止父元素高度塌陷:当一个父元素包含了浮动元素时,如果没有对浮动进行清除,父元素的高度将不会包含浮动元素,可能会导致父元素高度塌陷,影响布局效果。
  2. 防止浮动元素重叠:当多个浮动元素在同一个容器中时,如果它们的宽度之和超过了容器的宽度,浏览器将会自动将它们重叠在一起,影响布局效果。
  3. 确保布局的稳定性:当浮动元素与其他元素共同存在于一个布局中时,如果没有对浮动进行清除,可能会导致布局不稳定,影响用户体验。

清除浮动的方式有以下几种:

  1. 使用clear属性:在浮动元素之后添加一个clear元素,通过设置clear属性为bothleft/right来清除浮动。
  2. 使用overflow属性:在父元素中添加一个overflow属性,通过设置其值为autohiddenscroll来清除浮动。
  3. 使用after伪元素:在浮动元素的父元素上使用after伪元素,通过设置content属性为空、display属性为blockclear属性为both来清除浮动。

12、display、float、position的关系

displayfloatpositionCSS中常用的三种属性,它们在元素的布局和定位方面起着重要作用。

  1. display:用于设置元素的显示方式,包括块级元素、内联元素、表格元素等多种显示方式。不同的display属性值会影响元素的布局和盒模型。
  2. float:用于设置元素的浮动方式,可以使元素沿着其容器的左侧或右侧浮动。浮动元素不会占据文档流中的空间,会影响其他元素的位置和布局。
  3. position:用于设置元素的定位方式,包括相对定位、绝对定位、固定定位等多种定位方式。不同的position属性值会影响元素的定位和盒模型。

这三个属性之间的关系是相互影响的。例如:

  • 使用float属性会使元素脱离文档流,可能影响其他元素的位置和布局,因此需要结合position属性进行定位。
  • 使用position属性进行定位时,可以通过设置toprightbottomleft等属性来控制元素的偏移量,但是需要注意定位的基准点,可以通过display属性来设置元素的显示方式。
  • 在使用display属性时,不同的属性值会影响元素的盒模型,例如块级元素和内联元素的盒模型不同,这会影响元素的布局和定位。

4、CSS布局

4.1、你知道有哪些布局

Web开发中,常用的布局方式有以下几种:

  1. 块级布局(Block Layout):将元素作为一个矩形块进行布局,每个块级元素独占一行,可以通过设置widthheightmarginpaddingborder等属性来控制元素的大小和外观。
  2. 行内布局(Inline Layout):将元素作为行内元素进行布局,行内元素可以在一行中并排显示,可以通过设置widthheightmarginpaddingborder等属性来控制元素的大小和外观。
  3. 表格布局(Table Layout):将元素作为表格进行布局,可以使用tabletrtd等标签来创建表格,可以设置单元格合并、单元格宽度、表格边框等属性来控制表格的样式和布局。
  4. 弹性布局(Flexbox Layout):弹性布局是一种相对较新的布局方式,可以通过设置flex容器和flex项的属性来控制元素的位置和大小,可以实现灵活的布局效果。
  5. 栅格布局(Grid Layout):栅格布局是一种基于网格的布局方式,可以通过设置网格容器和网格项的属性来控制元素的位置和大小,可以实现复杂的布局效果。
  6. 浮动布局(Float Layout):浮动布局是一种常见的布局方式,通过设置元素的float属性来实现元素的浮动和定位,可以实现复杂的布局效果。

4.2、常见的CSS布局单位

CSS中,常见的布局单位有以下几种:

  1. 像素(px):像素是最常见的CSS布局单位之一,它是一个固定的长度单位,可以精确地控制元素的大小和位置。但是,像素不是一个相对单位,会受到屏幕分辨率和缩放比例的影响。
  2. 百分比(%):百分比是一种相对单位,可以相对于父元素进行计算,可以用于设置元素的宽度、高度、内边距、外边距等属性。但是,百分比的计算方式比较复杂,有时也会受到浏览器窗口大小的影响。
  3. 视口单位(vw、vh、vmin、vmax):视口单位是一种相对单位,可以相对于视口大小进行计算,可以用于设置元素的宽度、高度、字体大小等属性。视口单位比较适合响应式布局,可以根据不同的设备和屏幕大小进行自适应。
  4. em和rememrem是一种相对单位,可以相对于父元素或根元素进行计算,可以用于设置元素的字体大小、内边距、外边距等属性。emrem的计算方式比较灵活,可以实现一些复杂的布局效果。
  5. 自适应单位(fr、auto、min-content、max-content等):自适应单位是一种比较新的布局单位,可以根据元素的内容或容器的大小进行自适应,可以用于设置元素的宽度、高度、网格等属性。自适应单位比较适合一些动态的布局场景,可以实现灵活的布局效果。

4.3、vw/vh和百分比两者的区别

vw/vh和百分比都是CSS中常用的相对单位,但是它们有以下几点区别:

  1. 计算方式不同:百分比是相对于父元素的大小进行计算的,而vw/vh是相对于视口大小进行计算的。因此,百分比可以用于任何元素的大小和位置的计算,而vw/vh只适用于视口大小相关的计算。
  2. 精度不同vw/vh相对于视口大小的计算方式比百分比更加精确,因为视口大小不受页面缩放的影响。而百分比的计算是基于父元素的大小,如果父元素大小发生变化或者页面缩放,百分比的计算结果也会发生改变。
  3. 用途不同:百分比可以用于任何元素的大小和位置的计算,而vw/vh主要用于响应式设计和移动端布局,可以根据视口大小进行自适应的布局。

4.4、如何根据设计稿进行移动端适配

移动端适配主要有两个维度:

  • 适配不同像素密度:针对不同的像素密度,使用CSS媒体查询,选择不同精度的图片,以保证图片不会失真。
  • 适配不同屏幕大小:由于不同的屏幕有着不同的逻辑像素大小,所以如果直接使用px作为开发单位,会使得开发的页面在某一款手机上可以准确显示,但是在另一款手机上就会失真。为了适配不同屏幕的大小,应按照比例来还原设计稿的内容。为了能让页面的尺寸自适应,可以使用rememvwvh等相对单位。

4.5、响应式设计的概念及基本原理

响应式设计(Responsive Design)是一种可以自适应不同设备、不同屏幕大小的设计方法,可以使网站在不同设备上都能提供最佳的用户体验。

响应式设计的基本原理如下:

  1. 弹性网格布局(Flexible Grid Layout):使用相对单位(如百分比、emrem等)来设置网格的大小和位置,以实现网页的自适应布局。
  2. 弹性图片和媒体(Flexible Images and Media):使用max-width属性来控制图片和媒体的大小,以实现在不同的设备和屏幕上的自适应显示。
  3. 媒体查询(Media Queries):使用CSS3的媒体查询来根据不同的设备和屏幕大小来应用不同的样式,以实现不同设备上的自适应布局。
  4. 流式布局(Fluid Layout):使用相对单位来设置容器的宽度和高度,以实现容器的自适应布局。
  5. 视口(Viewport):使用视口相关的单位(如vwvhvminvmax等)来设置元素的大小和位置,以适应不同设备和屏幕的大小。

、CSS大题思考

5.1、CSS优化和提高性能的方法

可以从以下三个方面去优化,如加载时性能、选择器性能以及渲染性能

加载时性能:

  1. 减少CSS文件的大小:可以通过压缩CSS文件、删除注释和空格、合并相似的CSS代码等方式来减少CSS文件的大小,从而提高页面的加载速度。
  2. CSS单一样式:当需要下边距和左边距的时候,很多时候会选择使用margin:top 0 bottom 0;margin-bottom:bottom;margin-left:left;执行效率会更高。
  3. 避免使用@import@import会在页面加载完成后才加载CSS文件,会延迟页面的渲染速度。因此,应该尽量避免使用@import来加载CSS文件。
  4. 使用外部CSS文件:将CSS代码单独放在外部文件中,可以使浏览器缓存CSS文件,从而减少页面的加载时间和HTTP请求的数量。
  5. 使用浏览器的缓存机制:可以使用浏览器的缓存机制来减少文件的下载和加载时间,从而提高页面的渲染速度。

选择器性能:

  1. 避免使用通配规则:如*{}计算次数惊人,只对需要用到的元素进行选择。
  2. 避免使用CSS表达式CSS表达式会在每次页面滚动、改变大小或重绘时重新计算,会严重影响页面的性能。因此,应该避免使用CSS表达式来设置样式。
  3. 尽量少的去对标签进行选择:而是用class
  4. 尽量少的去使用后代选择器,降低选择器的权重值:后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。
  5. 避免使用不必要的样式:应该避免使用不必要的样式,如重复的样式、过度的嵌套等,以减少CSS文件的大小和页面的渲染时间。
  6. 属性值单位:属性值为0时,不加单位,属性值为浮动小数0.**,可以省略小数点之前的0
  7. 了解哪些属性是可以通过继承而来的:然后避免对这些属性重复指定规则。

渲染性能:

  1. 慎重使用高性能属性:浮动、定位。
  2. 尽量减少页面重排与重绘

5.2、对CSS工程化的理解

CSS工程化是一种将CSS代码进行模块化、组件化、自动化等处理的开发方式。通过CSS工程化,可以提高CSS代码的可维护性、可重用性和可扩展性,从而提高CSS的开发效率和质量。

CSS工程化的主要特点包括:

  1. 模块化:将CSS代码按照功能或页面元素进行拆分,以便更好地组织和管理CSS代码。
  2. 组件化:将CSS代码按照组件进行划分,以便更好地复用和扩展CSS代码。
  3. 自动化:通过使用工具和技术,如自动化构建工具、CSS预处理器、PostCSS等,来自动化处理CSS代码,提高开发效率和质量。
  4. 规范化:通过使用CSS规范、代码规范等方式来统一CSS代码的格式、风格和命名,以便更好地维护和管理CSS代码。
  5. 团队协作:通过使用版本控制工具、代码审查等方式来实现团队协作,以便更好地管理和维护CSS代码。

5.3、对flex布局的理解

flex布局是一种CSS3中的布局方式,用于实现灵活的盒子模型布局。flex布局的核心是flex容器flex项目,通过对flex容器flex项目的设置,可以实现灵活的布局方式。

flex布局的主要特点包括:

  1. 灵活的布局方式:通过设置flex容器和flex项目的属性,可以实现灵活的布局方式,包括水平排列、垂直排列、居中、对齐、分布等方式。
  2. 自适应的元素大小:通过flex容器的设置,可以实现自适应的元素大小,使得元素在不同尺寸的容器中都能够自适应适当的大小。
  3. 简单的语法flex布局的语法相对简单,只需要设置flex容器和flex项目的一些属性即可实现灵活的布局方式。

flex布局的基本概念包括:

  1. flex容器:通过设置display属性为flexinline-flex来定义一个flex容器。
  2. flex项目flex容器中的子元素即为flex项目,每个flex项目都有一个flex属性,用于定义它在flex容器中的大小和位置。
  3. 主轴和交叉轴flex容器中的主轴和交叉轴分别是flex布局的两个方向,可以通过设置flex-direction属性来定义它们的方向。
  4. 对齐方式:可以通过设置justify-contentalign-items等属性来定义Flex项目在主轴和交叉轴上的对齐方式。

博客说明与致谢

文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。

引用的资料如有侵权,请联系本人删除!

感谢勤劳的自己个人博客GitHub,公众号【归子莫】,小程序【子莫说】

如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!

幸好我在,感谢你来!