乐趣区

关于程序员:失业潮中不得不看CSS知识点巨详细

jiezi

就业潮中不得不看 CSS 知识点(巨具体)

一. 高度塌陷

形容

​ 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无奈把父元素撑开，父元素高度为 0 产生高度塌陷，称为高度塌陷问题。

解决的方法

  1. 给父元素增加申明：overflow:hidden；

    .parent-box{overflow:hidden}

    长处: 代码少，简略容易；

    毛病: 如果想让外部元素在父元素里面显示时则会被暗藏，如 Dropdown 下拉菜单，Popover 弹出框，Tooltip 文字提醒等。

  2. 在浮动元素下方增加空 div，并给元素申明 clear：both，保险起见，再加 height:0。革除个别块元素可能自带的 height:16px;（IE 浏览器自带 16px）
    毛病：须要增加多余的空标签并增加属性;

    <style type="text/css">
    .parent-box {
        margin: 100px auto;
        width: 200px;
        border: 3px solid red;
    }

    .chlidren-box {
        width: 100px;
        height: 200px;
        background: green;
        float: left;
    }

    .clear-box {
        clear: both;
        /* 上面为了兼容 IE */
        height: 0;
        overflow: hidden;
    }
</style>
<body>
    <div class="parent-box">
        <div class="chlidren-box"></div>
        <div class="clear-box"></div>
    </div>
</body>

  3. 大家都很熟的万能革除法。原理和第二点其实是一样的，不过把空的 div 用伪类代替了。

    长处: 浏览器反对好

    毛病: 代码多，难以记住

    <style type="text/css">
    .parent-box {
        margin: 100px auto;
        width: 200px;
        border: 3px solid red;
    }

    .chlidren-box {
        width: 100px;
        height: 200px;
        background: green;
        float: left;
    }

    .parent-box::after{
        content: '';
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
    }
</style>
<body>
    <div class="parent-box">
        <div class="chlidren-box"></div>
    </div>
</body>

  4. 父元素增加浮动

    毛病：会产生新的浮动问题。

    .parent-box{float:left;}

二.BFC

定义

​ 在解释 BFC 之前还必须要晓得 Box、Formatting Context 两个小概念。

​ Box: 是 Web 页面布局的对象和根本的单位。一个页面就是由许多个 Box 而组成的。元素的类型和体现的属性，也是就是 dispaly 的属性决定了会如何的参加Formatting Context, 因而元素会以不同的形式渲染。

Formatting Context:是 W3C CSS2.1 标准中的一个概念。它是页面中的一块渲染区域，有一套渲染规定决定了其子元素将如何定位，以及和其余元素的关系和相互作用。

​ 其中有几种类型，包含块格式化上下文 block formatting contexts（display:block）、内联格式化上下文 inline formatting contexts(display:inline/inline-block/flex 等) 和灵便格式化上下文 flex formatting contexts(display:flex)还有网格格局上下文 grid formatting context(display:grid)，其中最常见的就是 BFC 和 IFC 了。

​ 块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程产生的区域，也是浮动元素与其余元素交互的区域，来自 MDN。简略来说就是，BFC 就是页面上的一个隔离的独立渲染区域（Box），区域外面的子元素不会影响到里面的元素。里面的元素也不会影响到区域外面的子元素。

如何创立 BFC

  • 浮动元素（float值不为 none）
  • position的值不是 static 或者relative。
  • display的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
  • overflow的值不是visible

BFC 的布局规定

  1. BFC 布局中默认是外部的块元素会在垂直方向，一个接一个地搁置。每个块元素独占一行。像积木一样，一块块的垂直装在一个盒子里。块元素垂直方向的总间隔由 margin 决定, 如下图右边。

  2. 属于同一个 BFC 的两个相邻块元素在垂直方向上的 margin 会产生重叠 / 合并（下图右边），并且两个相邻块元素的之间的间隔是由两个元素块中值最大的那个决定的。但程度方向的 margin 却不会（下图左边）。

    <img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306010954215.png” alt=”image-20230529233239554″ style=”zoom:33%;” /><img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306010954808.png” alt=”image-20230530104254187″ style=”zoom:100%;” />

  3. BFC 渲染区域不会与 float 浮动定义的元素区域重叠（如上图），通过 overflow:hideen 触发 BFC 当前咱们的 mian 元素就不会与 aside 的元素重叠（两栏自适应成果）。
  4. 计算 BFC 区域的高度时，浮动元素的高度也计算在内。（相似革除浮动的作用，父元素高度能够被浮动元素撑起来）
  5. 区域外面的子元素不会影响到里面的元素。里面的元素也不会影响到区域外面的子元素。

