前端开发必须了解的css知识

文本过长省略显示

单行

.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

多行

方法一：

.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
   word-break: break-all;
}

方法二：

.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
   max-height: 60px; /* 设置最大高度 */
}

清除浮动

清除浮动主要是为了解决，父元素因为子元素浮动引起的高度塌陷（内部高度为0）的问题

方法一：

给父元素设置属性overflow: hidden;

缺点：超出父元素的内容会被隐藏

方法二：

额外标签法，在浮动元素后面添加一个空的块级元素，并设置属性clear: both;

clear: left 清除前面的左浮动元素带给的影响

clear: right 清除前面的右浮动元素带给的影响

clear: both 同时清除前面的左右浮动元素带给的影响. 一般情况下选择这个值比较方便.

clear 属性的原理就是给这个标签，添加 margin-top 让该元素的上外边距与浮动元素高度最高的相等，此父盒子的高度就会被撑开

缺点：给页面增加无用的标签

方法三：

after伪元素

.father::after {
    content: "";
    /* 伪元素默认是行内块元素，要设置为块级元素才有效果 */
    display: block;
    clear:both;
}
/*IE6清除浮动的方式 只有IE6-IE7执行，其他浏览器不执行*/
.father{
    *zoom: 1;
}

方法四：

before和after双伪元素

.father::after,
.father::before {
    content: "";
    display: block;
    clear: both;
}
.father{
    *zoom: 1;
}

方法五：

给父元素添加高度

BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)

BFC元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响外面的元素

触发BFC：

根元素
浮动元素，float (left、right)
绝对定位元素，position (absolute、fixed)
display (inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid)
overflow (hidden、auto、scroll)，除了visible以外的值

BFC的特性

1. 同一个BFC下外边距会发生重叠

<style>
    div{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
</style>

<body>
    <div></div>
    <div></div>
</body>

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中

<style>
    .container {
        overflow: hidden;
    }
    p {
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
</style>

<body>
    <div class="container">
        <p></p>
    </div>
    <div class="container">
        <p></p>
    </div>
</body>

2. BFC可以清除浮动，计算BFC的高度时，浮动子元素也参与计算

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

浮动的元素会脱离普通文档流，所以容器只剩下 10px 的边框高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素

.par {
    overflow: hidden;
}

3. 自适应多栏布局，解决文字环绕效果，因为默认每个元素的左外边距与包含块的左边界相接触

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main">文字文字文字文字文字文字</div>
</body>

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性

.main {
    overflow: hidden;
}

元素显示模式

行内元素

<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<select>、<option>等

特点：

一行可以显示多个
高、宽直接设置是无效的
默认宽度就是本身内容的宽度
行内元素只能容纳文本和其它行内元素

注意：

链接里面不能再放链接
特殊情况<a>链接里面可以放块级元素，但是给转换一下块级模式最安全

块级元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<table>、<br>、<form>等

特点：

独占一行
高度、宽度、外边距、内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器/盒子，里面可以放行内或者块级元素

注意：

文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内块元素

特点：

和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙（行内元素特点）
默认宽度就是它本身内容宽度（行内元素特点）
高度、行高、外边距、内边距都可以控制（块级元素特点）

white-space

white-space: pre-wrap;

连续的空白符会被保留。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行

white-space: nowrap;

连续的空白符会被合并，并且阻止源码中的文本换行

white-space: normal;

连续的空白符会被合并，源码中的换行符会被当作空白符来处理，并根据填充行框盒子的需要来换行

filter和backdrop-filter

filter：应用于元素本身及其内容，可以用来模糊、对比度、色调等滤镜效果

backdrop-filter：应用于元素的背景及其背后的任何内容，可以用来实现背景模糊、饱和度、对比度等效果，而不影响元素本身及其内容

区别：filter影响元素内容，backdrop-filter影响元素背景及其后的内容

重绘和重排（回流）

重绘：样式的调整，如背景色改变

重排：DOM的变动

添加或删除可见的DOM元素
元素位置改变
元素尺寸改变
内容改变
浏览器窗口尺寸改变

产生重排一定会造成重绘，但是重绘不一定造成重排

优化：

避免逐项更改样式，最好一次性更改style属性，或者将样式列表定义为class，并一次性更改class属性
避免循环操作DOM，比如table的行，可以js循环生成多个DOM后，一次性插入
也可以在display: none的元素上进行操作，最终把它显示出来，因为display: none上的DOM操作不会引发重绘和重排
具有复杂动画的元素进行绝对定位，因为绝对定位使它脱离文档流，否则会引起父元素及后续元素的大量重排
浏览器窗口尺寸改变时可以使用防抖

水平垂直居中

方法一：

假设子元素宽高都不固定

.parent {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    height: 100vh;           /* 父容器高度 */
}

方法二：

假设子元素宽高都不固定

.container{
    position: relative;
}
.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

伪类和伪元素

伪类本质上用于弥补常规css选择器的不足，如果没有伪类，就需要多写一个类名

伪元素本质上是创建了一个有内容的虚拟元素，相当于多了一个元素节点

.class:last-child {}
.class:first-child {}
 
a:link { color:green; }
a:visited { color:green; }
a:hover { color:red; }
a:active { color:yellow; }

选择器权重和优先级

权重

选择器	权重
行内样式	1000
id选择器	100
属性选择器、class、伪类	10
元素选择器、伪元素	1
通配符	0

优先级

!important > 行内 > id > 类、伪类、属性 > 标签、伪元素 > 继承、通配符

解决盒子塌陷

父元素设置上边距
父元素设置上padding
overflow: hidden
子元素脱标

盒子模型

盒子的组成：内容width+padding+border+margin

标准盒子：box-sizing: content-box;
盒子总宽度：wdith+padding+border+margin
边框盒子：box-sizing: border-box;
盒子总宽度：width+padding

css3新特性

边框：border-radius box-shadow border-image
背景：background-image background-size
文本：text-shadow
变形：transform
过渡：transition
动画：animation: name duration iteration-count direction

初始化css样式

为什么要初始化css样式

跨浏览器一致性：不同浏览器对默认样式的处理不同，初始化样式可以消除这些差异，确保在各种浏览器中呈现一致的外观
减少意外样式：某些HTML元素在默认情况下可能具有意外的边距、填充或其他样式，初始化可以设置为统一的初始状态

link和@import

语法
link在HTML中使用，通常放在`<head>`标签内
import在CSS文件中使用，用于导入其他CSS文件
加载顺序
link浏览器会并行加载多个`<link>`，提高页面加载速度
import会顺序加载，可能导致页面加载变慢，尤其是在多个`@import`时
兼容性
link更广泛支持，适用于所有浏览器
import在某些老旧浏览器中可能存在兼容性问题
使用场景
link推荐用于引入主样式文件
import适合在CSS文件内部组织样式，但不推荐用于主要样式引入

src和href

src会将其指向的资源下载并应用到文档中，常用的有script、img、iframe

href用于在当前文档和引用资源之间确立联系

visibility、opacity、display

visibility: hidden 隐藏元素，位置还存在于页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘
opacity: 0 将元素设置为透明，位置还存在于页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘
display: none 隐藏元素，其位置不会被保留，所以会触发浏览器渲染引擎的重绘和回流