CSS相关

知无涯者
144 阅读8分钟

1 选择器分类

  • 元素选择器 a{}
  • 伪元素选择器 ::before{}
  • 类元素选择器 .link{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{}
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox] + label{}
  • 否定选择器 :not(.link){}
  • 通用选择器 *{}

2 选择器权重（1）

  • ID选择器 #id{}+100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其它选择器 +0
#id .link.active
————————————————
计算过程：
#id +100
.link +10
.active +10
结果:120

不进位的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">蓝色</div>
    <div class="test2">蓝色</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">红色</div>
</body>
</html>

image.png

image.png

3 选择器权重（2）

  • !important 优先级最高
  • 元素属性 优先级高
  • 相同权重 后写的生效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        .test1{
            color: red;
        }
        .test1{
            color: blue;
        }
        .test2{
            color: red!important;
        }
        .test2{
            color: blue;
        }
        #test3{
            color: red;
        }
    </style>
</head>
<body class="body" id="body">
    <div class="test1">蓝色</div>
    <div class="test2">红色</div>
    <div id="test3" style="color: blue;">蓝色</div>
</body>
</html>

image.png

4 非布局样式

4.1 字体

字体族 例如: serif、monospace（不能添加引号）衬线字体

  • 多字体fallback 例如： “monaco”、”Microsoft Yahei”、”PingFang SC”
  • 网络字体、自定义字体
  • iconfont

4.2 行高（经典问题）

  • 行高的构成（由line-box组成，line-box由inline-box组成）
  • 行高相关的现象和方案（可以通过设置 line-height来实现垂直居中效果）
  • 行高的调整

image.png

原理是因为图片按照 inline 进行排版，排版的时候会涉及到字体对齐，默认按照 baseline 对齐，baseline和底线之间是有偏差的，偏差大小是根据字体大小而定，如果是12px字体大小，则图片空隙就是3px左右。这就是经典图片3px空隙问题。

解决方式：

  • 由于默认按照baseline对齐，不妨将 vertical-align 设为 bottom，按照底线对齐。
  • 设置 display:block 可以解决该问题，但是会独占一行，如下图所示：

image.png

4.3 背景

背景颜色 渐变色背景 多背景叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变色背景（线性梯度）</title>
    <style>
        .div1{
            height: 90px;
        }
        .div2{
            height: 90px;
            /*background: linear-gradient(to right,red,green);*/
            /*background: linear-gradient(180deg,red,green);*/
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%);*/
            
            /*网格线*/
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

background: linear-gradient(to right, red, green);

image.png

background: linear-gradient(180deg, red, green);

image.png

background: linear-gradient(135deg, red 0, green 15%, yellow 50%, blue 90%);

image.png

background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%), linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;

image.png

背景图片和属性（雪碧图）

background-repeat: no-repeat;
background-size: 30px 30px; //相对于容器偏移
background-position: 30px 30px;

雪碧图 就是将很多个图片进行拼接成一个图片，然后通过 background-position等属性进行偏移，在网页中得到对应图片，来达到减少http请求

base64和性能优化

  • 将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 1/3 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标icon，例如loading文件等。最后，在开发环境一般不采用直接将图片进行 base64 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。
  • 一般情况下，是在生产环境下，通过打包的方式，将小图片进行 base64编码。

4.4 边框（经典问题）