BFC 的作用

  1. 防止垂直方向 margin 合并: 合并问题也就是布局规定 2 中所说的相邻的两个元素垂直方向上 margin 合并的问题，如果把两个相邻元素中其中一个用一个新元素套起来并触发 BFC 来防止合并。造成这种状况的原理就是上文中 BFC 布局规定的第 5 点，他们之前不会相互影响。

    <style type="text/css">
    .main {
        font-size: 12px;
        width: 100px;
        height: 200px;
        background-color: aqua;
        margin-top: 20px;
    }
    .aside {
        margin-bottom: 10px;
        width: 100px;
        height: 200px;
        font-size: 12px;
        background: #FFCCFF;
    }
</style>
<body>
    <div class="parent-box">
        <div style="overflow: hidden;">
            <div class="aside">aside</div>
        </div>
        <div class="main">main</div>
    </div>
</body>
  2. 防止垂直方向 margin 溢出: 这也是咱们在日常开发中常常遇到的情景之一。比方咱们开发一个页面，须要下面留白一块，这个时候咱们写 margin-top 发现生效了，关上 F12 一看发现是元素的 margin-top 曾经超出父元素了。那么咱们要怎么解决呢，这个时候咱们通常在父元素中加上一个 overflow:hidden 造成一个 BFC，子元素受到外层父元素 BFC 的阻隔，就不会对父元素以外的区域造成影响，从而解决了垂直方向 margin 溢出的问题。除了这种解决办法以外，咱们也能够通过平级的 BFC 来解决，在该元素前退出一个空的元素，并让空元素成为一个 BFC 块，例如退出一个 dispaly:table 的元素。

  3. 自适应两栏布局: 在下面布局规定中第三点中也曾提到过这点，通过 BFC 渲染区域不会与 float 重叠的个性，float 元素固定宽度，BFC 的元素进行自适应。

    <style type="text/css">
    .main {
        height: 200px;
        background-color: aqua;
        overflow: hidden;
    }
    .aside {
       float: left;
        width: 100px;
        height: 200px;
        background: #FFCCFF;
    }
</style>
<body>
    <div class="parent-box">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
</body>
  4. 避免高度坍塌: 这里就不再反复了，见第一个知识点，其中最为典型的就是 overflow:hidden, 这就是触发BFC 的条件之一。

三. 响应式布局

​ 随着挪动互联网的爆火，响应式布局也成为了前端 er 要把握的必不可少的知识点之一。绝对于自适应布局来说，响应式布局只须要一套页面，对于挪动设施的来说更加敌对，不会呈现因为屏幕太小而导致拥挤不美观的问题。

​ 在说响应式的几种布局之前，咱们必须要先理解一个 <head> 中的标签。大多数挪动浏览器将 HTML 页面放大为宽的视图（viewport）以合乎屏幕分辨率。你能够应用视图的 meta 标签来进行重置。这段标签通知浏览器，不要进行缩放，避免因为缩放呈现页面款式拥挤问题。在 <meta name=”viewport”ontent=”width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0”> 中，width = device-width：布局视口的宽度等于以后设施视口的宽度，initial-scale：初始的缩放比例（默认设置为 1.0），minimum-scale：容许用户缩放到的最小比例（默认设置为 1.0），maximum-scale：容许用户缩放到的最大比例（默认设置为 1.0），user-scalable：用户是否能够手动缩放（默认设置为 no，因为咱们不心愿用户放大放大页面）。接下来就是对几种布局形式对介绍。

媒体查问

@media CSS @ 规定可用于基于一个或多个媒体查问的后果来利用样式表的一部分。应用它，你能够指定一个媒体查问和一个 CSS 块，当且仅当该媒体查问与正在应用其内容的设施匹配时，该 CSS 块能力利用于该文档。

