备案控制台
开发者社区 开发与运维 文章 正文

CSS3总结

2022-10-15 155
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS3总结！

颜色单位

1、在CSS中可以直接使用颜色名来设置各种颜色。

比如：red，orange，yellow，blue，green；但是直接使用颜色名是非常不方便的。

2、RGB值

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red G green B blue
每一种颜色的范围在0 - 255(0% - 100%)之间
语法：RGB(红色,绿色,蓝色)

3、RGBA

就是在RGB的基础上增加了一个a表示不透明度
需要四个值，前三个和RGB一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5表示半透明

4、十六进制的RGB值

语法：#红色绿色蓝色
颜色浓度通过 00-ff
如果颜色两位两位都重复可以进行简写
比如：#aabbcc —> #abc
注意：#aabbcd 不能简写

5、 HSL值与HSLA值

H 色相(0-360)
S 饱和度:颜色的浓度 0%-100%
L 亮度：颜色的亮度 0%-100%
同上，A表示透明度，和上面类似。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/length_and_color_unit.css">
    <title>长度单位和颜色单位</title>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3">你好</div>
        <div class="box4"></div>
    </div>   
</body>
</html>
.box1{
    width: 300px;
    height: 300px;
    background-color:burlywood;
}
.box2{
    width: 50%;
    height: 50%;
    background-color: cadetblue;
}
/* 类选择器.box2设置效果和以下备注效果一样 */
/* .box2{ 
    width: 100px;
    height: 100px;
    background-color: cadetblue;
}*/
/* em大小会根据字体长度改变而改变 */
.box3{
    font-size: 30px;
    width: 1em;
    height: 3em;
    background-color: chartreuse;
}
/* rem是参照html元素选择器中字体大小来决定长度，而不是自身的字体大小 */
.box4{
    font-size: 10px;
    width: 10rem;
    height: 2rem;
    background-color: darkgreen;
}
html{
    font-size: 20px;
    background-color: red;
    background-color: rgb(255,0,0);
    background-color: rgb(0,255,0);
    background-color: rgb(0,0,255);
    background-color: rgb(255,255,255);
    background-color: #ff0000;
    background-color: #f00;
    background-color: #0f0;
    background-color: #00f;
    background-color: hsl(2,30%,30%);
    background-color: hsl(200, 50%, 50%,.5);
    background-color: rgb(106,153,85,.5);
}

盒子模型

标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；

注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。

怪异盒子模型(IE标准的盒子模型)

1、怪异盒模型也叫IE盒子模型

怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件：

(1) 给元素添加CSS3属性box-sizing:border-box; (注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)
(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。

2、怪异盒子(IE盒子模型)模型的计算

img

如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；
注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。

小结

  • 标准盒模型：在标准盒模型的情况下，盒子的宽度=width（内容宽度）+padding（内边距）+border（边框）+margin（外边距）；
  • 怪异盒模型：在怪异盒模型的情况下，盒子的宽度=width（宽度）+margin（外边距）。

浮点样式

定义和用法

当元素被浮动的时候，会脱离文档流，根据float的值得方向向左或者向右移动，知道它的外边界碰到父元素的内边界或者另一个浮动元素外边界为止，是css布局中实现左右布局的一种常见的方式。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

值 描述

left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit 规定应该从父元素继承 float 属性的值

文档流

文档流是元素在web页面上的一种呈现方式，按照出现的先后顺序进行排列。

img

浮动以后：

img

Css代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                border: 1px black solid;
            }

            .box1 {
                width: 100px;
                height: 100px;
                background: black;
                float: right;
            }

            .box2 {
                width: 200px;
                height: 200px;
                background: green;
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        aaaaa
    </body>
</html>
  • 通过上面的例子可以很清晰的看到，盒子的浮动会影响外部文档流的高度。造成无法撑开而造成内容被遮挡，这属于一种布局里的高度塌陷。因为浮动的原因把所以元素的文档流全部清楚了。所以我们需要通过清楚浮动来解决这个问题。

清除浮动

清除浮动的方案：一句话建立挡板

Clear属性

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1 {
                width: 200px;
                height: 100px;
                background: red;
                border: 1px black solid;
                float:left;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background: pink;
                clear: left;
            }
        </style>
    </head>

    <body>

        <div class="box1"></div>
        <div class="box2"></div>
        aaaaaaaaa
    </body>

</html>

BFC

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .wrapper{
              /* 开启BFC */
              overflow: hidden;
            }

            .div1 {
              width: 100px;
              height: 100px;
              background-color: green;
              margin-bottom: 10px;
              float: left;
            }

            .div2 {
              width: 100px;
              height: 100px;
              background-color: red;
              margin-top: 20px;
            }
        </style>
    </head>
    <body>

        <div class="wrapper">
          <div class="div1"></div>
        </div>
        <div class="div2"></div>

    </body>
</html>

空标签

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1 {
                width: 200px;
                border: 1px black solid;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background: pink;
                float: left;
            }
        </style>
    </head>

    <body>

        <div class="box1 clearfix">
            <div class="box2"></div>
            <div style="clear:both">xxxxxxxxxxxxxxxx</div>
        </div>
        aaaaaaaaa
    </body>

</html>

.Clearfix:after{}(推荐)

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box1 {
                width: 200px;
                border: 1px black solid;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background: pink;
                float: left;
            }

            .clearfix::after {
                content: "";
                clear: both;
                display: block;
            }
        </style>
    </head>

    <body>

        <div class="box1 clearfix">
            <div class="box2"></div>
        </div>
        aaaaaaaaa
    </body>

</html>

小结

  • 设计浮动主要是为了解决：图文混排的效果，实现元素的左右布局的方式
  • 只会影响后面的元素
  • 文本不会被浮动元素覆盖
  • 具备内联盒子的特征：宽度又内容来决定了
  • 具备会计盒子特征：支持所有样式
  • 浮动元素，如果一行放不下会折行处理
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 300px;
            height: 300px;
            background: pink;
        }

        .wrapper div {
            width: 100px;
            height: 100px;
            border: 1px yellow solid;
            box-sizing: border-box;
            float: left;
        }
    </style>
