前端常见的面试题 —— css

最新推荐文章于 2024-05-16 05:40:48 发布

_仰望星空的你

最新推荐文章于 2024-05-16 05:40:48 发布

阅读量486

点赞数 3

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_46419373/article/details/108410442

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要总结前端面试题中关于css和css3的内容。

友情链接：前端经典css50道面试题

常见的面试题有：

1、分别说一下两种盒模型？

盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个盒子（即标签）都会有内容（width，height），边框（border），以及内容和边框中间的缝隙（即内间距：padding），还有盒子与盒子之间的外间距（margin）。

标准盒模型就是写起来比较方便，也更规范。

盒模型分为标准盒模型和怪异盒模型(即IE模型)。

box-sizing：content-box //标准盒模型
box-sizing：border-box //怪异盒模型

content-box

默认值，标准盒子模型。width与height只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

width= 内容的宽度

height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        .content {
            width: 100px;
            height: 100px;
            border: 5px solid red;
            margin: 10px;
            padding: 10px;
            box-sizing: content-box;
        }
    </style>
</head>

<body>
    <div class="content">

    </div>
</body>

</html>

效果：
在这里插入图片描述
蓝色的部分就是内容的宽度（即宽：100px），那么当前的div的宽就是：宽100px + 内边距(左右)20px + 边框（左右）10px + 外边距（左右）20px；

border-box

width和height属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

