likes
comments
collection
share

2023不得不看CSS知识点(巨详细)

作者站长头像
站长
· 阅读数 19

一.高度塌陷

描述

​ 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为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用伪类代替了。

    优点:浏览器支持好

    缺点:代码多，难以记住

    2023不得不看CSS知识点(巨详细)

    <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却不会（下图右边）。

    2023不得不看CSS知识点(巨详细)2023不得不看CSS知识点(巨详细)

  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来实现布局方式，但是随着页面内容的多元化还有多端适应的要求，一些特殊的布局实现起来很麻烦，比如说垂直居中，这种方式往往让我们深受其扰。

2023不得不看CSS知识点(巨详细)

而flex布局十分简单灵活，区区简单几行代码就可以实现各种页面的的布局。采用flex布局的盒子（设置display:flex的元素），我们将他称为容器（也就是父元素），它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称“项目”。，在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，如下图所示。接下来介绍几个容器本身自有的属性。

2023不得不看CSS知识点(巨详细)

容器属性

容器属性属性值
displayflex(容器弹性布局渲染区域),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-flowflex-direction + flow-wrap的简写形式（示例:flex-flow: flex-direction flex-wrap）

注1:当属性是row和row-reverse表示容器时水平主轴，垂直的交叉轴。column和column-reverse则相反表示垂直主轴，水平的交叉轴。

注2:

2023不得不看CSS知识点(巨详细)

项目属性

项目属性属性值
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，即项目的本来大小。
flexflex属性是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';
2023不得不看CSS知识点(巨详细)

项目属性

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

2023不得不看CSS知识点(巨详细)

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

.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；