css的这些内容你可能知道，但是又不完全知道(一)

本篇文章主要是总结重要且常用的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。

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

边框样式值

border-style

margin

margin传递问题

margin-left, margin-right不会传递。

建议：

• margin一般是用来设置兄弟元素之间的间距。
• padding一般是用来设置父子元素之间的间距。

margin-top传递

原因：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。

margin-bottom传递

原因：如果块级元素的底部线和父元素的底部线重叠 ，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。

这种只是指元素本身重叠，设置border就可以解决。所以设置border后就不算重叠了。

margin折叠问题

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠） 。

水平方向上的margin（margin-left、margin-right）永远不会collapse。

合并后取最大的margin值作为最终的margin值。

• 两个兄弟块级元素之间上下margin的折叠。
• 父子块级元素之间margin的折叠。

为什么margin: 0 auto可以使设置宽度的块级元素居中

块级元素，即使设置了宽度，他也会独占一行。所以右边就空出来了。

但是margin-left, margin-right默认值又是0，那么为啥元素右侧会出现大片空白呢？

因为浏览器将剩余空间分配给了margin-right。

那么如果设置margin: 0 auto; 它将设置空白区域自动均分给margin-left, margin-right。

那将margin垂直方向设置成auto，能垂直居中吗？

不能，因为块级元素height默认是auto, 由内容撑开，所以并不是独占整个父元素高度，由此浏览器就不会将剩余空间分配给margin-top,margin-bottom，让其在垂直方向上居中。

outline

outline表示元素的外轮廓

• 不占用（盒子模型 -> border + padding + content）空间
• 默认显示在border的外面
• outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似。

使用： 去除a元素、input元素的focus轮廓效果。

box-shadow，text-shadow

box-shadow属性可以设置一个或者多个阴影。多个阴影之间用逗号,隔开，从前到后叠加。

格式顺序：

• offset-x, 水平方向的偏移，正数往右偏移
• offset-y, 垂直方向的偏移，正数往下偏移
• blur-radius, 模糊半径
• spread-radius, 延伸半径。这里的延伸是围绕着整个盒子和文字的。
• 阴影的颜色，如果没有设置，就跟随color属性的颜色
• inset：外框阴影变成内框阴影

text-shadow同box-shadow,但是他没有soread-radius值。

提供一个调节阴影的一个网站

通过border设置图形

下面推荐一个网站

行内非替换元素的注意事项

什么是行内非替换元素呢？

就是我们常说的inline（内联）元素。

• width、height、margin-top、margin-bottom这些属性对于行内非替换元素不生效。
• 设置padding-top, padding-bottom时，他是不占据空间的,但是会将元素撑大。但是对于padding-left, padding-right是占据空间的。

  <style>
    span {
      padding: 30px;
      background: skyblue;
    }
  </style>

    <body>
      <span>span元素</span>
      <i>i元素</i>
      <div>div元素</div>
    </body>

• 设置border也不占据空间。

  <style>
    span {
      /* padding: 30px; */
      background: skyblue;
      border: 100px solid red;
    }
  </style>

    <body>
      <span>span元素</span>
      <i>i元素</i>
      <div>div元素</div>
    </body>

background-image

background-image用于设置元素的背景图片 会盖在(不是覆盖)background-color的上面

• 如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面。
• 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。

background-size

background-size用于设置背景图片的大小

• auto：默认值, 以背景图本身大小显示
• cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
• contain：缩放背景图，**宽度或者高度铺满元素，但是图片保持宽高比 **
• 百分比，相对于背景区（background positioning area）
• length：具体的大小，比如100px。

background-position

如果只设置了1个方向，另一个方向默认是center。

这个可以实现背景图片重要部分居中显示，但是前提是图片的重要部分必须事先在图片中间。

background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

可以设置以下3个值

• scroll（默认值）：此关键属性值表示背景相对于元素（具有滚动机制的元素）本身固定， 而不是随着它的内容滚动。
• local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。
• fixed：此关键属性值表示背景相对于视口（浏览器窗口）固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

background

背景相关的css简写属性。必须设置一个相关值。设置的相关属性的顺序是随意的。

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面。

background-image和img对比

