CSS常见的知识点|持续更新

1.浮动

什么是浮动？

float属性用于创建浮动框，将该元素脱离文档流并移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘

属性	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动的特性

（1）浮动元素会脱离标准流，不会影响块级元素的布局，但是会影响内联元素布局

（2）浮动元素会在一行内显示，并且元素顶部对齐。如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

（3）浮动的元素具有行内块元素的特性

为什么需要浮动？

有很多布局效果，标准流是没有办法完成的，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式，例如：

（1）可以让多个块级盒子（div）水平排列成一行。虽然行内块元素也可以实现一行显示，但是这些元素之间会有大的空白缝隙

（2）可以实现两个盒子的左右对齐

此外，浮动最早是用来控制图片的，实现文字环绕图片的效果

浮动引起的问题

（1）如果父元素没有设置高度且子元素浮动时，父元素高度无法撑开，出现了“高度塌陷”

（2）与元素同级的非浮动元素会占据该元素原来的页面位置，出现遮盖现象

（3）如果一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

为什么需要清除浮动？清除浮动的方法有哪些？

原因：如果父元素没有设置高度且子元素浮动时，父元素高度无法撑开，出现了“高度塌陷”

（1）给父元素设置固定的高度

        缺点：维护性差，适合固定高度布局

（2）为父元素设置【overflow:hidden】

        缺点：如果子元素的尺寸大于父元素，或者子元素中的内容过多，那么多出来的这一部分不会溢出，也不会显示出来，会直接被hidden起来

（3）最后一个浮动元素之后添加一个空的div标签，并添加【clear:both】样式

        缺点：添加了毫无意义的标签，可能会造成冗余

（4）用伪元素【::after】的方式给父元素后面添加一个元素并设置清除属性【clear:both】

        缺点：几乎可以忽略不计

利用clear属性清除浮动的原理是什么

clear : none | left | right | both 

官方对clear属性的解释：“元素盒子的边不能和前面的浮动元素相邻”。对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

注意其中“前面的”3个字，也就是说clear属性对后面的浮动元素是不闻不问的。

考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。

2.BFC-块级格式化上下文

什么是BFC？

BFC：Block Formatting Context，名为“块级格式化上下文”

W3C官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，BFC提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

通俗来说：BFC就是为元素提供一个独立的容器，在该容器里按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素。（我们可以把BFC看作是元素的一种属性，拥有了这种属性的元素会使它的子元素与世隔绝，不会影响到外部其他元素）

如何触发BFC？

（1）float 不为 none

（2）overflow 不为 visible

（3）position 为 absolute 或 fixed

（4）display 为i nline-block 或 table 或 flow-root

BFC解决了哪些问题？

（1）解决【外边距塌陷】问题（垂直塌陷）

        具体做法：假设两个盒子都有100px的外边距，但实际上两个盒子垂直方向的间距只有100px，按理说应该是200px，这就是margin垂直塌陷问题。解决方法就是给这两个盒子都加上一个父元素，并且将这个父元素设置为BFC区域，这时就可以解决margin塌陷的问题了

（2）解决【父元素塌陷】问题

        具体做法：只需要将父元素变为BFC区域，就可以解决

（3）清除浮动-【overflow:hidden】

        具体做法：父元素通过overflow:hidden将父元素变为了BFC区域，BFC区域内的子元素任何变动都不会影响到外部元素，因此可以清除浮动带来的影响

（4）阻止标准流元素被浮动元素覆盖

        具体做法：让被覆盖住的标准流元素触发BFC，就可以做到不受浮动元素的影响

3.常见的图片格式及使用场景

格式	特点及使用场景
BMP	无损、既支持索引色也支持直接色的点阵图 几乎不对数据进行压缩
JPEG	有损、支持直接色的点阵图（有更加丰富的色彩，适合存储照片） 采用压缩算法进行编码
GIF	无损、仅支持8bit索引色的点阵图（色彩效果不好） 采用LZW压缩算法进行编码，文件小 支持动画以及透明度（但不支持透明度的调节）
PNG-8	无损、支持索引色的点阵图 支持透明度的调节 （是非常好的GIF格式替代者，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8）
PNG-24	无损、支持直接色的点阵图 采用压缩算法进行编码 （PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多）
SVG	无损、矢量图 放大时，不会失真，因此适合用来绘制Logo、Icon
WebP	同时支持有损和无损压缩、支持直接色的点阵图 专为Web而生，但是兼容性不太好 1. 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%； 2. 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%； 3. WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

4.伪类和伪元素的区别

引入伪类和伪元素的原因

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述。例如CSS中没有“段落的第一行”、“文章首字母”之类的选择器，而在一些场景中这些又是必须的，因此引入了【伪类和伪元素】

引用标准中的话:CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

什么是伪类、伪元素？

1. 伪类

概念：为了处于某种状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的

它可以用于（这里列举部分内容）：

• 设置鼠标悬停在元素上的样式
• 为已访问和未访问的链接设置不同的样式
• 设置元素获得焦点时的样式

2. 伪元素

概念：创建一些不在文档树中的元素，并为其添加样式。（就是选取某些元素前面或后面这种普通选择器无法完成的工作，虽然用户可以看到这些内容，但是这些内容并不存在于文档树中）

它可以用于（这里列举部分内容）：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

具体介绍一下伪类

伪类分为两种：【状态伪类】和【结构性伪类】

1. 状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类：

•     :link应用于未被访问过的链接
•     :hover 应用于鼠标悬停到的元素
•     :active 应用于被激活的元素
•     :visited 应用于被访问过的链接，与:link互斥
•     :focus 应用于拥有键盘输入焦点的元素

其中需要注意：上述几个伪类同时出现在一个元素上时，定义顺序不能乱，要符合标准

a:hover必须在a:link和a:visited之后，才能生效

a:active必须在a:hover之后才能生效

2. 结构性伪类

利用dom树进行元素过滤，通过文档结构的相互关系来匹配元素，能够减少class和id属性的定义，使文档结构更加简洁。

常见的结构性伪类：

•   :first-child 选择某个元素的第一个子元素；  
•   :last-child 选择某个元素的最后一个子元素；
•   :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；
•   :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；
•   :nth-of-type() 规定属于其父元素的第n个 指定元素；
•   :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定元素；
•   :first-of-type 选择一个上级元素下的第一个同类子元素；
•   :last-of-type 选择一个上级元素的最后一个同类子元素；
•   :only-child 选择它的父元素的唯一一个子元素；
•   :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
•  :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
•  :empty 选择的元素里面没有任何内容。
•   :disabled匹配禁用的表单元素。
•   :enabled匹配没有设置disabled属性的表单元素。
•   :valid匹配条件验证正确的表单元素。
•   :in-range选择具有指定范围内的值的 <input> 元素。
•   :optional选择不带 "required" 属性的 <input> 元素。
•   :focus选择获得焦点的 <input> 元素。

具体介绍一下伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容
::before	p::before	在每个 <p> 元素之前插入内容
::first-letter	p::first-letter	选择每个 <p> 元素的首字母
::first-line	p::first-line	选择每个 <p> 元素的首行
::selection	p::selection	选择用户选择的元素部分

注意：

 CSS3 规范中要求：为了区分伪类和伪元素，

                                 伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

对于 CSS2 中已经有的伪元素，例如 :before和::before 单冒号和双冒号的写法，作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。