注意：如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing是什么，最好在引用reset.css的时候，就对border-sizing进行统一设置，方便管理

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        .content {
            width: 100px;
            height: 100px;
            border: 5px solid red;
            margin: 10px;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="content">

    </div>
</body>

</html>

效果：
在这里插入图片描述
这个蓝色的背景就是内容：宽度：70px = 原本定义的宽度（100px）- 内边距（左右margin）20px - 边框（border）10px；

2、如何实现水平垂直居中？

16种方法实现水平居中垂直居中

水平居中

实现：

① text-align:center;
② margin:0 auto;
③ width:fit-content;
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法

细讲：

1、若是行内元素，给某个父元素设置``text-align:center`即可以实现行内元素水平居中。

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中</title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <span>实现盒子的水平居中</span>
</body>

</html>

效果：
在这里插入图片描述

2、若是块级元素，可以设置margin：0 auto即可。

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-top: 10px;
        }
        .box_content {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius: 50%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_content"></div>
    </div>
</body>

</html>

效果:
在这里插入图片描述

3、若子元素包含float:left属性，为了让子元素水平居中，则可以让父元素宽度设置为fit-content，并且配合margin，作如下设置：

.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器。

4、使用flex 2012年版本布局，可以轻松的实现水平居中子元素设置如下：

.son{
    display: flex;
    justify-content: center;
}

5、使用flex 2009年版本，父元素display:box;box-pack:center;如下设置：

.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
      -o-box-orient: horizontal;
      -o-box-pack: center;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
}

6、使用css3中新增的transform属性，子元素设置如下：

.son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

7、使用绝对定位方式，已经负值的margin-left，子元素的设置如下：

.son{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
}

8、使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}

垂直居中

实现：

① 单行文本, line-height
② 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现
③ vertical-align
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法

细讲：

1、单行文本

若元素是单行文本，可以设置line-height等于父元素的高度。

2、行内块级元素

若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

这是一种很流行的方法, 也适应IE7.

3、元素高度不定

可用vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
优点
元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.
缺点
IE6~7, 甚至IE8 beta中无效。

4、可用 Flex 2012版, 这是CSS布局未来的趋势. Flexbox是CSS3新增属性, 设计初衷是为了解决像垂直居中这样的常见布局问题. 相关的文章如《弹性盒模型Flex指南》

父元素作如下设置即可保证子元素垂直居中：

.parent {
  display: flex;
  align-items: center;
}

优点

内容块的宽高任意，优雅的溢出。
可用于更复杂高级的布局技术中。

缺点

IE8/IE9不支持。
需要浏览器厂商前缀
渲染上可能会有一些问题

使用flex 2009版

.parent {
      display: box;
      box-orient: vertical;
      box-pack: center;
}

优点

实现简单，扩展性强

缺点

兼容性差，不支持IE

6、使用transform,设置父元素相对定位（position:relative）,子元素如下css样式：

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

优点

代码量少

缺点

IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

7、元素高度固定

设置父元素相对定位（position:relative）,子元素如下css样式：

.son{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
}

优点

适用于所有的浏览器。

缺点

父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.

8、设置父元素相对定位（position:relative）,子元素如下css样式：

.son{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

优点

简单

缺点

没有足够空间时, 子元素会被截断, 但不会有滚动条.

3、怎样实现两列布局？

1、左列定宽，右列自适应

float+margin

	   .left{
            float: left;
            width: 100px;
            height: 100%;
            background: rebeccapurple;
        }
        .rigth{
            height: 100%;
            margin-left: 100px; /*大于等于#left的宽度*/
            background: blue;
        }

2、左列自适应，右列定宽

float+overflow

<div class="wrapper">
     <div class="rigth"></div>
     <div class="left"></div>
</div>

		.rigth {
            margin-left: 10px;
            /*margin需要定义在#right中*/
            float: right;
            width: 100px;
            height: 100%;
            background-color: #0f0;
        }
        .left {
            overflow: hidden;
            /*触发bfc*/
            height: 100%;
            background-color: blue;
        }

4、怎样实现三列布局？

两列定宽,一列自适应

使用float+margin实现

效果：
在这里插入图片描述

	<div class="wrapper">
        <div class="left"></div>
        <div class="main"></div>
        <div class="rigth"></div>
    </div>

css代码：

		.wrapper {
            height: 400px;
            background: red;
            min-width: 500px;
        }

        .left {
            margin-left: 10px;
            float: left;
            width: 100px;
            height: 100%;
            background-color: #0f0;
        }
        .main{
            float: left;
            width: 100px;
            height: 100%;
            margin-left: 20px;
            background: brown;
        }
        .rigth {

            margin-left: 230px;  /*等于#left和#center的宽度之和加上间隔,多出来的就是#right和#center的间隔*/
            height: 100%;
            background-color: blue;
        }

间列自适应高度，旁边两侧固定高度

双飞翼布局

实现步骤：

三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层div，并设margin: 0 200px；

实现：
在这里插入图片描述

HTML部分

    <div class="wrapper">
        <div class="main">
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css部分

		.wrapper {
            /* //确保中间内容可以显示出来，两倍left宽+right宽 */
            min-width: 600px; 
        }

        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
        }

        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }

        .main .inner {
            /* margin水平方向要是左右两者的宽度 */
            margin: 0 200px;    
            height: 100%;
            border: 2px solid brown;
        }
        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
        }

5、flex怎么使用，常用的属性有哪些？

flex的核心的概念就是容器和轴。

父容器

justify-content 项目在主轴上的对齐方式

flex-start | flex-end | center | space-between | space-around
space-between 子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。
space-around 子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

align-items 定义项目在侧轴上如何对齐

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

子容器

align-self 单个项目对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex：前面三个属性的简写是flex-grow flex-shrink flex-basis的简写

flex-grow 放大比例根据所设置的比例分配盒子所剩余的空间
flex-shrink 缩小比例设置元素的收缩比例多出盒子的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大，默认值是1
flex-basis 伸缩基准值项目占据主轴的空间
flex-basis 该属性设置元素的宽度或高度，当然width也可以用来设置元素宽度，如果元素上同时出现了width 和flex-basis那么flex-basis会覆盖width的值

flex: 0 1 auto；默认主轴是row,那么不会去放大比例，如果所有的子元素宽度和大于父元素宽度时，就会按照比例的大小去砍掉相应的大小。

轴

flex-direction 决定主轴的方向即项目的排列方向

row | row-reverse | column | column-reverse

6、讲讲BFC？

深入理解BFC和外边距合并(Margin Collapse)

BFC全称是Block Formatting Context，即块级格式化上下文。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。

下面的方式会创建块级格式化上下文：

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block,table-cell,table-caption,flex,inline-flex
5、overflow不为visible

需要背的条件：
1、浮动元素（元素的float不是none）
2、绝对定位元素（元素的position为absolute或fixed）
3、行内块元素
4、overflow值不为visible的块元素
5、弹性元素（display为flex或inline-flex元素的直接子元素）

BFC布局规则

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

7、说说css选择器的优先级？

css常用的选择器

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

css选择器的权重
!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

8、css的新特性

transition：过渡
transform：旋转、缩放、移动或者倾斜
animation：动画
gradient：渐变
shadow：阴影
border-radius：圆角

详解：

1、transition（过渡）

transition: property duration timing-function delay;
// css属性名称   过渡时间  过渡时间曲线  过渡延迟时间

2、transform（旋转、缩放、移动、倾斜）

transform:rotate(30deg)  旋转
transform:translate(100px,20px)  移动
transform:scale(2,1.5);  缩放
transform:skew(30deg,10deg);  扭曲

2、animation（动画）

animation: move 1s linear forwards;
// 定义动画的时间  duration 
// 动画的名称
// 动画的贝塞尔曲线
// animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。 
// forwards  当动画完成后，保持最后一个属性值

_仰望星空的你

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端常见的面试题 —— css

主要总结前端面试题中关于css和css3的内容。常见的面试题有：1、分别说一下两种盒模型？盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个盒子（即标签）都会有内容（width，height），边框（border），以及内容和边框中间的缝隙（即内间距：padding），还有盒子与盒子之间的外间距（margin）。标准盒模型就是写起来比较方便，也更规范。盒模型分为标准盒模型和怪异盒模型(即IE模型)。box-sizing：content-box //标准盒模型box-siz.
复制链接

扫一扫