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

最新推荐文章于 2021-08-18 16:27:51 发布

夜深人静_

最新推荐文章于 2021-08-18 16:27:51 发布

阅读量432

点赞数 3

分类专栏：前端文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_46236141/article/details/104736445

版权

前端专栏收录该内容

16 篇文章 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 …
功能区别：
伪类只会对操作的元素起作用，相当于样式添加到了元素身上
而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。

- 透明度属性的选择

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

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

- 隐藏属性的选择

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

- CSS 自定义光标

cursor: url();

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

- 使元素在行内垂直居中

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

- 外边距的叠加与传递

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

给父元素加边框（不推荐）
给父元素加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 可以用来做什么

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

- 字体图标的优点

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

夜深人静_

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Html+CSS常用要点及易错点归纳（二）

本次主要总结了CSS中的零碎知识点，也是每个学习CSS的朋友们需要了解或者记住的：CSS 相关点：- 复合样式书写顺序：1. background属性：复合的值是通过空格隔开的，并且没有顺序要求。这里有个小技巧，CSS3中背景图片有个background-size属性，也是可以写进复合样式中的，举个例子：background: url() no-repeat center top / ...
复制链接

扫一扫