CSS重点知识回顾

HTML部分

如何理解HTML语义化？

    <div>标题</div>
    <div>
        <div>段落文字</div>
        <div>
            <div>列表1</div>
            <div>列表2</div>
        </div>
    </div>

    <h1>标题</h1>
    <div>
        <p>段落文字</p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
    </div>

让人更容易读懂（增加代码可读性）

让搜索引擎更容易读懂（SEO)

默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

display: block/table; 有 div h1 h2 table ul ol p 等

display: inline/inline-block; 有span img input button 等

---

CSS部分

基础部分

伪类选择器

像是类，但不是类 可以理解为是元素的某种状态，某种描述

动态伪类

link 没有被访问过

visited 访问过的

hover 鼠标悬停的状态

active 被激活的状态

link visited只有a元素才有

hover active所有元素都有的

<style>
  a:link {
    color: orange;
  }
  a:visited {
    color: skyblue;
  }
  a:hover {
    color: tomato;
  }
  a:active{
    color:brown;
  }
</style>
<a href="#">点我跳转</a>

结构伪类：选中特定结构位置的元素。 比如父元素的第几个孩子，适用于列表、表格、布局等场景的样式控制。

伪元素选择器

element 像是元素，但不是元素。

理解为是某些元素的某些位置进行处理。

下面是例子：为书名添加书名号（复制的时候只会复制文字）处理段落首个字母和第一行元素