img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片。

background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息。

table

表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了。我们都可以通过css样式来设置。

表格线

给td, th设置border即可。

合并单元格间隙和合并border

给table设置border-collapse：collapse。

单元格合并

• 跨列合并: 使用colspan。在最左边的单元格(元素)写上colspan属性, 并且省略掉合并的td。
• 跨行合并: 使用rowspan。在最上面的单元格(元素)写上rowspan属性, 并且省略掉后面tr中的td。

  <style>
    table {
      border-collapse: collapse;
    }

    td {
      border: 1px solid black;
    }
  </style>
  <table>
    <tr>
      <td colspan="2">第一</td>
      <td>第一</td>
    </tr>
    <tr>
      <td>第二</td>
      <td>第二</td>
      <td>第二</td>
    </tr>
  </table>

textarea

多行文本输入框是否可以缩放

• 禁止缩放：resize: none;
• 水平缩放：resize: horizontal;
• 垂直缩放：resize: vertical;
• 水平垂直缩放：resize: both;

表单元素的默认选中属性

对于checkbox, radio， 通过设置checked属性。

对于select，option，通过设置selected。

css spirit

一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分。

CSS Sprite的好处

• 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
• 减小图片总大小
• 解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite图片制作（雪碧图、精灵图）

那么怎么使用它呢？

• 设置对应元素的宽度和高度
• 设置精灵图作为背景图片
• 调整背景图片的位置来展示

这个网站可以快速获取精灵图的位置

标准流

在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数

比较明显的缺点是

• 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
• 不便于实现元素层叠的效果

所以需要通过position来解决。

定位position

static

元素默认的定位方式就是static,但是不可以使用定位偏移属性left, top, right, bottom。

relative

也是处于标准流中，但是可以使用定位偏移属性，而且偏移的时候不会影响其他元素。从而可以产生元素的覆盖。定位参照对象是元素自己原来的位置。

sticky

粘性定位，他是固定定位和相对定位的结合体。

它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点。当达到这个阈值点时, 就会变成固定(绝对)定位。

阈值表示设置的sticky元素偏移量和参考元素之间的距离。

其他定位元素，请参考这篇文章

绝对定位（absolute, fixed）元素的特点(重点)

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束。不再严格按照从上到下、从左到右排布。不再严格区分块级、行内级，块级、行内级的很多特性都会消失
• 不再给父元素汇报宽高数据
• 脱标元素内部默认还是按照标准流布局
• 对于绝对定位元素来说
  • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
  • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

上面这些公式，配合宽度，高度（这里的元素默认宽度也行，比如img标签引入图片的宽度, 而不是说必须设置width， height属性）和margin: auto可以做到水平垂直居中。

  <style>
    div {
      position: relative;
      width:300px;
      margin: 0 auto;
      border: 1px solid black;
      height: 600px;
    }

    img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
  </style>
 <div class="box">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="">
 </div>

• 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin:0。

为啥设置了上面的哪些属性就会使定位元素和参照元素一样的宽高呢? 因为height, width都是auto了，参照上面的公式，浏览器就会将元素设置成和参照元素一样宽高。

浮动元素的特点

元素一旦浮动后, 脱离标准流

朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。并且定位元素会层叠在浮动元素上面。

多个元素都浮动，不会相互重叠，而是依次排列

浮动元素不像定位（absolute, fixed）元素,脱离标准流后不会重叠在一起，但是定位元素在没有设置偏移量之前是重叠在一起的。

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、inline-block元素、块级元素的文字内容。

浮动元素不会影响前面相邻的块级元素，但是会影响相邻的行内级元素

绝对定位元素默认是不会覆盖和影响前面的元素的。 不管前面的元素是啥类型的。

  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* position: absolute; */
      /* top: 0; */
      float: left;
    }
  </style>
<body>
  <!-- <span>ppppppppppppppppppppppppppppppppppppppp</span> -->
  <!-- <input type="text"> -->
  <p>ppppppppppppppppppppppppppppppppppppppp</p>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</body>

解决行内级元素中间间距问题

产生原因：编写代码时，换行书写标签所致。

方式一

设置父元素font-size: 0; 行内级元素在设置font-size。

