CSS系列

最新推荐文章于 2023-03-11 16:24:07 发布

Continue丶

最新推荐文章于 2023-03-11 16:24:07 发布

阅读量393

点赞数

分类专栏：面试系列文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43522998/article/details/122062527

版权

面试系列专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言

在面试当中，其实也有许多公司喜欢考察CSS相关的知识，像盒子模型、垂直居中的方式、清除浮动的方式，以及要求实现一些小案例等。接下来主要说明经常会提问的以及在我面试中遇到的一些CSS问题。

高频考点

1. 盒子模型

网页布局的核心本质：即利用CSS摆盒子
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。封装周围的HTML元素包括：边框、内边距、外边距、和实际内容。

在这里插入图片描述

盒模型分为标准盒模型 和 IE盒模型

标准盒模型(默认) ：

设置：box-sizing：content-box;
特性：设置的width、height是content的width、height，添加的padding、border是会额外添加的。
举例：设置width、height为100px的标准盒子添加10px padding、10px border后width、height为140px

IE盒模型 ：

设置：box-sizing：border-box;
特性：设置的width、height是盒子总的width、height，添加padding、border会压缩content的大小。
举例：设置width、height为100px的标准盒子添加10px padding、10px border后width、height还为100px，content的width、height变为60px

2.垂直居中的方式