边框的属性：线型 大小 颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            /*border: 5px solid red;*/
            /*border: 5px dotted red;*/
            /*border: 5px dashed red;*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

边框背景图

经典问题：九宫格问题，例如下面图片，我们如果想要实现9个不同形式，然后中间放内容，如果用原本9个div方法，那么会非常麻烦，而css3提供了 border方式可以解决上述问题。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

image.png

边框衔接（三角形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c3{
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>

image.png

4.5 滚动

产生滚动的原因：当内容比容器多的时候，即容器装不下内容的时候，就需要滚动。滚动主要包括如下几个方面：

image.png

overflow 设置auto 和 scroll 区别，auto 是内容多于容器时显示滚动条，反正，不显示。而 scroll 是一直显示滚动条

4.6 文字折行（经典问题）

  • overflow-wrap（word-wrap）通用换行控制（是否保留单词）
  • word-break 针对多字节文字（中文句字也是单词）
  • white-space 空白处是否断行

经典问题：怎么让一个很长的文本不换行？

将上述属性设置为 nowrap即可

white-space: nowrap;

4.7 装饰性属性

  • 字重（粗体）font-weight
  • 斜体 font-style:itatic
  • 下划线 text-decoration
  • 指针 cursor

5 CSS 面试真题

5.1 css样式（选择器）的优先级

  • 计算权重确定
  • !important
  • 内联样式
  • 后写的优先级高

5.2 雪碧图的作用

  • 雪碧图 就是将很多个图片进行拼接成一个图片，然后通过 background-position等属性进行偏移，在网页中得到对应图片，来达到减少http请求，提高页面加载性能。
  • 有一些情况下可以减少图片大小（例如png格式图片，每张图片颜色基本上一样的，有可能总的图片大小是小于每个图片加起来的大小的）

5.3 自定义字体的使用场景

宣传 / 品牌 / banner 等固定文案 字体图标（将文字变为图标）

5.4 base64的作用

将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 1/3 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标icon，例如loading文件等。最后，在开发环境一般不采用直接将图片进行 base64 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。

  • 用于减少http请求
  • 适用于小图片
  • base64的体积约为原图的 4/3

5.5 伪类和伪元素的区别？

  • 伪类 表 状态（某元素是个链接 link状态）
  • 伪元素是真的有元素（::before{}，在页面中会显示内容）
  • 前者使用单冒号，后者使用双冒号

5.6 如何美化checkbox

  • label [for] 和 id
  • 隐藏原生 input（所有的样式由 label 来搞定）
  • :checked + label

6 CSS布局

CSS体系知识的重中之重

  • 早期以 table 为主（简单）
  • 后来以技巧性布局为主（难）
  • 现在有 flexbox / grid（偏简单）

6.1 常用布局方式

  • table表格布局
  • float 浮动+ margin
  • inline-block 布局
  • flexbox 布局

6.2 布局方式（表格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table布局</title>
    <style>
        .table{
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
        .left{
            background: red;
            vertical-align: middle;
        }
        .right{
            background: blue;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">left</div>
            <div class="right table-cell">right</div>
        </div>
    </div>
</body>
</html>

image.png

6.3 display / position（经典问题）

  • display 常用属性值： block（块级） / inline（内联） / inline-block（对内表现为block，可以有宽高，对外表现为inline，可以与其它元素排在同一行）
  • position 常用属性值：static（静态） / relative（相对） / absolute（绝对） / fixed（固定）

经典问题： 绝对定位 absolute，会优先查找父级定位为 absolute 或 relative的进行定位，如果父级没有，找上级，那么最终就会根据 body进行定位，它和 fixed一样，也是脱离了文档流。

fixed相对于屏幕进行定位

  • 层叠问题 ，因为默认会根据先后顺序显示，因此会有覆盖情况，此时，可以通过设计 z-index 解决，权重越大，优先显示。

6.4 flexbox（圣杯布局）

  • 弹性盒子
  • 盒子本来就是并列的
  • 指定宽度即可
  • 移动端常用 （目前用的不是很热的原因是虽然简单方便，但是兼容性有点问题）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局-flexbox</title>
    <style>
        *{
            margin: 0;
        }
        .container{
            min-height: 200px;
            display: flex;
        }
        .left{
            width: 200px;
            display: flex;
            background: red;
        }
        .center{
            background: yellow;
            flex: 1;
        }
        .right{
            width: 200px;
            display: flex;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

6.5 float

  • 元素”浮动”
  • 脱离文档流（不会对其它元素的布局造成影响）
  • 但不脱离文本流

6.6 float 特性的影响（经典问题）

float 特性对自己的影响：

  • 形成块（BFC，可以使得inline元素能够设置宽高，例如上文代码，原本span元素不能设置宽高的，但通过设置float布局，使得可以设置宽高）
  • 位置尽量靠上
  • 位置尽量靠左（右）（对于上述解释，是如果 container宽度够的话，就尽量靠上和靠左，如果不行的话，就往下排了）

image.png

  • float 特性对兄弟的影响：
  • 上面贴非 float 元素
  • 旁边贴 float 元素
  • 不影响其它块级元素位置（不脱离文档流）
  • 影响其它块级元素内部文本（脱离了文本流）

float 特性对父级的影响：

  • 从布局上 “消失”（父级不会管它的宽高）
  • 经典问题：高度塌陷 （假设float元素，原本是 100px 高度，这个时候很期望父级能撑开100个像素，但因为设置了 float，等于消失了，并不会在意这 100个像素，因此，如果没有其它元素支撑高度的话，父级的高度就会设置为0，这就是高度塌陷）

6.7 清楚浮动的方式

7 效果属性（CSS最出彩的一部分）

7.1 box-shadow

image.png

属性值介绍：前两个是偏移量，第三个是模糊区域度，第四个是拓展区域度，第五个是颜色（最后一个是透明度）

box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);

7.2 text-shadow

立体感 印刷品质感

7.3 border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

image.png

8 CSS 动画

动画的原理 视觉暂留作用：就是说看到的画面，会在脑海中保留一段片段 画面逐渐变化

8.1 动画的作用

  • 愉悦感
  • 引起注意
  • 反馈（输入密码错误时，登录框晃动）
  • 掩饰

8.2 CSS中动画的类型

  • transition 补间动画（从一个状态到另一个状态，状态切换之间是有动画的）
  • keyframe 关键帧动画（指定的每一个状态就是一个关键帧）
  • 逐帧动画（跳动）

8.3 transition 补间动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition补间动画</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            transition: width 1s, background 2s;
        }
        .container:hover{
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

image.png

8.4 关键帧动画

  • 相当于多个补间动画
  • 与元素状态的变化无关
  • 定义更加灵活
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframe关键帧动画</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s;
            animation-direction: reverse;
            animation-iteration-count: infinite;
            /*animation-fill-mode: forwards;*/
            /*animation-play-state: paused;*/
        }
        @keyframes run {
            0%{
                width: 100px;
            }
            100%{
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

8.5 逐帧动画

  • 属于关键帧动画特殊的一种
  • 适用于无法补间计算的动画
  • 资源较大
  • 使用 steps() （设置关键帧之间有几个画面，一般设置为1,也可以说是将关键帧去掉补间）

image.png

avatar
文章
阅读
粉丝