layout: post # 使用的布局（不需要改） title: My First Post # 标题 subtitle: Hello World, Hello Blog #副标题 date: 2021-03-08 # 时间 author: JXH # 作者 header-img: img/post-bg-2015.jpg #这篇文章标题背景图片 catalog: true # 是否归档 tags: #标签 - css —

CSS简要知识点

语法和语义

• CSS 语法
• @ 规则
• 层叠
• 注释
• 解释器
• 继承
• 简写属性
• 优先级
• 值定义语法
• CSS 单位与取值类型

值

• 实际值
• 计算值
• 初始值
• 解析值
• 指定值
• 使用值

布局

• 块级格式化上下文
• 盒式模型
• 包含块
• 布局模式
• 外边距合并
• 替换元素
• 层叠上下文
• 视觉格式化模型

样式规则语法

@规格语法

选择器

基本选择器

• 通配选择器 *, ns

  *, *

  *,

  *

• 元素选择器 elementname(元素名称)
• 类选择器 .classname(类名)
• ID 选择器 #idname(ID 名)
• 属性选择器 [属性=值]

分组选择器

• 选择器列表 A, B

组合选择器

• 相邻兄弟选择器 A + B
• 普通兄弟选择器 A ~ B
• 子选择器 A > B
• 后代选择器 A B

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字：

:pseudo-class-name

选择器 描述

:active 在用户激活（例如点击）元素的时候匹配。
:any-link 匹配一个链接的:link和:visited状态。
:blank 匹配空输入值的元素。
:checked 匹配处于选中状态的单选或者复选框。
:current 匹配正在展示的元素，或者其上级元素。
:default 匹配一组相似的元素中默认的一个或者更多的UI元素。
:dir 基于其方向性（HTMLdir属性或者CSSdirection属性的值）匹配一个元素。
:disabled 匹配处于关闭状态的用户界面元素
:empty 匹配除了可能存在的空格外，没有子元素的元素。
:enabled 匹配处于开启状态的用户界面元素。
:first 匹配分页媒体的第一页。
:first-child 匹配兄弟元素中的第一个元素。
:first-of-type 匹配兄弟元素中第一个某种类型的元素。
:focus 当一个元素有焦点的时候匹配。
:focus-visible 当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within 匹配有焦点的元素，以及子代元素有焦点的元素。
:future 匹配当前元素之后的元素。
:hover 当用户悬浮到一个元素之上的时候匹配。
:indeterminate 匹配未定态值的UI元素，通常为复选框。
:in-range 用一个区间匹配元素，当值处于区间之内时匹配。
:invalid 匹配诸如的位于不可用状态的元素。
:lang 基于语言（HTMLlang属性的值）匹配元素。
:last-child 匹配兄弟元素中最末的那个元素。
:last-of-type 匹配兄弟元素中最后一个某种类型的元素。
:left 在分页媒体中，匹配左手边的页。
:link 匹配未曾访问的链接。
:local-link 匹配指向和当前文档同一网站页面的链接。
:is() 匹配传入的选择器列表中的任何选择器。
:not 匹配作为值传入自身的选择器未匹配的物件。
:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
:nth-of-type 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
:nth-last-child 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从>后往前数的所有奇数个）。
:only-child 匹配没有兄弟元素的元素。
:only-of-type 匹配兄弟元素中某类型仅有的元素。
:optional 匹配不是必填的form元素。
:out-of-range 按区间匹配元素，当值不在区间内的的时候匹配。
:past 匹配当前元素之前的元素。
:placeholder-shown 匹配显示占位文字的input元素。
:playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only 匹配用户不可更改的元素。
:read-write 匹配用户可更改的元素。
:required 匹配必填的form元素。
:right 在分页媒体中，匹配右手边的页。
:root 匹配文档的根元素。
:scope 匹配任何为参考点元素的的元素。
:valid 匹配诸如元素的处于可用状态的元素。
:target 匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。
:visited 匹配已访问链接。

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。
伪元素开头为双冒号::

::pseudo-element-name

::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::selection 匹配文档中被选择的那部分。
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

盒模型-块级盒子（Block box） 和 内联盒子（Inline box）

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:
一个被定义成块级的（block）盒子会表现出以下行为:

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性可以发挥作用 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

如果一个盒子对外显示为 inline，那么他的行为如下:

盒子不会产生换行。 width 和 height 属性将不起作用。 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

CSS中组成一个块级盒子需要:

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height. Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。 Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。 Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

设置width 和height 属性会生效。 padding, margin, 以及border 会推开其他元素。

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除 

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

注意： content:”” 尽量不带点

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

• Previous
  css3
• Next
  常见网页布局