<span>论语</span>
<p>Lamodw xmowm sxmowm xmwom xmwom xmowqm cxmpe[m kc-po-e-nmcujin xcwiu Lamodw xmowm sxmowm xmwom xmwom xmowqm cxmpe[m kc-po-e-nmcujin xcwiu Lamodw xmowm sxmowm xmwom xmwom xmowqm cxmpe[m kc-po-e-nmcujin xcwiuLamodw xmowm sxmowm xmwom xmwom xmowqm cxmpe[m kc-po-e-nmcujin xcwiuLamodw xmowm sxmowm xmwom xmwom xmowqm cxmpe[m kc-po-e-nmcujin xcwiu
</p>
<style>
    span::before {
        content: "《";
    }
    span::after {
        content: "》";
    }
    p::first-letter {
        color: red;
        font-weight: bold;
    }
    p::first-line {
        color: blue;
        font-size: 20px;
    }
</style>

使用伪元素可以解决子元素全部浮动后，父元素高度塌陷的问题

<style>
    .father {
        width: 600px;
        background-color: skyblue;
    }
    .father::after {
        content: "";
        display: block;
        clear: both;
    }
    .child1 {
        width: 200px;
        height: 100px;
        background-color: tomato;
    }
    .child2 {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
    .float-left {
        float: left;
    }
</style>

<div class="father">
    <div class="child1 float-left"></div>
    <div class="child2 float-left"></div>
</div>

盒子居中布局

1.水平居中

行内元素

在其父元素 样式里添加 text-align: center

块级元素

在自己 的样式里添加 margin：0 auto

2.垂直居中

Flex布局

.parent {
  display: flex;
  justify-content: center; /* 水平居中，让弹性项目在盒子的主轴方向（默认水平方向）居中 */
  align-items: center;     /* 垂直居中，在交叉轴方向居中 */
  height: 300px;
}
.child {
  width: 100px; height: 100px; background: coral;
}

<div class="parent">
  <div class="child">居中</div>
</div>

Grid布局

.parent {
  display: grid;
  place-items: center;
  height: 300px;
}

绝对定位 + 负 margin（兼容性好，适合固定尺寸盒子）

.parent {
  position: relative;
  height: 300px;
}
.child {
  width: 100px; height: 100px;
  position: absolute;
  top: 50%; left: 50%;
  margin-left: -50px; /* 盒子宽度一半 */
  margin-top: -50px;  /* 盒子高度一半 */
}

绝对定位 + transform（适合任意尺寸盒子）

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

单行文本垂直居中可使用 line-height=height

弹性盒模型

功能

1. 控制元素分布方式（横着 竖着）
2. 控制元素对齐方式（居左，居右，居中，分散）
3. 控制元素视觉顺序（元素出生顺序，后出生显示在前面）

容器：开启弹性盒模型，display:flex

项目（弹性盒的直接子元素）

注：弹性盒中的项目会自动变成块，即块状化。

弹性盒主轴规则

flex-direction: row 主轴方向默认是row 水平方向，从左到右排成一行。

flex-direction: column 换成垂直方向，从上到下排成一列。

可以使用 row-reverse 和 column-reverse 值反向排列 flex 项，从右到左，从下到上。

主轴方向的对齐方式

justify-content

• stretch（默认值）：子元素会被拉伸以填满容器的交叉轴。只对没有设置具体高度/宽度的子元素生效。
• center 主轴居中对齐 flex-start以主轴开始位置对齐 flex-end 以主轴结束位置对齐
• space-around 空白区域环绕在弹性项目左右，类似于给了主轴方向item margin的效果

• space-between左右的弹性项目贴着父容器，中间的空白区域平均分配

• space-evenly 均分空白区域

主轴方向元素的换行

• flex-wrap：nowrap (默认不换行) warp（换行）

弹性盒交叉轴规则

1. 交叉轴的方向不能主动调整(随着主轴而确定)垂直(从上到下)水平(从左到右)
2. 交叉轴的方向上正常来说没有所谓的换行属性

交叉轴方向的对齐方式

align-item（只能处理单行（或单列））

• stretch（默认值）：子元素会被拉伸以填满容器的交叉轴。只对没有设置具体高度/宽度的子元素生效。
• flex-start：子元素在交叉轴的起点对齐。
• flex-end：子元素在交叉轴的终点对齐。
• center：子元素在交叉轴上居中对齐。
• baseline：子元素的文本基线对齐。

align-self 调整某一个项目自身的对齐方式

align-content调整交叉轴方向上，多行（或多列）之间的对齐方式

<style>
    .outer {
        background-color: beige;
        width: 400px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        /* flex-direction: column; */
        /* 主轴 */
        justify-content: flex-start;
        flex-wrap: wrap;
        /* 交叉轴 */
        align-items: flex-end;  /* 对每个单行（或列）都有效果 */
        align-content: flex-start;  /* 对所有行（或列）之间 */
    }
    .inner {
        background-color: tomato;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        box-sizing: border-box; /* 盒子的宽度和高度包括了border和padding */
    }
    .inner2 {
        height: 150px;
    }
    .inner4 {
        height: 110px;
    }
</style>

<div class="outer">
    <div class="inner">1</div>
    <div class="inner inner2">2</div>
    <div class="inner">3</div>
    <div class="inner inner4">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner inner2">7</div>
    <div class="inner">8</div> 
</div>

---

布局

盒模型的宽度如何计算？

<!-- 如下div1的offsetWidth的值是多少？ -->
<style>
  #div1 {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
  }
</style>
<div id="div1"></div>

offsetWidth=(内容宽度+内边距+边框)，无外边距

offsetWidth = 100px + 10px * 2 + 1px * 2 = 122px

如何让offsetWidth=100

#div1 {
  width: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box; /*添加这行代码*/
}

margin纵向重叠的问题

<!-- 如下代码，AAA和BBB之间的距离是多少？ -->
<style>
    p {
        font-size: 61px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

• 相邻元素的margin-top和margin-bottom会发生重叠
• 空白内容的<p></p>也会重叠

margin负值的问题

对margin的top left right bottom 设置负值，有何效果？

margin-top和margin-left负值，元素向上、向左移动

margin-right 负值，右侧元素左移，自身不受影响

margin-bottom 负值，下方元素上移，自身不受影响

BFC的理解和应用

使用场景

常规流，块盒

1.水平方向上，撑满整个包含块宽度，垂直方向上，依次摆放

2.垂直方向上相邻的元素，margin会合并

3.父子关系的情况下，可能会产生margin塌陷

4.父子关系的情况下，父元素无视浮动元素会产生高度坍塌

5.兄弟关系的情况下，正常元素可能会被浮动元素覆盖(正常元素在浮动元素之后)

什么是BFC？如何应用？

• Block format context，区块格式化上下文
• 开启BFC的区域，是一块独立的渲染区域
• 隔绝了内部与外部的联系，内部渲染不会影响到外部
• 不同的BFC区域，渲染时也互不干扰

开启BFC能解决什么问题 ?

1. 开启BFC，其子元素不会再产生margin塌陷问题(不会和他的子元素产生margin合并)
2. 开启BFC，就算子元素浮动，自身高度也不会坍塌(高度计算不再无视浮动元素)
3. 开启BFC，自己不会被其他浮动元素所覆盖(不会与浮动元素重叠，会避开浮动元素排布

如何开启（设置）BFC

0.根元素(HTML)

1.设置float属性

2.设置position属性(属性值需要是absolute或fixed)

3.设置overflow属性(属性值不为visible即可)

4.行内块元素(inline-block)

5.设置display为flow-root的元素

6.伸缩项目(flex盒子内的item)

7.多列容器(设置column-count)

8.表格元素(table thead tbody tfoot tr th td caption)

9.column-span为all的元素(表格第一行横跨所有列)

    <style>
        /* body {
            display: flex; 此时outer为伸缩项目（flex盒子内的item）
        } */
        .outer {
            width: 400px;
            background-color: rgb(110, 116, 113);
            /* float: left; */
            /* overflow: hidden; */
            /* position: fixed; */
            /* position: absolute; */
            /* display: inline-block; */
            /* columns: 1; */ /* 多列容器 */
            display: table; /* 表格元素 */
        }
        .inner {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .box1 {
            background-color: aquamarine;
        }
        .box2 {
            background-color: coral;
        }
        .box3 {
            background-color: lightblue;
        }
    </style>
<body>
    <div class="outer">
        <div class="inner box1" ></div>
        <div class="inner box2" ></div>
        <div class="inner box3" ></div>
    </div>
</body>

多栏布局

两栏布局

利用伪元素解决子元素浮动后，父元素坍塌； 开启BFC消除浮动元素覆盖的影响。

<style>
    .container {
        width: 70%;
        background-color: azure;
        margin: 0 auto;
        border: 1px solid black;
        min-width: 800px;
    }
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .left {
        width: 300px; /* 左侧固定宽度 */
        background-color: orange;
    }
    .main {
        background-color: tomato;
        overflow: hidden; /* Clear float 开启BFC */
    }
    .float-left {
        float: left;
    }
</style>

<div class="container">
    <div class="left float-left">巴蜀，历来有天府之国的美誉，其中，最有名的门派莫过于唐门。唐门所在是一个神秘的地方，许多人只知道，那是一个半山腰，而唐门所在这座山的山顶有一个令人胆颤心惊的名字，------鬼见愁。从鬼见愁悬崖上扔出一块石头，要足足数上十九下才会听到石落山底的回声，可见其高，也正是因为这十九秒，尚超过十八层地狱一筹，故而得名。一名身穿灰衣的青年正站在鬼见愁顶峰，凛冽的山风不能令他的身体有丝毫移动，从他胸口处那斗大的唐字就可以认出，他来自唐门，灰衣代表的，是唐门外门弟子。他今年二十九岁，因出生不久就进入唐门，在外门弟子的辈分中排名第三，因此外门弟子称他一声三少。当然，到了内门弟子口中，就变成了唐三唐门从建立时开始就分为内外两门，外门都是外姓或被授予唐姓的弟子，而内门，则是唐门直系所属，家族传承。</div>
    <div class="main">唐门内门长老堂包括掌门唐大先生在内，一共有十七位长老，此时登山的，也正是十七位。就算是武林大会也不可能惊动唐门全部长老同时出动，要知道，这唐门长老之中，年纪最大的已经超过了两个甲子。这些唐门长老的修为，无一不是已臻化境，只是转眼的工夫，他们就已经来到了山顶。外门弟子见到内门长老，只有跪倒迎接的份，但此时，唐三却没有动，他只是静静的看着这些脸色凝重的长老来到自己面前，挡住了所有的去路，而在他背后，是鬼见愁。放下三朵佛怒唐莲，唐三投下最后那恋恋不舍的一眼，嘴角处流露出一丝欣慰的微笑，他毕竟成功了，努力了二十年，他终于完成了这唐家外门暗器的巅峰之作，那种满足的成就，是无法用言语来形容的。此时此刻，唐三觉得对自己来说，一切都已经不重要了，违背门规也好，生死存亡也罢，似乎都随着眼前这三朵盛开的唐莲而告一段落，佛怒唐莲，这世间最霸道的暗器诞生在自己手中，还有什么比令这浸淫在暗器上一生的唐三更加兴奋的呢？"我知道，偷入内门，偷学本门绝学罪不可恕，门规所不容。但唐三可以对天发誓，绝未将偷学到的任何一点本门绝学泄露与外界。我说这些，并不是希望得到长老们的宽容，只是想告诉长老们，唐三从未忘本。以前没有，以后也没有。"唐三此时的情绪很冷静，或许，这是他一生之中最冷静的时候。看着山腰处唐门那大片古香古色的院落，感受着这属于唐门的空气，唐三的眼睛湿润了。自从他懂事那天起，可以说，就是为了唐门而生，而此时，也该为了自己一生中的追求再为唐门而去了。长老们都没有说话，他们此时还没能从佛怒唐莲的出现中清醒过来。两百年，整整两百年了，佛怒唐莲竟然在一个外门弟子手中出现，这意味着什么？这霸绝天下，连唐门自己人也不可能抵挡的绝世暗器代表的绝对是唐门另一个巅峰的来临。看着长老们低头不语，唐三粲然一笑，"唐三的一切都是唐门给的，不论是生命还是所拥有的能力，都是唐门所赋予，不论什么时候，唐三生是唐门的人，死是唐门的鬼，我知道，长老们是不会允许我一个触犯门规的外门弟子尸体留在唐门的，既然如此，就让我骨化于这巴蜀自然之中吧。"唐三那平静甚至有些兴奋的声音终于将长老们惊醒，当长老们抬起头看向他的时候，只见一层乳白色的气流瞬间从他身上蔓延开来。"玄天宝录，你竟然连玄天宝录中本门最高内功也学了？"唐大先生失声说道。轰的一声炸鸣，当众位长老同时后退以防不测的时候，他们看到的却是全身赤裸的唐三。唐三笑了，他的笑容很灿烂，"赤裸而来，赤裸而去，佛怒唐莲算是唐三最后留给本门的礼物。现在，除了我这个人以外，我再没有带走唐门任何东西，秘籍都在我房间门内第一块砖下。唐三现在就将一切都还给唐门。""哈哈哈哈哈哈哈......"唐三仰天狂笑，猛的向后迈开脚步，此时此刻，众位唐门长老突然发现，竟然没有一个人来得及阻止他，他那在白光笼罩中的身体，闪电般扑向前方的鬼见愁，高大昂扬的身躯腾空而起，朝那山间的云雾迈去。"等一下。"唐大先生终于反应了过来，但是，此时他再说什么都已经晚了。云雾很浓，带着阵阵湿气，带走了阳光，也带走了那将一生贡献给了唐门和暗器的唐三。时间似乎已停滞，唐大先生双手颤抖的捧起面前那三朵唐莲，他的眼睛湿润了，"唐三啊唐三，你这是何苦呢？你带给我们的惊讶实在太多太多......""大哥。"二长老上前一步，"何必为这叛徒神伤？"唐大先生的目光瞬间变冷，全身寒气大盛，瞪视着二长老，"你说谁是叛徒？你见过一个叛徒在得到本门最高秘籍之后会不逃？你见过一个叛徒会以死明志？你见过一个怀有足以毁灭唐门任何高手的绝世暗</div>
</div>

三栏布局

<style>
    .container {
        width: 70%;
        background-color: azure;
        margin: 0 auto;
        border: 1px solid black;
        min-width: 800px;
        div {
          padding: 10px;
        }
    }
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .left {
        width: 250px; /* 左侧固定宽度 */
        background-color: orange;
        margin-right: 8px;
    }
    .right {
        width: 250px; /* 右侧固定宽度 */
        background-color: orange;
        margin-left: 8px;
    }
    .main {
        background-color: tomato;
        overflow: hidden; /* Clear float 开启BFC */
    }
    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
</style>

<div class="container">
    <div class="left float-left">巴蜀，历来有天府之国的美誉，其中，最有名的门派莫过于唐门。唐门所在是一个神秘的地方，许多人只知道，那是一个半山腰，而唐门所在这座山的山顶有一个令人胆颤心惊的名字，------鬼见愁。从鬼见愁悬崖上扔出一块石头，要足足数上十九下才会听到石落山底的回声，可见其高，也正是因为这十九秒，尚超过十八层地狱一筹，故而得名。一名身穿灰衣的青年正站在鬼见愁顶峰，凛冽的山风不能令他的身体有丝毫移动，从他胸口处那斗大的唐字就可以认出，他来自唐门，灰衣代表的，是唐门外门弟子。他今年二十九岁，因出生不久就进入唐门，在外门弟子的辈分中排名第三，因此外门弟子称他一声三少。当然，到了内门弟子口中，就变成了唐三唐门从建立时开始就分为内外两门，外门都是外姓或被授予唐姓的弟子，而内门，则是唐门直系所属，家族传承。</div>
    <div class="right float-right">巴蜀，历来有天府之国的美誉，其中，最有名的门派莫过于唐门。唐门所在是一个神秘的地方，许多人只知道，那是一个半山腰，而唐门所在这座山的山顶有一个令人胆颤心惊的名字，------鬼见愁。从鬼见愁悬崖上扔出一块石头，要足足数上十九下才会听到石落山底的回声，可见其高，也正是因为这十九秒，尚超过十八层地狱一筹，故而得名。一名身穿灰衣的青年正站在鬼见愁顶峰，凛冽的山风不能令他的身体有丝毫移动，从他胸口处那斗大的唐字就可以认出，他来自唐门，灰衣代表的，是唐门外门弟子。他今年二十九岁，因出生不久就进入唐门，在外门弟子的辈分中排名第三，因此外门弟子称他一声三少。当然，到了内门弟子口中，就变成了唐三唐门从建立时开始就分为内外两门，外门都是外姓或被授予唐姓的弟子，而内门，则是唐门直系所属，家族传承。</div>
    <div class="main">唐门内门长老堂包括掌门唐大先生在内，一共有十七位长老，此时登山的，也正是十七位。就算是武林大会也不可能惊动唐门全部长老同时出动，要知道，这唐门长老之中，年纪最大的已经超过了两个甲子。这些唐门长老的修为，无一不是已臻化境，只是转眼的工夫，他们就已经来到了山顶。外门弟子见到内门长老，只有跪倒迎接的份，但此时，唐三却没有动，他只是静静的看着这些脸色凝重的长老来到自己面前，挡住了所有的去路，而在他背后，是鬼见愁。放下三朵佛怒唐莲，唐三投下最后那恋恋不舍的一眼，嘴角处流露出一丝欣慰的微笑，他毕竟成功了，努力了二十年，他终于完成了这唐家外门暗器的巅峰之作，那种满足的成就，是无法用言语来形容的。此时此刻，唐三觉得对自己来说，一切都已经不重要了，违背门规也好，生死存亡也罢，似乎都随着眼前这三朵盛开的唐莲而告一段落，佛怒唐莲，这世间最霸道的暗器诞生在自己手中，还有什么比令这浸淫在暗器上一生的唐三更加兴奋的呢？"我知道，偷入内门，偷学本门绝学罪不可恕，门规所不容。但唐三可以对天发誓，绝未将偷学到的任何一点本门绝学泄露与外界。我说这些，并不是希望得到长老们的宽容，只是想告诉长老们，唐三从未忘本。以前没有，以后也没有。"唐三此时的情绪很冷静，或许，这是他一生之中最冷静的时候。看着山腰处唐门那大片古香古色的院落，感受着这属于唐门的空气，唐三的眼睛湿润了。自从他懂事那天起，可以说，就是为了唐门而生，而此时，也该为了自己一生中的追求再为唐门而去了。长老们都没有说话，他们此时还没能从佛怒唐莲的出现中清醒过来。两百年，整整两百年了，佛怒唐莲竟然在一个外门弟子手中出现，这意味着什么？这霸绝天下，连唐门自己人也不可能抵挡的绝世暗器代表的绝对是唐门另一个巅峰的来临。看着长老们低头不语，唐三粲然一笑，"唐三的一切都是唐门给的，不论是生命还是所拥有的能力，都是唐门所赋予，不论什么时候，唐三生是唐门的人，死是唐门的鬼，我知道，长老们是不会允许我一个触犯门规的外门弟子尸体留在唐门的，既然如此，就让我骨化于这巴蜀自然之中吧。"唐三那平静甚至有些兴奋的声音终于将长老们惊醒，当长老们抬起头看向他的时候，只见一层乳白色的气流瞬间从他身上蔓延开来。"玄天宝录，你竟然连玄天宝录中本门最高内功也学了？"唐大先生失声说道。轰的一声炸鸣，当众位长老同时后退以防不测的时候，他们看到的却是全身赤裸的唐三。唐三笑了，他的笑容很灿烂，"赤裸而来，赤裸而去，佛怒唐莲算是唐三最后留给本门的礼物。现在，除了我这个人以外，我再没有带走唐门任何东西，秘籍都在我房间门内第一块砖下。唐三现在就将一切都还给唐门。""哈哈哈哈哈哈哈......"唐三仰天狂笑，猛的向后迈开脚步，此时此刻，众位唐门长老突然发现，竟然没有一个人来得及阻止他，他那在白光笼罩中的身体，闪电般扑向前方的鬼见愁，高大昂扬的身躯腾空而起，朝那山间的云雾迈去。"等一下。"唐大先生终于反应了过来，但是，此时他再说什么都已经晚了。云雾很浓，带着阵阵湿气，带走了阳光，也带走了那将一生贡献给了唐门和暗器的唐三。时间似乎已停滞，唐大先生双手颤抖的捧起面前那三朵唐莲，他的眼睛湿润了，"唐三啊唐三，你这是何苦呢？你带给我们的惊讶实在太多太多......""大哥。"二长老上前一步，"何必为这叛徒神伤？"唐大先生的目光瞬间变冷，全身寒气大盛，瞪视着二长老，"你说谁是叛徒？你见过一个叛徒在得到本门最高秘籍之后会不逃？你见过一个叛徒会以死明志？你见过一个怀有足以毁灭唐门任何高手的绝世暗</div>
</div>