方式二

在编写代码时不换行

方式三

通过浮动。

方式四

通过flex。

为啥要解决这个问题？目的是让布局更加准确。

一些大型网站的水平布局

考拉

主要是解决边框重叠问题，通过margin负值解决后，整体的宽度就会少了几像素（因为边框重叠了， 2px合并成1px了），所以，我们就必须增加子元素的宽度。但是需要设置子元素的box-sizing: border-box。

  <style>
    .content {
      width: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }

    .box {
      /* margin-left: 1px; */
    }

    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      /* 这个是让元素边框不重叠，以至于box整体减少了4px， 所以我们需要将宽度设置为221px,  */
      margin-right: -1px;

      box-sizing: border-box;
    }

    .item.first {
      width: 220px;
    }
  </style>
  
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

京东

主要就是解决margin设置后，宽度不够问题，通过设置margin负值来增大父元素的整体宽度来达到子元素浮动后不换行。需要额外包裹一个元素。

刚好多出的空间盛放最后一个元素的margin-right,让其不换行。

 <style>
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 这里就是用到了 父w = 子w + margin-left + margin-right这个公式了。 让box这个盒子变大*/
      margin-right: -10px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;

      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }
  </style>
  <div class="content">
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </div>

clear属性

这里我只想介绍一下clear的意思。

clear 属性可以指定一个元素是否必须移动(清除浮动后)到浮动元素下面; 主要是让一个标准流中的元素放在浮动元素下面，从而不让浮动元素影响后面的元素了。

clear的常用取值

• left：要求元素的顶部低于之前生成的所有左浮动元素的底部
• right：要求元素的顶部低于之前生成的所有右浮动元素的底部
• both：要求元素的顶部低于之前生成的所有浮动元素的底部
• none：默认值，无特殊要求

    .clear_fix::after {
      content: "";
      clear: both;
      display: block;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }
    
    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }

flex

设置flex布局后，flex-item 不再严格区分块级元素和行内级元素。但是flex盒子依旧还是区分，因为有两种属性可以使盒子变成flex盒子。（flex, inline-flex）。

flex-direction

flex-direction 决定了 main axis 的方向，有 4 个取值。row（默认值）、row-reverse、column、column-reverse。

justify-content

justify-content 决定了 flex items（整体） 在 main axis 上的对齐方式。

align-item

align-items 决定了 flex items（每行，在当前换行的区域） 在 cross axis 上的对齐方式。

• baseline。基线对齐。
• normal：在弹性布局中，效果和stretch一样。
• stretch：当 flex items 在 cross axis 方向的 size（width, height） 为 auto 时，会自动拉伸至填充 flex container。

align-content

align-content 决定了多行 flex items（整体） 在 cross axis 上的对齐方式，用法与 justify-content 类似。

在交叉轴方向上有多余空间的时候使用，来决定空间如何分配。

如果主轴和交叉轴方向都未设置size(width， height)，并且justify-content, align-content都设置stretch，那么他只会拉伸元素的主轴方向的size。

flex-grow

flex items 扩展后的最终 size 不能超过 max-width\max-height。

flex-shrink

flex items 收缩后的最终 size 不能小于 min-width\min-height。

flex-basis

大部分和主轴设置的size一样，但是对于特别长的英文单词来说，为了使单词可以放下，他会自动增大flex-basis的值，让其可以显示，但是设置width / height, 文字将有一部分被截取。

决定 flex items 最终 base size 的因素，从优先级高到低

•  max-width\max-height\min-width\min-height
• flex-basis
• width\height
• 内容本身的 size

flex

flex-grow flex-shrink flex-basis简写属性。

flex: none => 0 0 auto

flex: auto => 1 1 auto

一些值的具体使用，请看这里

解决justify-content设置space-between后，最后一行元素不够出现布局错乱问题

通过添加多个具有宽度的元素来占位，但是不需要设置高度。

  <style>
    .container {
      width: 500px;
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      width: 110px;
      height: 140px;
    }

    .container > i {
      width: 110px;
    }
  </style>
  
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item3">3</div>
    <!-- 添加span的个数是列数减-2 -->
   <i></i><i></i>
  </div>