</head>

<body>
    <!-- <div class="box">aaaaaaaaaa</div> -->
    <!-- <span class="inline">bbbbbbbbb</span> -->

    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

标签默认样式及清除

标签默认样式

  一些HTML标签在浏览器中会有默认样式，例如：body标签会有margin:8px；ul标签会有margin:16px 0;及padding-left:40px。

  当我们在切图软件中进行尺寸或位置测量的时候，把测量出来的数值设置到对应的标签上时，可能会受到当前标签默认样式的影响，从而页面显示效果跟设计图效果不符。

清除默认样式

  通常在网页开发中，要去掉这些影响尺寸和位置的默认样式及其他影响布局的默认值。可以参考CSS Tools: Reset CSS方案。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

  由于Reset CSS相对“暴力”，不管你有没有用，统统重置成一样的效果，且影响的范围很大，所以更加“平和”的一种方式Normalize CSS诞生了。

  Normalize CSS可以看成是一种Reset CSS的替代方案。创造Normalize CSS有下面这几个目的：

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式：为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性：用一些小技巧
  • 解释代码：用注释和详细的文档来
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

  在后面章节中编写的实战案例部分，会采用Normalize CSS和Reset CSS结合代码，形成一个更加强大的方案，文件命名为reset.css，代码如下，当然后面章节中也会直接把文件提供给同学们：

@charset "utf-8";

/* --------------------重置样式-------------------------------- */

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
    margin : 0;
    padding: 0
}

/*设置默认字体*/
body {
    font-size  : 14px;
    font-style : normal;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}