简略来说，应用它，将会依据不同的条件应用不同的的 css 块来渲染页面，以达到不同尺寸的设施的款式兼容。

类型

除了咱们相熟的 @media screen以外，还有 all 和print,all 实用于所有设施。print 实用于在打印预览模式下在屏幕上查看的分页资料和文档。（无关特定于这些格局的格局问题的信息，请参阅分页媒体。）screen 次要用于屏幕, 也是咱们日常所用到的。

应用示例

咱们能够在 style 定义和对 css 文件援用中应用 media。然而只可能对于不同类型的设施的做辨别，对于咱们前端来说，咱们的指标当然是要在不同大小屏幕设施中去写不同的款式，所以这就须要咱们在 css 中更加精细化的适配条件了。

<style media="print">/*   打印机款式 */</style> 
<style media="screen">/*   屏幕款式 */</style> 
<link rel="stylesheet" href="screen.css" media="screen"> 
<style >
@import url(screen.css) screen;
</style>

在 css 文件中咱们能够这样应用，例如咱们要给一个小屏设施（手机）设置一套款式，那么就像能够像上面这样写。其中 orientation 代表视口的旋转方向，也就是竖屏（portrait）还是横屏（landscape）。而后通过 screen 的大小条件作为限度条件，如上面例子中的 max-width 和min-width，就通过不同条件设置了根元素的字体大小，而且还能够通过 not 来做反条件的判断。那么咱们要怎么来划分不同大小的设施类型呢？上面也会为大家贴出一个的例子作为参考。

@media screen and (orientation: portrait) and (max-width: 768px) {
  thml{font-size:32px;}
}
@media screen and (orientation: portrait) and (min-width: 1200px) {
  thml{font-size:12px;}
}
@media not screen and (orientation: portrait) and (max-width: 768px) {
  thml{font-size:12px;}
}
应用示例
设施划分 尺寸区间
超小屏幕（手机） < 768px
小屏设施（平板） >= 768px ~ 992px
中等屏幕（桌面显示器） >= 992px ~ < 1200px
宽屏设施（大桌面显示器） >=1200px

flex 布局

基本概念

在以前的传统的布局的解决方案中，往往是通过 position+display+float 来实现布局形式，然而随着页面内容的多元化还有多端适应的要求，一些非凡的布局实现起来很麻烦，比如说垂直居中，这种形式往往让咱们深受其扰。

<img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306010952073.jpg” alt=”4054-d535745cbbb2451e4950caa4625f50da” style=”zoom:50%;” />

而 flex 布局非常简略灵便，区区简略几行代码就能够实现各种页面的的布局。采纳 flex 布局的盒子（设置 display:flex 的元素），咱们将他称为容器（也就是父元素），它的所有子元素主动成为容器成员，称为 flex 我的项目（flex item），简称“我的项目”。，在 flex 容器中默认存在两条轴，程度主轴(main axis) 和垂直的穿插轴(cross axis)，这是默认的设置，当然你能够通过批改使垂直方向变为主轴，程度方向变为穿插轴，如下图所示。接下来介绍几个容器自身自有的属性。

容器属性
容器属性 属性值
display flex(容器弹性布局渲染区域),inline-flex(行内弹性布局渲染)
flex-direction(主轴方向) row(从左到右),row-reverse(从右到左),column（从上到下）,column-reverse（从下到上）详见下注 1.
justify-content(主轴对其形式) flex-start(主轴终点对齐),flex-end(主轴起点对齐),center(居中对齐),space-between(中间紧贴, 两头放弃雷同间距)，space-around(每个我的项目放弃雷同间距)见下图 1 注 2(下图起源阮一峰老师)
align-items（穿插轴对齐形式） flex-start(穿插轴终点对齐),flex-end(穿插轴起点对齐),center(居中对齐),baseline(我的项目的基线对齐),stretch(我的项目占满空间)见下图 2 注 2(下图起源阮一峰老师)
flex-wrap(主动换行) nowrap(默认不换行, 主动等比放大, 没有空间也不换),wrap(我的项目无奈放下时, 主动换行)
flex-flow flex-direction + flow-wrap 的简写模式（示例:flex-flow: flex-direction flex-wrap）

注 1: 当属性是 row 和 row-reverse 示意容器时程度主轴，垂直的穿插轴。column 和 column-reverse 则相同示意垂直主轴，程度的穿插轴。

