前端开发那些事儿

css面试相关问题

2021-04-06  本文已影响0人  Grandperhaps

目录

  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

2. 怪异盒模型 （box-sizing:border-box）

元素的总宽度width=content+padding+border

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属性定义，如果一条轴线排不下，如何换行。

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属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐

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

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

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

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

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

项目的属性

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


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

如果所有项目的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。


该属性可能取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

8. 双边距重叠问题（外边距折叠）

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

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

9. 清除浮动

1.使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
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新属性

14. line-height和height的区别

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

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

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

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

17. overflow的原理

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

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

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

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

绝对定位absolute：

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

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

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

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

21. 实现左右等高布局

点击跳转

22. css扇形

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

上一篇 下一篇

猜你喜欢

热点阅读