盒模型

  1. 盒模型的概念：css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。
  2. 盒模型分为两种：W3C标准盒模型 （box-sizing：content-box）+ IE盒模型（box-sizing：border-box）
  3. 盒模型的四个属性：内容（content）、填充（padding）、边框（border）、边界（margin）
  4. W3C标准盒模型计算方式：盒子宽（渲染区域的宽）= width + padding2 + border2
  5. IE盒模型：盒子宽（渲染区域宽）= width ————padding、border 向内延伸

    BFC

    在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

定义

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

触发条件:

  1. 根元素
  2. position: absolute/fixed
  3. display: inline-block / table
  4. float 元素
  5. ovevflow !== visible

两、三栏自适应布局

  1. /* 两栏布局 */
  2. .left {
  3.     width: 200px;
  4.     height: 200px;
  5.     background-color: red;
  6.     float: left;
  7.   }
  8.   .right {
  9.     height: 400px;
  10.     overflow: hidden;
  11.     background-color: green;
  12.   }
  13. <div id="layout">
  14.   <div class="left"></div>
  15.   <div class="right"></div>
  16. </div>
  1. /* 三栏布局--浮动float布局*/
  2. #layout2 .left {
  3.   width: 200px;
  4.   height: 200px;
  5.   background-color: rosybrown;
  6.   float: left;
  7. }
  8. #layout2 .center {
  9.   height: 400px;
  10.   margin: 0 200px;
  11.   background-color: burlywood;
  12. }
  13. #layout2 .right {
  14.   width: 200px;
  15.   height: 200px;
  16.   background-color: rosybrown;
  17.   float: right;
  18. }
  19. <div id="layout2">
  20.   <div class="left"></div>
  21.   <div class="right"></div>
  22.     <div class="center"></div>
  23. </div>
  1. </* 三栏布局 position布局 */>
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.   }
  6.   #layout3 .left {
  7.     position: absolute;
  8.     left: 0;
  9.     width: 200px;
  10.     height: 200px;
  11.     background-color: rosybrown;
  12.   }
  13.   #layout3 .center {
  14.     position: absolute;
  15.     left: 200px;
  16.     right: 200px;
  17.     height: 400px;
  18.     background-color: pink;
  19.   }
  20.   #layout3 .right {
  21.     position: absolute;
  22.     right: 0;
  23.     width: 200px;
  24.     height: 200px;
  25.     background-color: rosybrown;
  26.   }
  27. <div id="layout3">
  28.   <div class="left"></div>
  29.   <div class="center"></div>
  30.   <div class="right"></div>
  31. </div>
  1. </* 三栏布局 table布局 */>
  2. #layout4 {
  3.   width: 100%;
  4.   height: 300px;
  5.   display: table;
  6. }
  7. #layout4 .left,
  8. #layout4 .center,
  9. #layout4 .right {
  10.   display: table-cell;
  11. }
  12. #layout4 .left {
  13.   width: 300px;
  14.   background-color: cadetblue;
  15. }
  16. #layout4 .center {
  17.   background-color: chartreuse;
  18. }
  19. #layout4 .right {
  20.   width: 300px;
  21.   background-color: cadetblue;
  22. }
  23. <div id="layout4">
  24.   <div class="left"></div>
  25.   <div class="center"></div>
  26.   <div class="right"></div>
  27. </div>
  1. </* 三栏布局 弹性flex布局 */>
  2. #layout5 {
  3.   display: flex;
  4. }
  5. #layout5 .left {
  6.   width: 200px;
  7.   height: 300px;
  8.   background-color: burlywood;
  9. }
  10. #layout5 .center {
  11.   flex: 1;
  12.   height: 200px;
  13.   background-color: plum;
  14. }
  15. #layout5 .right {
  16.   width: 200px;
  17.   height: 300px;
  18.   background-color: burlywood;
  19. }
  20. <div id="layout5">
  21.   <div class="left"></div>
  22.   <div class="center"></div>
  23.   <div class="right"></div>
  24. </div>
  1. </* 三栏布局 网格gird布局 */>
  2. #layout6 {
  3.   width: 100%;
  4.   display: grid;
  5.   grid-template-rows: 100px;
  6.   grid-template-columns: 300px auto 300px;
  7. }
  8. #layout6 .left {
  9.   background-color: powderblue;
  10. }
  11. #layout6 .center {
  12.   background-color: greenyellow;
  13. }
  14. #layout6 .right {
  15.   background-color: powderblue;
  16. }
  17. <div id="layout6">
  18.   <div class="left"></div>
  19.   <div class="center"></div>
  20.   <div class="right"></div>
  21. </div>