注 2:

<img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306071618888.png” alt=”image-20230607161803800″ style=”zoom: 67%;” />

我的项目属性
我的项目属性 属性值
order(排列程序) 任意整数，值越小越排在后面，默认为 0
align-self 其取值和 align-items 齐全一样。默认 auto 值，示意继承父元素的 align-items 成果。
flex-grow 属性定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大。如果所有我的项目的flex-grow 属性都为 1，则它们将等分残余空间（如果有的话）。如果一个我的项目的 flex-grow 属性为 2，其余我的项目都为 1，则前者占据的残余空间将比其余项多一倍。
flex-shrink 属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。如果所有我的项目的 flex-shrink 属性都为 1，当空间有余时，都将等比例放大。如果一个我的项目的 flex-shrink 属性为 0，其余我的项目都为 1，则空间有余时，前者不放大。
flex-basis 属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为auto，即我的项目的原本大小。
flex flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

Grid 布局

基本概念

网格布局 (Grid) 是最弱小的 CSS 布局计划。

它将网页划分成一个个网格，能够任意组合不同的网格，做出各种各样的布局。以前，只能通过简单的 CSS 框架达到的成果，当初浏览器内置了。（来自阮一峰老师）

Grid 布局最大的劣势是过管制行和列，把一个容器划分为不同大小的单元格，而后指定 ” 我的项目所在 ” 的单元格。容器和我的项目的概念和 flex 布局差不多，父元素是容器，子元素是我的项目，所以不再多说了，上面来具体的介绍一下属性。

容器属性

