Html+CSS常用要点及易错点归纳（二）

一时失言乱红尘 2023-07-12 11:58 4阅读 0赞

本次主要总结了CSS中的零碎知识点，也是每个学习CSS的朋友们需要了解或者记住的：

# CSS 相关点： #

### \- 复合样式书写顺序： ###

**1. background属性：** 复合的值是通过空格隔开的，并且没有顺序要求。  
这里有个小技巧，CSS3中背景图片有个background-size属性，也是可以写进复合样式中的，举个例子：

background: url() no-repeat center top / 100px 100px;

其中各元素分别是背景图地址、是否平铺、定位、背景图大小，可以看到，如果想把background-size加入复合写法中，只需要在background-position属性后面加个 / 后面写background-size属性就可以了。  
**除此之外，CSS3还提供了两个属性background-origin和background-clip，由于这两个属性的属性值是一样的，所以如果两属性同时写在了符合样式中，第一个表示background-origin，第二个表示background-clip。**

**2. font属性：** 复合写法是有顺序，最少要写两个值 ( size family )，size必须要写在family前面。

font: weight style size family
    font: style weight size family
    font: style weight size/line-height family

这三种写法都是**正确的**，要注意每个font简写属性里必须要有size、family两个属性，行高同时也是能写进去的，在size属性后面加个/紧接着写行高。

### \- CSS 优先级 ###

**1. 相同样式优先级**  
当给元素设置相同样式时，后写的优先级较高，但**不建议**出现重复设置样式的情况。

**2. 内部样式与外部样式**  
内部样式与外部样式优先级**相同**，如果都设置了相同样式，那么后写的引入方式优先级高。

**3. 单一样式优先级**  
style行间 > id > class > tag > \* > 继承  
权重 1000 0100 0010 0001 …  
注：继承的优先级是最低的  
!important 权重 -> 10000 ( 建议不要乱用 , 非规范写法 ) 应用场景：紧急情况下才去用。

**4. 标签 + 类 和 单类优先级对比**  
标签 + 类 > 单类

**5. 群组和单一样式**  
群组选择器与单一选择器的优先级**相同**，后写的优先级高。

**6. 如何比较层次选择器的优先级**  
**权重：** 把对应的数值加起来  
**约分：** 把相同（权重值相同）的选择器约掉  
注：约分的方法只是一种技巧，不是一种规范  
**建议：** 书写层次选择器最好不要超过三层

### \- CSS 实现超大图居中 ###

*  方法一  
    用背景图做，给容器的背景图做定位：

background-position: center 0;

*  方法二  
    用img标签引入图片，利用定位属性：

position: relative;
    left: 50%；
    /* 这里X表示图片宽度的一半，X前边的是负号 */
    margin-left: -X;

其实这里margin-left 用transform: translateX(-50%);效果是一样的，但是margin-left的兼容性更好一些，生活中如何用还是要根据实际情况。  
**提示：  
          经常在网页中变化的图，一般用图片img。  
          而在网页中用于修饰长久不变的图，一般用背景background-image。**

### \- 给一个元素添加多个背景图 ###

background:url(第一个背景图) ,  url(第二个背景图) , url(第三个背景图);

**注：多张背景图的时候，先写的优先级高。**

### \- 如何让子元素在父元素中上下左右居中 ###

*  **方法一**  
    定位+margin拉取（子元素固定大小），像这样：

/* 加在子元素上 */
    position: relative;
    left: 50%；
    top: 50%;
    /* 这里的margin值仍然是负的 */
    margin-left: -子元素宽度的一半；
    margin-top: -子元素高度的一半；

当然，也可以用绝对定位，此时要给父元素加相对定位属性，保证子元素相对父元素定位，这两种定位一个占据文档空间，一个脱离文档流，具体用哪种按需所取。

*  **方法二**  
    margin: auto + position的上下左右0，像这样：

/* 加在子元素上 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

注意，别忘了给父元素加相对定位哦

*  **方法三**  
    定位 + 位移50%，像这样：

/* 加在子元素上 */
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

当然，也可以用绝对定位，还是别忘了给父元素加相对定位属性，保证子元素相对父元素定位，还是具体用哪种按需所取。

*  **方法四**  
    flex弹性+margin: auto，像这样

/* 加在父元素上 */
    display: flex;
    
    /* 加在子元素上 */
    margin: auto；

*  **方法五**  
    flex弹性+justify-content和align-items居中，像这样：

/* 加在父元素上 */
    display: flex;
    justify-content: center;
    align-items: center;

### \- 伪类与伪元素的区别 ###

\#elem:after\{\}  
\#elem:hover\{\}

在 CSS2.1的时候 : #elem:after{} √
    在 CSS3的时候 : #elem:after{} ×  #elem::after{} √
                    #elem:hover{} √  #elem::hover{} ×