flex布局:

    .out {
      width: 300px;
      height: 300px;
      background: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .in {
      width: 50%;
      height: 50%;
      background: purple;
    }

如果项目是块元素，还可以直接用flex+margin:auto实现，可以说是最简单的实现

    .out {
      width: 300px;
      height: 300px;
      background: pink;
      display: flex;
    }

    .in {
      marign:auto;
      width: 50%;
      height: 50%;
      background: purple;
    }

子绝父相+transform

    .out {
      position: relative;
      display: flex;
      width: 300px;
      height: 300px;
      background: pink;
    }

    .in {
      position: absolute;
      width: 50%;
      height: 50%;
      background: purple;
      top: 50%;
      left: 50%;
      /* 1.子元素没确定大小 */
      transform: translate(-50%, -50%);
      /* 2.确定了大小也可以直接移动子元素的一半 */
      /* margin-left: -75px;
      margin-top: -75px; */
    }

如果知道子元素的宽高，也可以通过设置margin值来代替transform，不过更推荐transform，因为不涉及回流，性能更高。

子绝父相+auto

    .out {
      width: 300px;
      height: 300px;
      background: pink;
      /* 2.父相 */
      position: relative;
    }

    .in {
      width: 50%;
      height: 50%;
      background: purple;
      /* 1.子绝 */
      position: absolute;
      /* 3.将上下左右宽度进行扩展，实现相对父元素全局流动 */
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      /* 4.设置计算平均分配剩余 */
      margin: auto;
    }

通过设置各个方向值为0，实现子元素相对父元素全局流动，再设置margin:auto计算平均分配达到垂直居中。

3.清除浮动的方式

必要性：想让父元素的高由子元素撑开，但是给子元素设置浮动后脱离了标准流，父元素高由于为auto则变为了0，通过清除浮动来达到预期。

<body>
  <div class="box">
    <div class="son"></div>
    <div class="son"></div>
  </div>
  <div class="common"></div>
</body>

额外标签法：添加无意义的标签，给其设置属性clear:both;(这里添加了class为both的div)

<body>
  <div class="box">
    <div class="son"></div>
    <div class="son"></div>
    <div class="both"></div>
  </div>
  <div class="common"></div>
</body>

    .both {
      width: 0;
      height: 0;
      clear: both;
    }

优点：通俗易懂
缺点：添加许多无意义的标签，结构化较差，且添加的必须是块级标签
2.父级添加overflow：给父元素设置overflow：hidden

    .box {
      width: 500px;
      background: pink;
      overflow: hidden;
    }

通过设置overflow：hidden来使box触发生成一个BFC环境，而BFC内部浮动子元素也会参与高的计算。

优点：代码简洁
缺点：无法显示溢出部分
3.添加伪元素（单伪双伪）

单伪：

    .box::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    .box {
      *zoom: 1;///*IE67专有*/
    }

双伪：

    .box::after,
    .box::before {
      content: '';
      display: table;
    }
    .box::after {
      clear: both;
    }
    .box {
      *zoom: 1;///*IE67专有*/
    }

优点：没有增加标签，结构简单
缺点：需要照顾低版本浏览器

4.隐藏元素的方式

1.display：none

结构上：元素在页面上彻底消失，不占据空间且无法点击

继承性：父元素设置了display：none，子元素无法显示

性能：会引起重绘重排，性能消耗大

2.opacity：0

结构上：元素在页面上透明，仍然占据空间可以点击

继承性：父元素设置opacity：0，子元素无法显示

性能：但上升为独立合成层后，不需要回流重绘，性能高

3.visibility：hidden

结构上：元素在页面上消失，仍然占据空间可以点击

继承性：visibility：hidden，子元素继承这个属性，但是可以通过设置visibility：visible解除

性能：不会引起重排，只重绘，性能消耗小

4.设置width height 为0

5.position 移动left、right、…至屏幕外

6.transform

5.BFC(块级格式化上下文)

BFC(块级格式化上下文)，它是一个独立的渲染区域，BFC之间布局互不影响。

布局规则

内部Box会在垂直方向，一个接一个放置。
垂直方向举例由margin决定，属于同一个BFC的两个相邻的Box会发生重叠。
每个盒子的左外边框紧挨着包含快的左边框，即使浮动也是如此。
BFC区域不会与float box重叠。
BFC就是一个隔离的容器，容器里面的子元素不会影响到外面的元素，外面也不会影响到里面。
计算BFC高度时，浮动元素也参与计算。

触发条件

根元素或其他包含根元素的元素
float值不为none
overflow值不为visible
display的值为table-cell、table-caption、inline-block之一
position的值为absolute、fixed之一

作用

1. 清除浮动

如上文overflow清除浮动

    .box {
      width: 500px;
      background: pink;
      overflow: hidden;
    }

2. 防止margin重叠

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

        .box {
            width: 100px;
            height: 100px;
        }

        .box1 {
            margin-bottom: 10px;
            background-color: pink;
        }

        .box2 {
            margin-top: 20px;
            background-color: purple;
        }

此时box1、box2的marign值会发生重叠，相距取大值20px，此时给box2创建bfc环境，此时相距为累加值30px不会造成重叠

<body>
    <div>
        <div class="box box1"></div>
        <div style="overflow: hidden;">
            <div class="box box2"></div>
        </div>
    </div>
</body>

3. 多栏布局

6.实现双栏布局

即一栏固定，另一栏自适应（三栏布局则两栏固定）

例子：left固定，right自适应

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

1. flex布局：left盒子宽固定，right盒子设为flex：1自适应

        .box {
            width: 100%;
            height: 1000px;
            display: flex;
        }

        .left {
            width: 100px;
            height: 100%;
            background-color: pink;
        }

        .right {
            flex: 1;
            height: 100%;
            background-color: purple;
        }

2. 子绝父相：left盒子宽固定，right盒子设置top、left、right、bottom距离

        .box {
            position: relative;
            width: 100%;
            height: 1000px;
        }

        .left {
            width: 100px;
            height: 100%;
            background-color: pink;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 100px;
            background-color: purple;
        }

3. 浮动float：left盒子设为左浮动，right盒子设为右浮动

        .box {
            width: 100%;
            height: 1000px;
        }

        .left {
            float: left;
            width: 100px;
            height: 100%;
            background-color: pink;
        }

        .right {
            float: right;
            width: calc(100% - 100px);
            height: 100%;
            float: right;
            background-color: purple;
        }

7.介绍flex布局

flex：flexible box，弹性布局，用来为盒子模型提供最大的灵活性。

容器：用作flex布局的盒子叫做容器
项目：容器内所有盒子都叫做项目
主轴：flex-direction设置的方向为主轴
交叉轴：非主轴，与主轴垂直的方向
容器的属性
flex-direction：row | row-reverse | column | column-reverse; 确定主轴的方向
flex-wrap：nowrap | wrap | wrap-reverse; 确定是否换行
flex-flow：<flex-direction> || <flex-wrap>; flex-direction 盒 flex-wrap的简写
justify-content：flex-start | flex-end | center | space-between | space-around; 项目在主轴上的对齐方式
align-items：flex-start | flex-end | center | baseline | stretch; 项目在交叉轴上的对齐方式
align-content：flex-start | flex-end | center | space-between | space-around | stretch;定义了多根轴线的对齐方式

项目的属性

order：<integer>; 定义项目的排列顺序,数值越小越靠前
flex-grow：<number>; 定义项目放大比例，默认为0
flex-shrink：<number>;定义项目缩小比例，默认为1
flex-basis：<lenght>|auto;项目占据固定空间
flex：none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];三者缩写
align-self：auto | flex-start | flex-end | center | baseline | stretch;单个项目的对齐方式