`grid-template-columns/grid-template-rows规定了会有几行几列, 每行 / 类的高 / 宽。具体的用法如下，以 grid-template-columns 为例。

grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度 100px
// 咱们也能够用 repeat 函数进行简写，也是一样的成果，三列每列 100px
grid-template-columns:repeat(3,100px);

接下来是对一些属性的具体的介绍。那么如果我的项目是固定的，咱们想要容器内不缺定我的项目的数量或者是不确定容器的大小，又想让它默认的填充斥整个的容器的话。咱们能够应用 auto-fill 的形式来实现。

grid-template-columns: repeat(auto-fill,100px);

当然咱们有时候也会不确定我的项目大小，想让它可能自适应大小。这时候咱们就不得不提到一个单位 fr，fr 是fraction的简写，意思就是局部，片段的意思，示意我的项目的宽或高在容器的总宽高的占比，应用的形式上和 flex 一样，不过要加上单位。

flex:1 2 3;
grid-template-columns:1fr 2fr 3fr;// 都示意了列宽分为 6 份，三个我的项目各占 1，2，3 份

除此以外，咱们还能够设置一个范畴来束缚他，让它更加的灵便。

grid-template-columns:  minmax(100px，1fr)// 第一个数值示意最小值，第二个值示意最大值。

也能够设置 auto，由浏览器决定本人的占的范畴。比方咱们要实现右边固定，左边自适应。

grid-template-columns:100px auto;

column-gap 和 row-gap用来设置网格线之间的宽度，也就是网格线的宽度。如果行和列的宽度是一样的，间接 gap 简写就能够了。

column-gap:10px;// 设置网格线的列的宽度
row-gap:10px;// 设置网格线的行的宽度
gap:10px;// 如果一样能够简写
gap:normal;// 其值由所设置的 font-size 所决定，就相当于 1em

划分成网格后会默认按程序，主动的一个个按程序放入对应的地位，默认是按行排列，放满第一行后，再放入第二行，grid-auto-flow能够设置放入的规定是按行还是按列。

grid-auto-flow：row// 按行排列
grid-auto-flow：column// 按列排列，即放满第一列后再放满第二列

justify-items（程度）和 align-items（垂直）能够设置单元格内容的对齐形式，参考 flex 的容器属性的 justify-content 还有 align-items。

justify-items/align-items:start | end | center | stretch;
place-items : start end；// 两个属性的简写

justify-content (程度)/ align-content(垂直)能够设置整个容器内区域的程度和垂直的对齐形式。

justify-content/align-content: start | end | center | stretch | space-around | space-between | space-evenly;

而且还能够给网格线定义名称，不便定位的时候应用。名称能够在我的项目指定地位的时候应用

grid-template-columns: [a] 100px [b] 100px [b] 100px [d];

还能够指定区域里的单元格，一个区域由单个或多个单元格组成，能够在我的项目指定地位的时候应用。如果区域不须要应用则用点示意。

grid-template-areas: 'a b c'
                      'd e f'
                      'g h i';
// 内容应用多个单元格
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer"
// 局部区域不应用
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

<img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306121737319.png” alt=”image-20230612173746220″ style=”zoom:50%;” />

我的项目属性

grid-column-start / grid-column-end grid-row-start / grid-row-end用来指定我的项目所在的具体位置，依据网格线来确定地位。

<img src=”https://cdn.jsdelivr.net/gh/Zhjoker/blog-pic/imgs/202306121707175.png” alt=”image-20230612170752092″ style=”zoom:50%;” />

咱们还是以列为例, 咱们指定从列的第一条线到列的第四条线，就会产生如上图成果

.item-1{
  grid-column-start:1;
  grid-column-end:4;
  grid-column: 1 / 4;// 简写
  grid-column:a/d;// 自定义网格线应用
 }

但有时候咱们想要占两行两列，要怎么实现呢, 如下代码，则 1 会在上图中本来地位外还会占据 2，3，4 的地位。

grid-column-start:1;
grid-column-end:4;
grid-row-start:1;
grid-row-end:3;

然而这样写呢会显得比拟冗余，所以咱们也能够采纳简写的形式来写。

grid-area: 1(row-start) / 1(column-start) / 3(row-end) / 4(column-end)

除此以外 grid-area，能够配合 grid-template-areas 的形式。图见 grid-template-areas 介绍。

grid-template-areas: 'header header header'
                     'main main sidebar'
                     'footer footer footer'
grid-area:'main'// 咱们指定的我的项目放入 main 中

justify-self / align-self / place-self也是容器中的一个重要属性，justify-self 和 align-self 就是针对单个我的项目的，和 justify-items 和 align-items 的用法一样。place-self 是 justify-self 和 align-self 的简写。

float 布局

基本概念

把一个元素“浮动”(float)起来，会扭转该元素自身和在失常布局流（normal flow）中追随它的其余元素的行为。这一元素会浮动到左侧或右侧，并且从失常布局流 (normal flow) 中移除，这时候其余的四周内容就会在这个被设置浮动 (float) 的元素四周盘绕。

属性
属性值 形容
left 元素必须浮动其所在的块容器左侧。
right 元素必须浮动在其所在的块容器右侧。
none 表明元素不进行浮动，默认的。

利用 css 构建三角形

如果要实现那一边的三角形就将他对面的那个边设置你想要的三角形色彩，另外两边设置通明就能够了。直角三角形设置两个 border 就能够，设置通明那边的直角边正好在相同的那边，有色彩的边则就是直角边的方向。

.triangle-top {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid greenyellow;
}// 上三角形
.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 100px solid transparent;
}// 直角三角形（直角边为右边和上边）

常见的程度垂直居中

已知宽高

利用 position+calc

<style type="text/css">
    .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .content {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

利用 position+maring

<style type="text/css">
    .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            background-color: yellowgreen;
        }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
不确定宽高

position+margin:auto

<style type="text/css">
    .box {
            position: relative;
            padding: 100px;
            background-color: yellow;
        }
        .content {
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100px;
            height: 100px;
            margin:auto;
            background-color: yellowgreen;
        }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

position+ transform

 <style type="text/css">
    .box {
            position: relative;
            padding:100px;
            background-color: yellow;
        }
        .content {
            position: absolute;
              top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

table 布局

<style type="text/css">
    .box {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            background-color: yellow;
        }
        .content {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
</style>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

还有 flex 布局和 grid 布局就不多说了，下面有细微介绍。

css 权重

第一等级：代表内联款式，style=””，权值为 1000

第二等级：代表 ID 选择器，如 #id，权值为 100

第三等级：代表类，伪类和属性选择器，如.content，权值为 10

第四等级：代表标签选择器和伪元素选择器，如如 div p | ::after, ::before，权值为 1

此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在 4 等级之内，所以它们的权值都为 0；

退出移动版