*  **写法区别：**  
    伪类： 单冒号 \-> :hover :active :visited :link …  
    伪元素： 双冒号 \-> ::after ::before …
 *  **功能区别：**  
    伪类只会对操作的元素起作用，相当于样式添加到了元素身上  
    而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。

### \- 透明度属性的选择 ###

1.  opcity: 0.0~1.0;  
    使用opcity属性会使元素和元素的所有子元素透明度同时发生改变。
2.  background-image: rgba(x,y,z,0.0~1.0)  
    使用rbga属性只改变背景透明度，不改变元素子元素透明度。

具体选择根据实际情况按需所取

### \- 隐藏属性的选择 ###

1.  display: none;  
    将元素及其子元素完全隐藏，并且不占据文档空间
2.  visibility: hidden;  
    隐藏元素，但仍然占据文档空间

### \- CSS 自定义光标 ###

cursor: url();

此属性可自定义鼠标样式，但是要求图片是 .cur .ico这样的。

### \- 使元素在行内垂直居中 ###

vertical-align 该属性可设置行内元素的垂直对齐方式。常用值有baseline（基线）、bottom、middle、top…  
**注意：vertical-align只对行内元素生效。**

### \- 外边距的叠加与传递 ###

1.  两个块元素上下排列的时候，它们的外边距会发生叠加，最终外边距会以两者中较大的为准，此时可以只给其中一个块元素规定需要的外边距。
2.  两个嵌套的块元素，当给子元素设置外边距的时候，发现外边距反映在了父元素身上，导致父元素高度塌陷，此时的解决办法：
    
    > 给父元素加边框（不推荐）  
    > 给父元素加overflow: hidden;（BFC规范，推荐）

### \- 浮动元素特性 ###

只会影响后面的元素。
    内容默认提升半层，脱离文档流。
    默认宽根据内容决定。
    沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
    换行排列，当容器放不下这些浮动元素的时候，就会换行排列  ( 尽量让浮动的元素高度是统一 )
    主要给块元素添加，但也可以给内联元素添加。

### \- 如何清除浮动 ###

**1. 解决上下排列的情况：**

利用clear属性清除float浮动
    clear : left | right | both(比较常用的，左右浮动都清除)

**2. 解决嵌套的情况：**

固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。
    父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
    overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
    display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
    设置空标签 : 不推荐 , 会多添加一个标签。
    after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。.例：clear:after{ content:""; display: block; clear:both; }

**注：clear:both; 这个属性 只能加给块标签。after伪类添加的内容，默认是内联元素。  
注：块元素是存在margin-top传递问题的，但是浮动的块，是不存在margin-top传递问题的。**

### \- 定位（position）属性的特点 ###

**static：（默认）**

**relative : 相对定位**

如果没有定位偏移量，对元素本身没有任何影响
    不使元素脱离文档流，空间是会被保留。
    不影响其他元素布局
    left、top、right、bottom是相对于当前元素自身进行偏移的

**absolute : 绝对定位**

使元素完全脱离文档流
    使内联元素支持宽高 （让内联具备块特性）
    使块元素默认宽根据内容决定（让块具备内联的特性）
    如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
    注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。

**fixed : 固定定位**

使元素完全脱离文档流
    使内联元素支持宽高 （让内联具备块特性）
    使块元素默认宽根据内容决定（让块具备内联的特性）
    相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
        不会受到祖先元素的影响。

**sticky : 黏性定位**

在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。

**定位偏移量 :**

left top right bottom , 不能单独使用，必须得配合定位模式。

### \- CSS z-index的使用 ###

z-index属性: 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。  
**注释：元素可拥有负的 z-index 属性值。**  
**注释：Z-index 仅能在定位元素上奏效（例如position:absolute;）！比较的时候，会先跟同级别的先比较。**

### \- 具有BFC特性的元素 ###

1. 浮动元素（元素的 float 不是 none）
    2. 绝对定位元素（元素的 position 为 absolute 或 fixed）
    3. 行内块元素（元素的 display 为 inline-block）
    4. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
    5. overflow 值不为 visible 的块元素
    6. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

列举的可能不全，但是这些是我们比较常见的需要记忆的。

### \- BFC 可以用来做什么 ###

1.  解决margin重叠的问题（例：overflow: hidden;）
2.  浮动带来的布局问题（例：overflow: hidden;）
3.  清除浮动（例：overflow: hidden;）
4.  解决覆盖问题（例：display: flex;）

### \- 字体图标的优点 ###

1. 可以非常方便的改变大小和颜色
    2. 放大后不会失真
    3. 减少请求次数和提高加载速度
    4. 简化网页布局
    5. 减少设计师和前端工程师的工作量
    6. 可使用计算机没有提供的字体。