7.选择器的种类

1.通用选择器 *

2.ID选择器 #

3.类选择器 .

4.元素选择器 div{}

5.后代选择器 ul li

6.伪类选择器：

7.紧邻同胞选择器 + 如div+p{} 同级别元素

8.子元素选择器 > 亲儿子

9.后续同胞选择器 ~ div~p div后面所有的p

8.选择器优先级

从高到低

!import
内联样式 (1,0,0,0)
ID选择器 (0,1,0,0)
类和伪类 (0,0,1,0)
元素选择器 (0,0,0,1)
通配符(0,0,0,0)

比较： 同一元素的同一属性设置了不同的值时就需要进行优先级比较
从左向右比较，大的优先级高，相同则右移一位。
如（1,1,0,1）比（1,0,1,1）优先级高。

注意： 不存在向前进制问题，如(0,0,1,0)不等于(0,0,0,10),而是大于

9. CSS单位

px：像素，绝对单位。是相对于显示器分辨率而言的单位

em：相对单位。设置font-size时相对于父元素，设置长宽相对于font-size

rem：相对于html的根元素字体的大小

vw：相对于视口的宽度，1vw相当于视口的百分之一宽

vh：相对于视口的高度，1vw相当于视口的百分之一高

10.CSS哪些属性可以继承

所有元素可继承：

visibility
cursor

内联元素可继承：

line-height
color
font font-family font-size font-style font-weight

块状元素可继承：

text-indent
text-align

列表元素可继承：

list-style

11.CSS新增的伪类

:first-of-type :选择属于其父元素的首个元素
:last-of-type 选择属于其父元素的最后元素
:nth-of-type(n) 选择属于其父元素的第n个元素
:first-child :选择属于其父元素的首个子元素
:last-child 选择属于其父元素的最后子元素
:nth-child(n) 选择属于其父元素的第n个子元素

区别：

nth-child：根据父元素的所有子元素进行查询
nth-of-type：根据父元素的所有子元素的一个确切类型进行查询

12.CSS3有哪些新增特性

新增选择器
滤镜filter，进行模糊处理，fliter:blur(5px)，值越大越模糊
calc函数
过渡
动画
2D、3D转换

13.动画有哪些属性

属性	描述
@keyframes	定义动画
animation	所有动画的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必填）
animation-duration	规定动画完成一个周期所花费的时间，默认是0 （必填）
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画播放的次数，默认是1，无限循环是infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal,逆向是alternate
animation-play-state	规定动画是否正在运行或暂停。默认是running，暂停时paused
animation-fill-mode	规定动画结束后的状态，默认时backwards，保持是forwards

画图象

1.三角形

<body>
    <div class="box">
    </div>
    <style>
        .box {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }
    </style>
</body>

通过border的方式添加，通过border-width模拟力度造成三角形

2.扇形

<body>
    <div class="box">
    </div>
    <style>
        .box {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent red transparent;
            border-radius: 50%;
        }
    </style>
</body>

在三角形的基础上加上圆角即可

3.三点🎲

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 5px solid black;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        .item {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: red;
        }

        .item:nth-child(2) {
            align-self: center;
        }

        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</body>

4.0.5px直线

<body>
    <div class="line"></div>
    <style>
        .line {
            width: 100px;
            height: 1px;
            transform: scale(0.5);
            background-color: red;
        }
    </style>
</body>

Continue丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS系列

前言在面试当中，其实也有许多公司喜欢考察CSS相关的知识，像盒子模型、垂直居中的方式、清除浮动的方式，以及要求实现一些小案例等。接下来主要说明经常会提问的以及在我面试中遇到的一些CSS问题。高频考点1. 盒子模型网页布局的核心本质：即利用CSS摆盒子所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。封装周围的HTML元素包括：边框、内边距、外边距、和实际内容。盒模型分为标准盒模型和 IE盒模型标准盒模型(默认) ：设置：box-sizing
复制链接

扫一扫