css面试相关问题

时间:2021-6-12 作者:qvyue

目录

  1. 标准盒模型和怪异盒模型
  2. link标签和import标签的区别
  3. flex布局
  4. BFC
  5. 垂直居中的方法
  6. 块元素和行元素
  7. visibility=hidden, opacity=0,display:none
  8. 双边距重叠问题(外边距折叠)
  9. 清除浮动
  10. css3新特性
  11. float的元素,display是block
  12. 三栏布局的实现方式
  13. css新属性
  14. line-height和height的区别
  15. 设置一个元素的背景颜色,背景颜色会填充哪些区域?
  16. inline-block、inline和block的区别
  17. overflow的原理
  18. 相对布局和绝对布局,position:relative和obsolute
  19. CSS如何实现一个最大的正方形
  20. 一行水平居中,多行居左
  21. 实现左右等高布局

1. 标准盒模型和怪异盒模型

1. 标准盒模型(content-box)

元素的总宽度width=content
css面试相关问题

2. 怪异盒模型 (box-sizing:border-box)

元素的总宽度width=content+padding+border
css面试相关问题

2. link标签和import标签的区别

link属于html标签,而@import是css提供的
页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。

link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。

link方式样式的权重高于@import的。
建议用link引入css

3. flex布局

容器的属性

1. flex-direction属性
属性决定主轴的方向(即项目的排列方向)。

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

2. flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方

3. flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

css面试相关问题

flex-start(默认值):左对齐
flex-end:右对齐

center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性
align-items属性定义项目在交叉轴上如何对齐。

css面试相关问题

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

6. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

css面试相关问题

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

项目的属性

1. order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2. flex-grow
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

css面试相关问题

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3.flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

css面试相关问题

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。
4. flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6. align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

css面试相关问题

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

4. BFC

直译成:块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。
BFC区域不会与float box重叠

BFC是页面上的一个独立容器,子元素不会影响到外面

计算BFC的高度时,浮动元素也会参与计算
BFC条件
float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption,flex,inline-flex的元素

overflow不为visible的元素

例子

  1. 外边距合并
  2. 自适应两栏布局
    (左边盒子浮动 右边BFC)
  3. 父元素没有高度 子元素浮动导致的塌陷

5. 垂直居中的方法

1. margin:auto法

margin:0 auto

2. margin负值

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/
}

补充:其实这里也可以将marin-top和margin-left负值替换成,
transform:translateX(-50%)和transform:translateY(-50%)
4. flex
将父元素设置为display:flex,并且设置align-items:center;
justify-content:center;

6. 块元素和行元素

块元素:独占一行,并且有自动填满父元素,可以设置margin和pading以及高度和宽度
行元素:不会独占一行,width和height会失效,并且在垂直方向的padding和margin会失
效。

7. visibility=hidden, opacity=0,display:none

  • opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
  • visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
  • display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。

8. 双边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠
折叠的结果为:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。

9. 清除浮动

1.使用带clear属性的空元素
在浮动元素后使用一个空元素如

,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用


来进行清理。
2.使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
3. 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
4. 使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
5. 使用CSS的:after伪元素
结合:after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

10. css3新特性

CSS3边框如border-radius,box-shadow等;
CSS3背景如background-size,background-origin等;
CSS3 2D,3D转换如transform等;
CSS3动画如animation等

11. float的元素,display是block

12. 三栏布局的实现方式

两列定宽一列自适应
1.使用float+margin:
给div设置float:left,left的div添加属性margin-right:left和center的间隔px,right的div添加属性margin-left:left和center的宽度之和加上间隔
2. 使用float+overflow
给div设置float:left,再给right的div设置overflow:hidden。这样子两个盒子浮动,另一个盒子触发bfc达到自适应
3. 使用position
父级div设置position:relative,三个子级div设置position:absolute,这个要计算好盒子的宽度和间隔去设置位置,兼容性比较好
4. 使用table实现
父级div设置display:table,设置border-spacing:10px//设置间距,取值随意,子级div设置display:table-cell,这种方法兼容性好,适用于高度宽度未知的情况,但是margin失效,设计间隔比较麻烦
5. flex实现
parent的div设置display:flex;left和center的div设置margin-right;然后right 的div设置flex:1;这样子right自适应,但是flex的兼容性不好
6. grid实现
parent的div设置display:grid,设置grid-template-columns属性,固定第一列第二列宽度,第三列auto,

13. css新属性

  • 在布局方面新增了flex布局
  • 在选择器方面新增了例如first-of-type,nth-child等选择器
  • 在盒模型方面添加了box-sizing来改变盒模型
  • 在动画方面增加了animation,2d变换,3d变换等
  • 在颜色方面添加透明,rbga等
  • 在字体方面允许嵌入字体和设置字体阴影,最后还有媒体查讯等

14. line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度,是针对字体来设置的,height一般是指容器的整体高度

15. 设置一个元素的背景颜色,背景颜色会填充哪些区域?

background-color设置的背景颜色会填充元素的content、padding、border区域

16. inline-block、inline和block的区别

  • Block是块级元素,其前后都会有换行符,能设置宽度,高度,margin/padding水平垂直方向都有效。
  • Inline:设置width和height无效,margin在竖直方向上无效,padding在水平方向垂直方向都有效,前后无换行符
  • Inline-block:能设置宽度高度,margin/padding水平垂直方向 都有效,前后无换行符

17. overflow的原理

当元素设置了overflow样式且值部位visible时,该元素就构建了一个BFC,BFC在计算高度时,内部浮动元素的高度也要计算在内,也就是说技术BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,所以达到了清除浮动的目的

创建BFC条件(满足一个):

  • float的值不为none;
  • overflow的值不为visible;
  • position的值为fixed / absolute;
  • display的值为table-cell / table-caption / inline-block / flex / inline-flex。

18. 相对布局和绝对布局,position:relative和obsolute

相对定位relative:
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

19. CSS如何实现一个最大的正方形

用 padding-bottom:100% 撑起来,padding-top: 100%;也同理

20. 一行水平居中,多行居左

  • p 标签设置为display:inline-block,并让 p 居中,p 中的文字左对齐:(p 的父级 text-align: center; p 自身 text-align: left;)
  • p 的宽度根据文字的宽度伸缩,当文字为一行时,则 p 的宽度小于 li 的宽度,居中。当大于一行时,p 的宽度和 li 的宽度是一致的,文字就居左了。

21. 实现左右等高布局

点击跳转

22. css扇形

23. 高度自适应的水平垂直居中布局

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。