CSS常见面试题

洋茄子炒鸡蛋

已于 2023-11-24 16:17:22 修改

阅读量1k

点赞数 2

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

于 2021-08-06 11:14:54 首次发布

本文链接：https://blog.csdn.net/zw7518/article/details/119446182

版权

前端面试专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前端CSS常见面试题

Flex

List item
flex布局: 即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列
主轴和侧轴
主轴：即沿着flex元素排列方向所在的轴
侧轴：垂直于flex元素排列方向的轴

父元素的属性设置再父元素中，控制的是子元素的排列

1. flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴

row 水平排列，沿着X轴方向从左到右排列，默认值
column 垂直排列，沿着Y轴方向从上到下排列
row-reverse 水平排列，沿着X轴方向从右到左排列
column-reverse 垂直排列，沿着Y轴方向从下到上排列

2. justify-content：设置在主轴方向上的子元素的排列方式

flex-start 沿主轴方向从左到右（从上到下）排列，默认值
flex-end 从主轴方向从右到左（从下到上）排列
center 居中对齐
space-around 平均分配剩余空间
space-between 两端贴边，中间仔平均分配剩余空间

3. flex-wrap：设置子元素是否换行

nowrap 不换行，默认值，缩放父元素，同时也会缩放子元素
wrap 设置换行

4. align-items：设置在当前行的侧轴（纵轴）方向上的对齐方式————适用于单行

flex-start 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
stretch 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

5. align-content：设置在侧轴（纵轴）方向上的多行子元素的排列方式——————适用于多行
注意：容器内必须有多行的项目，该属性才能渲染出效果。
即需要搭配flex-wrap:wrap;

flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
stretch 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

6. flex-flow：复合属性，同时设置主轴方向和是否换行

.father {
   /* 首先要给父元素添加flex */
   display: flex;
 
   width: 100%;
   height: 200px;
   /* 父元素中常见的六种属性 */
   /* 1.设置主轴方向 */
   flex-direction: row;
   /* 2.设置在主轴方向上的子元素的排列方式 */
   justify-content: center;
 
   /* 3.设置子元素是否换行 */
   flex-wrap: nowrap;
 
   /* 4.设置在侧轴方向上的单行子元素的排列方式————仅适用于单行 */
   align-items: center;
 
   /* 5.设置在侧轴方向上的多行子元素的排列方式——————适用于多行 */
   align-content: center;
 
   /* 6.复合属性，同时设置主轴方向和是否换行 */
   /* flex-flow: row nowrap; */
}

子元素的属性

flex 设置子项元素对剩余空间的分配，每一个子元素项都可单独设置，将所有子元素占的份数加起来，即为占父元素的比例
align-self 单独设置子项自己在侧轴上的排列方式，包括flex-start flex-end center stretch baseline
order控制子项的排列顺序，越小越靠前,默认值为0

.son{
    /* 子元素上的属性 */

   /* 1.设置元素对剩余空间的分配份数 */
   /* 即，将所有子元素占的分数加起来，然后占父元素宽度的几分之几 */
   flex: 1;

   /* 2.设置子项自己在侧轴上的排列方式 */
   align-self: center;

   /* 3.order控制子项的排列顺序，越小越靠前，默认为0 */
   order: inherit;
}

flex:1;的值是1 ,1, 0%。

【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】
flex是 flex-grow，flex-shrink，flex-basis的缩写。

flex-grow：当父控件还有剩余空间的时候，是否进行放大grow其中数值代表的是放大比例，值为0的时候表示不放大；
flex-shrink：当父控件空间不够的时候，是否进行缩小shrink其中数值代表的是与控件大小有关的缩小比例；
flex-basis：当子空间含有这个属性的时候，代表了子空间占主轴的大小，主轴就是flex的主方向row是横向，column是竖向。

主要思想

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。
最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性

css flex布局的优缺点

优点：在于其容易上手，根据flex规则很容易达到某个布局效果，
缺点：浏览器兼容性比较差，只能兼容到ie9及以上；兼容性

flex布局分为旧版本display: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。
Android

2.3 开始就支持旧版本 display:-webkit-box;
4.4 开始支持标准版本 display: flex;

IOS

6.1 开始支持旧版本 display:-webkit-box;
7.1 开始支持标准版本 display: flex;

ie10开始支持，但是ie10的是-ms形式的。

BFC

Block Formatting Contexts（块级格式化上下文），它属于上述定位方案的普通流。
具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗一点来讲，可以把BFC，理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC 布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

触发BFC

只要元素满足下面任一条件即可触发BFC特性：

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

应用：父子元素margin塌陷解决方法

触发bfc(块级格式上下文),改变父级的渲染规则
改变父级的渲染规则有以下四种方法,给父级盒子添加

position:absolute/fixed;
display:inline-block;
float:left/right;
overflow:hidden;

应用：相邻元素margin合并解决方案

给box2加上一层父级元素并加上overflow:hidden;
给两个都加一层父级再加bfc

<div>
   <div class="box1"></div>
</div>
<div>
   <div class="box2"></div>
</div>

但是这两种方法都改变了HTML结构,在开发中是不能采用的
所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题

为什么会有BFC

从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？解决办法就是：BFC
margin 问题解决方案：放在不同的bfc中为什么会出现高度塌陷

父元素高度自适应，子元素 float 后，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

布局
圣杯布局/双飞翼布局
margin-left/right : -200px;
float: left/right;
内容居中: padding: 200px;

移动端布局方案

流式布局（百分比布局）
弹性布局（flex）
响应式布局
less+rem+媒体查询布局

子选择器

相邻兄弟选择器(+)
兄弟选择器（~）
子选择器(>)
:first-child
:nth-child(n)
:nth-of-type(n)
属性选择器 [title~=hello]