清除浮动带来的影响（父元素高度塌陷）

清除浮动主要是为了解决父级元素因为子级元素浮动引起的内部高度为0的问题

  1. 给父元素设置高度
  2. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。（clear：both）
  3. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。（父元素生成BFC，内部的浮动元素也会参与高度计算，）

  4. 伪元素清除

    1. .bfc2::after {
    2.  content: "";
    3.  display: block;
    4.  height: 0;
    5.  clear: both;
    6.  visibility: hidden;
    7. }
    8. .bfc2{
    9.  *zoom: 1;
    10. }

  5. 使用before和after双伪元素清除

    1. .bfc2:before, .bfc2:after {
    2. content: '';
    3. display: table;
    4. }
    5. .bfc2::after {
    6. clear: both;
    7. }
    8. .bfc2 {
    9. *zoom: 1;
    10. }


    参考网站：
    https://juejin.cn/post/6844903496970420237
    https://juejin.cn/post/6844903776512393224
    https://www.jianshu.com/p/bf927bc1bed4

伪类有 :link :hover :active :visited :focus :first-child。 伪元素有 ::before ::after。

常见布局

水平居中

  1. 行内元素：text-align：center

    1. .text {
    2. text-align: center;
    3. }
    4. <div class="text">
    5.  <span>我是行内元素</span>
    6. </div>

  2. 块级元素：margin：0 auto

    1. .block1 {
    2. width: 100px;
    3. height: 20px;
    4. background-color: red;
    5. margin: 0 auto;
    6. }

  3. 块级和行内元素都适用：

    1. absolute + transform

      1. .block2 {
      2. width: 100px;
      3. height: 20px;
      4. background-color: green;
      5. position: absolute;
      6. left: 50%;
      7. transform: translateX(-50px);
      8. }

    2. flex + justify-content：center

      1. .block3 {
      2. display: flex;
      3. justify-content: center;
      4. }

      垂直居中

  4. 行内元素：line-height：height

    1. .text {
    2. height: 50px;
    3. line-height: 50px;
    4. }
    5. <div class="text">
    6.  <span>我是行内元素</span>
    7. </div>

  5. absolute + transform

    1. .block2 {
    2. width: 100px;
    3. height: 20px;
    4. background-color: green;
    5. position: absolute;
    6. top: 50%;
    7. transform: translateY(-10px);
    8. }

  6. flex + align-items: center

    1. .block3 {
    2. display: flex;
    3. align-items: center;
    4. height: 30px;
    5. background-color: greenyellow;
    6. }

  7. table：默认垂直居中

    1. .parent-frame {
    2. width: 500px;
    3. height: 400px;
    4. background: pink;
    5. }
    6. <table class="parent-frame">
    7. <tr>
    8.  <td>
    9.    table默认垂直居中[vertical-align: middle]
    10.  </td>
    11.  <td style="text-align:center;">
    12.    水平居中添加text-align:center
    13.  </td>
    14. </tr>
    15. </table>

    水平垂直居中

  8. absolute + transform

    1. .block2 {
    2. width: 100px;
    3. height: 20px;
    4. background-color: green;
    5. position: absolute;
    6. top: 50%;
    7. left: 50%;
    8. transform: translate(-50px,-10px);
    9. }

  9. flex + justify-content + align-items

    1. .block3 {
    2. display: flex;
    3. align-items: center;
    4. justify-content: center;
    5. height: 30px;
    6. background-color: greenyellow;
    7. }

    怪异模式

    六点区别

    选择器

    基本意义：根据一些特征，选中元素树上的一批元素。
    image.png

    优先级：

    !important > 行内样式 > id > class=伪类 > 标签（类型选择器）= 伪元素选择器 > * (全体选择器) > 继承 > 默认
    选择器从右往左解析

    简单选择器：

    1. 类型选择器（标签选择器）和 全体选择器

    2. class选择器 和 id选择器

    3. 属性选择器：~=, |=, ^=, $=, *= ,=,attr

    “value 是完整单词” 类型的比较符号: ~=, |=
    “拼接字符串” 类型的比较符号: *=, ^=, $=

    • attribute 属性中包含 value:　

      • [attribute~=value] 属性中包含独立的单词为 value，例如：

        1. [title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

      • [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

        1. [title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

    • attribute 属性以 value 开头:

      • [attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：

        1. [lang|=en]     -->  <p lang="en">  <p lang="en-us">

      • [attribute^=value] 属性的前几个字母是 value 就可以，例如：

        1. [lang^=en]    -->  <p lang="ennn">

    • attribute 属性以 value 结尾:

      • [attribute$=value] 属性的后几个字母是 value 就可以，例如：
        1. a[src$=".pdf"]

        4. 伪类选择器

  10. 树结构关系伪类选择器

    1. :root—伪类表示树的根元素，在选择器是针对完整的 HTML 文档情况，我们一般用 HTML 标签即可选中根元素。
    2. :empty—伪类表示没有子节点的元素（空白文本也算有子节点，例如
       
      ）
    3. :nth-child 、 :nth-last-child、:only-child（选中唯一一个子元素，例如
      我是子元素4
      ）
    4. of-type 系列，是一个变形的语法糖，S:nth-of-type(An+B) 是:nth-child(|An+B| of S) 的另一种写法。以此类推，还有 nth-last-of-type、first-of-type、last-of-type、only-of-type。
  11. 链接与行为伪类选择器
    1. :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。
    2. :link 表示未访问过的链接， :visited 表示已经访问过的链接。
    3. :hover 表示鼠标悬停在上的元素。
    4. :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。
    5. :focus 表示焦点落在这个元素之上。
    6. :target 用于选中浏览器 URL 的 hash 部分所指示的元素
  12. 逻辑伪类选择器
    1. :not—这个伪类是个函数型伪类，它的作用是选中内部的简单选择器未命中的元素。例如：:not(p)
  13. 其他伪类选择器

    5. 伪元素选择器

::before 和 ::after，有了这两个伪元素，一些修饰性元素，可以使用纯粹的 CSS 代码添加进去，这能够很好地保持 HTML 代码中的语义，既完成了显示效果，又不会让 DOM 中出现很多无语义的空元素。

  1. ::first-line——注意这里的第一行指的是排版后显示的第一行，跟 HTML 代码中的换行无关。
  2. ::first-letter
  3. ::before
  4. ::after

复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素

复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。

  1. “空格”：后代，表示选中所有符合条件的后代节点。
  2. “>” ：子代，表示选中符合条件的子节点，不包括孙子节点的元素。
  3. “~” : 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点。（选择后面一堆兄弟节点）
  4. “+”：直接后继，表示选中符合条件的直接后继节点，直接后继节点即 nextSlibling。（紧跟这个节点的兄弟节点）
  5. “||”：列选择器，表示选中对应列中符合条件的单元格。(双管道符，目前不支持实际项目中应用)

    选择器列表：由逗号分隔的复杂选择器，表示“或”的关系。