CSS进阶

（一）盒子模型

在 CSS 中，所有的元素都被一个个的“盒子”包围着，通过了解盒子模型我们能使用 CSS 实现准确布局、处理元素排列。

（1）块状盒子

定义成块级盒子会表现出以下行为：

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距, 外边距和边框会将其他元素从当前盒子周围推开
• 除非特殊指定，标题和段落默认情况下都是块级的盒子。

（2）内联盒子

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

用做链接的 a 元素、 span 、 em 以及 strong 都是默认处于内联状态的。

我们通过对盒子display 属性的设置，比如 block（块状） 或者 inline （内联），来控制盒子的外部显示类型。

（二）浮动

• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素之后的元素将围绕它。
• 浮动元素之前的元素将不会受到影响。
• 如果图像是右浮动，下面的文本流将环绕在它左边
  实例：

img
{
    float:right;
}

• 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

• 元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以使用clear 属性。
  注意：clear 属性指定元素两侧不能出现浮动元素。

{
    clear:both;

值有：left，right，both，none，inherit
position 属性指定了元素的定位类型。

（三）定位

position 属性的五个值：static，relative，fixed，absolute，sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。需要设定position属性，这些属性才能正常工作，工作方式取决于定位方法。

（1）static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

{
    position: static;
    border: 3px;
}

（2） fixed

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

{
    position:fixed;
    top:30px;
    right:5px;
}

（3）relative

相对定位元素的定位相对其正常位置。

left:
{
    position:relative;
    left:-20px;
}
right:
{
    position:relative;
    left:20px;
}

（4）absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

（5） sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
但是还没有明白这个值的用法，后续再补充

（四）伪类

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。
例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

button:hover {
  color: blue;
}

由实例我们可以看出，伪类由冒号：后跟着伪类名称组成。函数式伪类还包含一对括号来定义参数，如:dir( )。附上了伪类的元素被定义为锚元素。

（1）元素显示状态伪类

这些伪类可以基于元素的显示状态来选择它们。

:fullscreen

可以匹配当前处于全屏模式的元素。

（2）输入状态伪类

这些伪类与表单元素相关，可以基于 HTML 属性或交互前后字段的状态来选择元素。

（3） 语言的伪类

这些伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。
例如：

：dir() (en-US)

方向性伪类基于由文档语言所确定的其方向性来选择元素。

:lang() (en-US)

基于其内容语言来选择元素。

（4） 位置伪类

这些伪类与链接以及当前文档中的目标元素有关。

（5） 树结构的伪类

这些伪类与文档树中的元素位置有关。

:root {
  background: yellow;
}

表示文档的根元素。在 HTML 中这通常是 元素。

.box {
    background: pink;
    height: 80px;
    width: 80px;
}

.box:empty {
    background: lime;
}

表示除空白字符外没有子元素的元素。

（6）其他类型伪类

1、资源状态伪类

2、时间方面的伪类

3、用户行为伪类

4、函数式伪类

：is( )

匹配与提供的列表中的任何选择器匹配的任何元素。

:not( )

表示其参数中未表示的任何元素.

:where( )

优先级调整伪类匹配与提供的列表中的任何选择器匹配的任何元素，但不添加任何优先级权重。

:has( )

该关系伪类表示与任何一个与锚定的元素的相对选择器相匹配的元素。

selector:pseudo-class {
  property: value;
}

（五）伪元素

伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。
例 :first-line 伪元素可改变段落首行文字的样式。

//每一个 <p> 元素的第一行
p::first-line {
  color: red;
  text-transform: uppercase;
}