/*字体太小用户体检不好，让small恢复12px*/
small {
    font-size: 12px
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

h4,
h5,
h6 {
    font-size: 100%
}

ul,
ol {
    list-style: none
}

a {
    text-decoration : none;
    background-color: transparent
}

a:hover,
a:active {
    outline-width  : 0;
    text-decoration: none
}

/*重置表格*/
table {
    border-collapse: collapse;
    border-spacing : 0
}

/*重置hr*/
hr {
    border: 0;
    height: 1px
}

/*图形图片*/
img {
    border-style: none
}

img:not([src]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

/*下面的操作是针对于html5页面布局准备的，不支持ie6~8以及其他低版本的浏览器*/
html {
    /*禁用系统默认菜单*/
    -webkit-touch-callout   : none;
    /*关闭iphone & Android的浏览器纵向和横向模式中自动调整字体大小的功能*/
    -webkit-text-size-adjust: 100%
}

input,
textarea,
button,
a {
    /*表单或者a标签在手机点击时会出现边框或彩色的背景区域，意思是去除点击背景框*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]),
video:not([controls]) {
    display: none;
    height : 0
}

progress {
    vertical-align: baseline
}

mark {
    background-color: #ff0;
    color           : #000
}

sub,
sup {
    position      : relative;
    font-size     : 75%;
    line-height   : 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline  : 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

textarea {
    overflow: auto
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding     : 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding   : 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset    : -2px
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color  : inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font              : inherit
}

详解Display属性

Display属性的作用

  在CSS中display属性表示“显示框类型”，即不同的盒模型。简单来说，可以把块级盒子转成内联盒子，也可以把内联盒子转成块级盒子。

<style>
.box1{ display:inline; background:gold;}
.box2{ display:block; background:skyblue;}
</style>
<div class="box1">块1</div>
<div class="box1">块2</div>
<span class="box2">内联1</span>
<span class="box2">内联2</span>

img

改变盒模型类型

  可以看到，div具备了内联盒子的特性，而span则具备了块级盒子的特性。当然display远比这些复杂的多，像我们后面章节中讲到的弹性布局、网格布局等都是跟display有着紧密关系。

  display属性大概可分为以下几类进行学习：
img

display属性分类

Display-Outside(外部值)

img

display属性分类

  外部值就是定义自身元素的外部表现，而不影响其内的子元素。

  • block：表示块级盒子 像 等默认就是块级盒子。
  • inline：表示内联盒子 像 、等默认就是内联盒子。
  • run-in：实验性质的属性，浏览器支持不好。

Display-Inside(内部值)

img

内部值

  和外部值相反，内部值就是定义子元素布局的。像flex、grid这些设置都会影响到子元素的布局形式，后面章节将详细的对flex和grid进行讲解。

  • flow-root：一个BFC的块级盒子(注：BFC后面小节会讲解)。
  • table：带有内部表格布局的块级盒子。
  • flex：带有内部弹性布局的块级盒子。
  • grid：带有内部网格布局的块级盒子。

Display-Listitem(列表值)

img

列表值

  list-item属性值是生成一个容纳内容和单独的列表行内元素盒的块级盒子，目的是为了用div去代替

  • 标签之类的，

  • 元素默认就是 list-item

    Display-Internal(属性值)

    img

    属性值

      一些和table布局、ruby搭配一起控制页面布局的属性值，因为使用的比较少，这里不展开探讨。

    Display-Box(显示值)

    img

    显示值

    • contents：只影响其内容的样式生效，比如：字体大小、文字颜色等；但是像背景色、边框是不会生效的。
    • none：从盒子树中移除，包括其所有后代元素。

    Display-Legacy(混合值)

    img

    混合值

    • inline-block：对外表现成内联盒子，对内表现成块级盒子
    • inline-table：对外表现成内联盒子，对子元素表现成表格盒子
    • inline-flex：对外表现成内联盒子，对子元素表现成弹性盒子
    • inline-grid：对外表现成内联盒子，对子元素表现成网格盒子

      下面通过代码来演示一下inline-block的特性：

    <style>
.box{ display:inline-block; width:100px; height:100px; background:gold;}
</style>
<div class="box">块1</div>
<div class="box">块2</div>
<span class="box">内联1</span>
<span class="box">内联2</span>

    img

    inline-block特性

      可以看到，盒子即具备了块级盒子的特性(支持宽高)又具备了内联盒子的特性(横向排列)。 关于inline-flex、inline-grid的特性会在相关章节中进行讲解。

    Global(全局值)

    img

    全局值

    • inherit：继承父元素的display属性
    • initial：不管父元素怎么设定，恢复到浏览器最初始时的display属性
    • unset：unset混合了 inherit 和 initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设定。

BFC块级格式化上下文

BFC概念

  BFC即Block Formatting Contexts(块级格式化上下文)，它是W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

  具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

  通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC触发条件

  满足以下条件之一，即可触发BFC：

  • float的值不是none
  • position的值不是static或者relative
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

  下面的box盒子就是一个BFC独立容器：

.box{
    width: 100px;
    height: 100px;
    overflow: hidden;   /* 触发了BFC，形成独立盒子 */
}

BFC的应用

  在前面介绍盒模型的margin时，出现了传递和叠加的问题，这里可以采用BFC规范来解决，原理就是让盒子形成一个独立的容器，无论里面的子元素如何折腾，都不影响到外面的元素。

<style>
.box1 {
    width: 200px;
    height: 200px;
    background: pink;
    overflow: hidden;    /* 触发了BFC，形成独立盒子 */
}
.box2{
    width: 100px;
    height: 100px;
    background: skyblue;
    margin-top: 30px;
}
</style>
<div class="box1">
    <div class="box2"></div>
</div>

img

BFC解决传递问题

<style>
section{
    overflow: hidden;    /* 触发了BFC，形成独立盒子 */
}
.box1 {
    width: 200px;
    height: 200px;
    background: pink;
    margin-bottom: 40px;
}

.box2 {
    width: 100px;
    height: 100px;
    background: skyblue;
    margin-top: 30px;
}
</style>
<section>
    <div class="box1"></div>
</section>
<section>
    <div class="box2"></div>
</section>

img

BFC解决叠加问题

  BFC还可以解决前面浮动遇到了父容器高度塌陷的问题，也就是不管里面子元素是否浮动，都不会因为脱离文档流对容器高度造成影响。

<style>
.box1 {
    width: 200px;
    border: 1px black solid;
    overflow: hidden;     /* 触发了BFC，形成独立盒子 */
}
.box2 {
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
}
</style>
<div class="box1">
    <div class="box2"></div>
</div>

img

BFC解决浮动高度塌陷

  在现代布局flex和grid中，是默认自带BFC规范的，所以可以解决非BFC盒子的一些问题，这就是为什么flex和grid能成为更好的布局方式原因之一。

概述

Position相对定位的特征是什么？它是指定位的元素是在文档中的正常位置偏移给定的值。

Position出现的原因

  • 解决元素的层级面的关系。因为传统的元素都是根据文档流的方向进行处理。虽然有了浮动但是依然只是解决了左右这种布局结构，而这种层与面的关系的并没有解决，所有position专门来出来这块的问题。

定位的特征

  • 定位的元素如果定位的值是：abslout和fixed也会破坏文档流
  • 定位的元素如果定位的值是：abslout和fixed，如果元素上增加了float全部会失效，包括后面的flex和网格布局，因为定位布局的优先级更高
  • 定位的值是：relative，仅仅是给元素内部的定位元素absoulte用来设置起始坐标和位置的
  • fixed值的盒子，不受relative和内部嵌套的影响，直接会跳脱到最外层进行定位布局，也就是说它的相对定位永远都是body。
扩展文章：

https://zhuanlan.zhihu.com/p/434788923

https://blog.csdn.net/qq_45870314/article/details/123512881

https://blog.csdn.net/a526001650a/article/details/114403042

https://blog.csdn.net/ylnzzl/article/details/119335085

扩展文章：

https://zhuanlan.zhihu.com/p/434788923

https://blog.csdn.net/qq_45870314/article/details/123512881

https://blog.csdn.net/a526001650a/article/details/114403042

https://blog.csdn.net/ylnzzl/article/details/119335085

文章标签：
Ruby
前端开发
容器
关键词：
CSS总结
游客wazjug5ieii4a
目录
相关文章
陈丹宇jmu
|
移动开发 HTML5
HTML5 + CSS3 总结 - 知识框架 思维导图
HTML5 + CSS3 总结 - 知识框架 思维导图
陈丹宇jmu
136 0
HTML5 + CSS3 总结 - 知识框架 思维导图
董员外
|
前端开发 JavaScript 容器
css知识总结
css知识总结
董员外
125 0
css知识总结
小調不吃辣
|
前端开发 容器
CSS总结
CSS总结
小調不吃辣
120 0
程序员大腾
|
前端开发
学习CSS的简单总结（2）
在"学习CSS的简单总结（1）" 里总结了怎样使用css。 本文是总结一下具体的使用。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 最常见的 CSS 选择器是元素选择器。
程序员大腾
82 0
学习CSS的简单总结（2）
程序员大腾
|
数据采集 XML 前端开发
学习CSS的简单总结（1）
记录：CSS是什么；CSS三种方法的使用；CSS简单举例；推荐使用外部样式。
程序员大腾
89 0
学习CSS的简单总结（1）
爱编程的大李子
|
前端开发
CSS入门到进阶知识总结（三）
CSS入门到进阶知识总结
爱编程的大李子
99 0
CSS入门到进阶知识总结（三）
爱编程的大李子
|
人工智能 前端开发 容器
CSS入门到进阶知识总结（二）
CSS入门到进阶知识总结（二）
爱编程的大李子
143 0
CSS入门到进阶知识总结（二）
爱编程的大李子
|
前端开发 安全 JavaScript
CSS入门到进阶知识总结（一）
CSS入门到进阶知识总结
爱编程的大李子
131 0
CSS入门到进阶知识总结（一）
_揽
|
前端开发
CSS水平居中+垂直居中+水平/垂直居中的方法总结
CSS水平居中+垂直居中+水平/垂直居中的方法总结
_揽
189 0
CSS水平居中+垂直居中+水平/垂直居中的方法总结
hahacai
|
前端开发 UED
CSS3的3D相关属性总结
项目中遇到微交互、增加页面用户体验的需求，运用CSS3的transform变化的3D属性就可以达到效果。
hahacai
183 0
CSS3的3D相关属性总结