animation和transiton的相关

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property：规定设置过渡效果的 CSS
属性的名称【比如width,height,background等等】。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始【可理解为延迟】。

animation 最常用的几种属性有以下几种：

animation-name(动画名称)
animation-duration(动画执行一次所需时间)
animation-delay(动画在开始前的延迟时间)
animation-timing-function(动画以何种运行轨迹完成一个周期)
1. linear: 表示动画从头到尾的速度都是相同的。
2. ease-in: 表示动画以低速开始。
3. ease-out: 表示动画以低速结束。
4. ease-in-out: 表示动画以低速开始和结束。
animation-iteration-count(动画播放次数)
1. 直接写数字，自定义想要播放动画的次数。
2. infinite：设置动画无线循环播放。
animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)
1. forwards: 表示动画结束后，元素直接接使用当前样式。
2. backwards: 表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值
animation-direction(是否轮流反向播放动画)
1. reverse: 表示动画反向播放。
2. alternate: 表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。
3. alternate-reverse: 表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。

用CSS3动画替代JS模拟动画的好处：

不占用JS主线程；
可以利用硬件加速；
浏览器可对动画做优化（元素不可见时不动画减少对FPS影响）

块模型和默认模型box-sizing

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px
宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box
告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

margin负值的实际应用

1. 边框去重

有的时候我们做Tab选项卡的时候不希望tab元素和父元素都加上边框，因此就可以给tab元素添加一像素的margin。(具体详细自行补充学习)

2. 左右布局

当用margin负值之后就可以通过改变margin-top等的值成为负值之后不需要使用float就可以实现左右布局

常见面试题

居中问题
1. 行内元素水平居中：text-align: center
2. 块级元素水平居中：margin: 0 auto
3. 块级元素flex：给父元素设置： display: flex; justify-content: center; align-item: center;
4. 宽高已知：absolute；left；margin-left
5. 宽高未知：absolute; left; transform: translateX(-50%)
6. 行内元素垂直居中：line-height
px/em/rem的区别
1. px（绝对长度单位）
2. em（相对长度单位）相对于父元素
3. rem（相对长度单位）相对于文档
4. rem: 它的全称是font size of the root element （根元素的字体大小）, 它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。 rem是一种相对长度单位。

3. margin-top, marigin-bottom

只有垂直margin才可重叠，且参与的对象为同一个bfc的block-level box;重叠只有满足特定的条件才会发生；重叠的计算因margin值的正负情况而有所不同。

4. 实现同一行有多少种方式

position absolute
inline block
flex

<html>
<head></head>
<body>
  <div id="container">
    <div class="label">测试测试</div>
    <div class="label">测试测试</div>
    <div class="label">测试测试</div>
    <div class="label">测试测试</div>
    <div class="label">测试测试</div>
    <div>
</body>
<style>
  #container {
    width: 400px;
    height: 200px;
    background-color: red;
    display: flex;
    display: -webkit-flex;
    /* 从左端开始沿水平轴防止flex item */
    flex-direction: row;
    /* 强制 flex item不换行，沿着同一行堆叠 */
    flex-wrap: nowrap;
    /* flex item在主轴上的对齐方式，这里定义左对齐 */
    justify-content: flex-start;
    /* 定义交叉轴对其方式 */
    align-items: flex-start
  }
  .label {
    width: 100px;
    margin-left: 5px;
    background-color: blue;
  }
</style>
</html>

5. 行内元素如何设置高度

高，行高及顶和底边距不可改变；
行内元素，不能定义自己的宽和高(input是个例外，可以独立设置宽/高)。如果需要设置高度，可以通过行高line-height撑起来。
宽度就是它的文字或图片的宽度，不可改变。
左右margin可以改变，padding可以改变。(ie6上下不能padding)
行内元素不会单独的占有一行，而是挨着显示的。
行内元素要设置宽高，可以通过设置display: inline-block，即可像块级元素一样设置宽高了

6.实现div行内布局所有行跟随最大高度自适应

/*单行双列*/
.row-single {
    width: 100%;
    line-height: 32px;
    border-bottom: 1px solid #D0D6D9;
    box-sizing: border-box;
    flex-wrap: wrap; // 主要代码
    align-items: stretch; // 主要代码
    display: flex // 主要代码
}
.scale-20 {
    float: left;
    width: 189px;
    height: auto;
    line-height: initial;
    word-break: break-all;
}
.scale-down {
    width: 160px;
    float: left;
    height: 100%;
    border-right: none !important;
}

7. css3有哪些新属性

圆角（border-radius）
阴影（box-shadow）
过渡效果（transition）
翻转（transform）
动画（animation）
媒体查询（@media）
弹性盒子（flex）

8. CSS有哪些属性可以被继承

字体属性、文本属性、元素可见属性（visibility）、光标属性

9. 不能继承的属性

display
盒模型的属性：宽、高、内外边距、边框
背景属性：背景颜色、图片、位置、大小、重复
定位属性：float、clear、position
内容属性：content、counter-reset、counter-increment
outline-style、outline-width、outline-color、outline

洋茄子炒鸡蛋

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS常见面试题

前端CSS常见面试题FlexList itemflex布局: 即弹性盒子布局，是给父元素添加flex属性，以控制子元素的位置和排列主轴和侧轴主轴：即沿着flex元素排列方向所在的轴侧轴：垂直于flex元素排列方向的轴父元素的属性设置再父元素中，控制的是子元素的排列1. flex-direction:设置主轴方向，设置了其中一个为主轴，则另一个为侧轴row 水平排列，沿着X轴方向从左到右排列，默认值column 垂直排列，沿着Y轴方向从上到下排列row-reverse 水平排列，沿
复制链接

扫一扫