本篇文章主要是总结重要且常用的css属性，并且这些属性理解起来有很困难，下面就来学习一下吧。

text-align

text-align: 直接翻译过来设置文本的对齐方式。

MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐。

w3c中的解释

常用的值

• left：左对齐

• right：右对齐

• center：正中间显示

• justify：两端对齐。就是多行文本时，每次换行可能会在每行后面留下很多空白，这种方式会将空白平分到中间的文字间隔中。

但是这种方式不会影响最后一行。如果想要最后一行也要两端对齐，需要设置。

text-align-last: justify;

line-height

line-height用于设置文本的行高。行高可以先简单理解为一行文字所占据的高度。

行高的严格定义是：两行文字基线（baseline）之间的间距。

基线（baseline）：与小写字母x最底部对齐的线。

可以看出来，文字会垂直居中设置的行高。居中的原理就是：行高 - fontSize / 2就是文字上下预留的空白了。

vertical-align

vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置。

出现上面情况的原因

• line-boxes一定会想办法包裹住当前行中所有的内容。

• 行内级元素需要基线对齐(vertical-align: baseline)。

解决方法:

• 设置成top/middle/bottom。

• 将元素设置为block元素。

如果行内级元素中还有文字，那么它将文字将和其他行内级元素对齐。

其中一个设置vertical-align非baseline时，其他行内级元素依旧是极限对齐。

<style>
    .box {
      background-color: orange;
    }
    .box img {
      width: 200px;
      vertical-align: top;
    }
    .box .small {
      display: inline-block;
      width: 80px;
      height: 80px;
      background-color: #f00;
    }
  </style>
  <div class="box">
    普通的文本xxxx
    <img src="../images/kobe02.png" alt="">
    <span class="small"></span>
    xxxxxx
  </div>

但是如果只有两个行内级元素时，设置一个元素的对齐方式，那么他们就会排列成设置的对齐方式。

设置margin-bottom会使基线下移

<style>
    .box {
      background-color: orange;
    }
    .box img {
      width: 200px;
    }
    .box .small {
      display: inline-block;
      width: 100px;
      height: 200px;
      background-color: #f00;
      margin-bottom: 30px;
    }
  </style>
  <div class="box">
    我是普通的文本, xxxxxxxxxX
    <img src="../images/kobe01.jpg" alt="">
    <span class="small"></span>
  </div>

vertical-align的取值

• baseline(默认值)：基线对齐。

• top：把行内级盒子的顶部跟line boxes顶部对齐。

• middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐。所以行内级元素并不能垂直居中，会向下偏移一点点。

• bottom：把行内级盒子的底部跟line box底部对齐。

• <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一 样。

• <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样。

font

font字体样式缩写。

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写。

格式：font-style font-variant font-weight font-size/line-height font-family

规则:

• font-style、font-variant、font-weight可以随意调换顺序，也可以省略。

• /line-height可以省略，如果不省略，必须跟在font-size后面。

• font-size、font-family不可以调换顺序，不可以省略。

使用网络字体

因为font-family使用的都是操作系统中已经安装的字体，如果想使用网络字体，需要我们自己下载，并定义。

@font-face {
  font-family: 字体名称;
  src: url(); // 网络自己路径
}

字体兼容性处理

format用于帮助浏览器快速识别字体的格式。

选择器

• 直接后代选择器。选择器直接通过>连接。只能选择该元素的直接子元素。

• 相邻兄弟选择器。通过+连接。只能选择该元素下方相邻的元素。

• 普遍兄弟选择器。通过~连接。选择该元素下方的所有符合条件的兄弟元素。

<style>
    /* span+p {
      color: red;
    } */
    span~p {
      color: red;
    }
   </style>
    <p>p1</p>
    <span>span</span>
    <p>p2</p>
    <p>p3</p>

状态伪类

:active, :hover可以用于任何元素，:focus用于可以使用tab键选中聚焦时的元素（a, input, button等），但是:link, :visited只能用于a元素。

• link 表示选中访问之前的状态。

• visited 表示选中访问之后的状态。

• active 表示鼠标点击的状态。

• hover 表示鼠标移入时的状态。

动态伪类编写顺序，需要按照一定的顺序编写，不然可能不会生效。 :link, :visited, :focus, :hover, :active。

结构伪类(重要)

这个结构伪类对我个人而言，感觉很不好理解，但是用它来选择一些特定规律的元素又是非常好用的。

以全部类型的元素为依据

• :nth-child(1) 是父元素中的第1个子元素。

• :nth-child(2n): n代表任意正整数和0

• 是父元素中的第偶数个子元素（第2、4、6、8......个）

• 跟:nth-child(even)同义

• :nth-child(2n + 1): n代表任意正整数和0

• 是父元素中的第奇数个子元素（第1、3、5、7......个）

• 跟:nth-child(odd)同义

• nth-child(-n + 2) 代表前2个子元素

• :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数。

以相同类型的元素为依据

• :nth-of-type()用法跟:nth-child()类似。不同点是:nth-of-type()计数时只计算同种类型的元素。

• :nth-last-of-type()用法跟:nth-of-type()类似。不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数。

其他伪类

• :root: 选中html元素

• :empty: 选中的元素必须没有内容（空格/换行也不行）。

• :not(x):选中不是x选择器的元素。

伪元素

• div::first-line: 选中div中第一行的文本。

• div::first-letter: 选中div中第一个文本 / 字母。

• div::after: 在div后面加一些内容。

• div::before:在div前面加一些内容。

::after,::before中必须设置content属性。

css属性继承

如果一个属性具备继承性，那么在该元素上设置后，他的后代元素都可以继承这个属性。

这些不需要去记，大部分文本相关的属性都具有继承性。用到的时候查mdn文档就行，上面写的很清楚。

注意：继承的属性，他继承的是计算值，而不是设置值。因为在css构建渲染出页面的时候都会把css的单位统一下，统一好的值就是计算值。

强制继承，可以设置css属性为inherit。

div {
        border: 1px solid black;
    }
    p {
        // 让p元素继承div元素的border属性。
        border: inherit;
    }
    <div>
        <p>强制继承</p>
    </div>

选择器的权重

• !important：10000。

• 内联样式：1000。

• id选择器：100。

• 类选择器、属性选择器、伪类：10。

• 元素选择器、伪元素：1。

• 通配符：0。

eg：

HTML元素类型

html元素编写规则

• 一般情况下，块级元素可以放任何元素。

• p元素中不要放其他块级元素。

• 行内元素中不要放块级元素。

css类名建议

• _下划线： 一般连接两个单词，主要是用来定义统一的类名，在多处都可能使用到。

• -连接线: 纯粹用来连接两个单词。

max-width， min-width

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width。

这里设置的最小宽度，表示的是无论用户怎么缩小网页，最后可视区域和可滚动区域的宽度之和是1300，并不是表示用户只能将网页缩小到1300px后，不能再缩小网页了。他会出现滚动条。

max-width：最大宽度，无论内容多少，宽度都小于或等于max-width。

移动端适配时, 可以设置最大宽度和最小宽度。