温故而知我不懂的CSS

时间 2019-11-06

标签温故不懂 css 栏目 CSS 繁體版

原文原文链接

❗️咱们是否想过没有CSS对HTML标签元素的影响，那么咱们的标签在浏览器是什么样形式存在的？CSS对HTML标签元素到底产生了什么影响？又作了什么规则限定？来聊聊吧！！！css

CSS 做为一门标记性语言，可是它的简单易学，不少开发者都不知道它是一门语言，语言的东西一定具有诸多概念，可是咱们会每每忽略这些概念，确实，就算你不知道这些概念，你仅仅知道这些样式是干什么的，都能写出一张复杂的页面，因此咱们不止要作到会用，并且要理解实质性的原理而不是只知道这些样式是仅仅作什么的，因此痛定思痛，好好温故而知新吧html

流（Normal flow）

Normal flow直译为正常流，可是为何称为文档流，却是很好奇，会给人别人容易产生误会，因此一下的介绍中，咱们都是以流的形式称呼算法

流：“流”其实是 CSS世界中的一种基本的定位和布局机制，能够理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有殊途同归的表现。浏览器

CSS世界

有同窗可能听到CSS世界这个概念似懂非懂，这个概念出自**张鑫旭大佬的《CSS世界》**,个人理解是世界就是一张咱们布局完的网页，而如何造成这个世界就是CSS去规定的布局

那经过这个流咱们来理解CSS的元素在这个流是怎么布局的,首先来看看CSS流布局（你能够理解为标签元素在流默认以什么形式布局的）中，咱们的HTML的<div>和<span>正好是CSS中块级元素和内联级元素的表明，你能够把div理解成水，span是木块，如图：flex

举个例子：动画

style>
    .demo {
      height: 100px;
      background: lightblue;
    }
    .span1 {
      background: red;
    }
  </style>
  <body>
    <div class="demo">div</div>
    <span class="span1">span</span>
    <span class="span1">span</span>
  </body>
复制代码

效果图：spa

👆上述的div占满了一整行(没有声明width:100%的状况下)，像水同样铺满容器,而span则是像木头同样依次排列设计

因此总结一句：所谓“流”，就是CSS中引导元素排列和定位的一条看不见的“水流”，在这个流中，咱们的块级元素和内联级元素默认都有与其对应的排列和定位code

流是如何影响整个CSS世界的

CSS2.1 时代，咱们直接称 CSS 为“流的世界”真是一点儿也不为过，整个 CSS 世界几乎就是围绕“流”来创建的，那么流是如何影响整个 CSS 世界的呢？

由于 CSS 世界的基石是 HTML，因此只要让 HTML **默认**的表现符合“流”，那么整个 CSS 世界就能够被“流”统治，而事实就是如此！
特殊布局与流的破坏。若是所有都是以默认的“流”来渲染，咱们只能实现相似 W3C 那样的文档网页，可是，实际的网页是有不少复杂的布局的，怎么办？能够经过破坏“流”来实现特殊布局。实际上，仍是和“流”打交道。
流向的改变。默认的流向是“一江春水向东流”，以及“飞流直下三千尺”。然而，这种流向咱们是能够改变的，可让CSS的展示更为丰富。❗️所以，“文档流从左往右自上而下”这种说法是不严谨的，你们必定要纠正过来。

什么是流体布局

❗️流体布局不是什么新技术，实际开发中咱们已经百分百使用过的，并且是必备的技巧

世界的造成须要咱们去搭建(布局)，在流的世界中固然用流的方式去搭建（布局）了,所谓“流体布局”，指的是利用元素“流”的特性实现的各种布局效果。由于“流”自己具备自适应特性，因此“流体布局”每每都是具备自适应性的。可是，“流体布局”并不等同于 “自适应布局”。“自适应布局”是对凡是具备自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也能够设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”

好比上述这个demo就是流体布局的一种体现

CSS 中最经常使用的魔法石，也就是最常使用的 HTML 标签，是<div>，而<div>是典型的具备“流”特性的元素，所以，曾经风靡的“DIV+CSS 布局”，实际上指的就是这里的“流体布局”。

CSS 新世界——CSS3

布局更为丰富

移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的 srcset 属性、CSS 的 object-fit 属性
弹性盒子布局（flexible box layout）终于熬出了头
格栅布局（grid layout）姗姗来迟

视觉表现长足进步

圆角、阴影和渐变让元素更有质感
transform 变换让元素有更多可能。
filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
animation 让动画变得很是简单

盒模型

❗️假设咱们HTMl标签元素在没有CSS的影响下，是以什么形式存在的，有人可能会想到以盒子形式存在的,实际则否则，HTMl标签元素在浏览器中具体的存在形式是被CSS所定义的，也就是说的盒模型，就至关于出来一种MSS标记性语言（虚拟的语言）定义HTML标签元素为圆形模型

MDN是这样定义的：CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型(算法机制)来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

❗️HTML标签元素在CSS规则下是盒子形式存在，若是没有被CSS影响，HTML标签元素可能不是以盒子形式存在，而且，CSS世界存在流(CSS世界中的一种基本的定位和布局机制)，在流的多个规则下，盒子就具有不一样的规则，不一样的规则（好比BFC、IFC、FFC、GFC）影响着盒子的排列，因此咱们把这种盒子也叫作正常流的盒子👇咱们会在CSS规则中讲到

举个例子：

.demo {
      height: 100px;
      background: lightblue;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>
复制代码

如👆的图能够看出，这个就是盒模型

盒模型分为IE盒模型和W3C标准盒模型。咱们在👇下面会讲述到，先来看看盒子是怎么造成的吧

视觉格式化模型(visual formatting model)

❗️视觉格式化模不是一种盒模型类型，而是一种算法机制,具体能够去看看W3C

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一

盒子的生成

MDN解释：盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不一样的类型，不一样类型的盒子的格式化方法（也叫格式化上下文）也有所不一样。盒子的类型取决于 CSS display 属性。

❗️咱们来理解上面👆这句话吧，盒子的生成是经过视觉格式化模型，而生成的盒子处于格式化上下文，由于有不一样的格式化上下文,格式化上下文(formatting context) 是定义盒子环境的规则，不一样格式化上下文(formatting context)下的盒子有不一样的表现。也就是盒子经过视觉格式化模型出生，出生后被一种规则限制,可能有同窗对格式化上下文有点难以理解，不要紧，我也懵逼，因此接下来会在👇CSS规则章节讲到

W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding。

举个例子：

<style> .demo { width: 200px; height: 100px; padding: 20px 20px; background: lightblue; border: 10px solid red; } </style>
  <body>
    <div class="demo">div</div>
  </body>
复制代码

效果图：

能够看到标准盒模型中， width = 内容的宽度、height = 内容的高度，如上图中height等于内容的高度为100px，width等于内容的宽度为100px

IE盒模型：

属性width,height包含border和padding，指的是content+padding+border。

举个例子：

.demo {
      box-sizing: border-box; /* 表明为IE盒模型 */
      width: 200px;
      height: 100px;
      padding: 20px 20px;
      background: lightblue;
      border: 10px solid red;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>
复制代码

效果图：

能够看到，IE盒模型中，width = border + padding + 内容的宽度,height = border + padding + 内容的高度,如上图height = border 10px*2+ padding20px*2 + 内容的高度40px=100px,width = border 10px*2 + padding 20px*2+ 内容的宽度 140px=200px

box-sizing属性更改盒模型

❗️CSS 中的 box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。

IE模型不是一无所用，开发中咱们有时候会改变padding的值，这样会影响到整个盒子的区域面积，咱们还得手动计算改width或者height，这样显然影响效率，这时候IE盒模型的做用就来了，咱们只要按照设计师给的盒子固定区域，写死，给我写死就行！！！,咱们将盒子转化为IE盒模型，咱们无论怎么改变padding或者border，区域面积永远固定在哪里

box-sizing:content-box /*（标准盒模型）*/
box-sizing:border-box /*（IE盒模型）*/
复制代码

在ie8+浏览器中使用哪一个盒模型能够由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；若是将box-sizing设为border-box则用的是IE盒模型。若是在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是能够经过box-sizing自由的进行切换的

CSS流的规则

“流”之因此影响了整个 CSS 世界，就是由于影响了 CSS 世界的基石 HTML。那具体是如何影响的呢？

❗️❗️❗️什么是格式化上下文（Fatting context）

前面咱们反复讲到的格式化上下文究竟是什么东东？查阅了W3C获得的是这句话:Boxes in the normal flow belong to a formatting context意思是正常流的盒子属于格式化上下文，前面咱们讲到不一样格式化上下文(formatting context)下的盒子有不一样的表现，咱们知道正常流的盒子属于格式化上下文，那么格式化上下文就是制定规则的区域，那么你们想一想，想到规则会想起CSS的谁？也就是流, 在个人理解里:。FC就是咱们的流，它是页面中的一块渲染区域，有一套渲染规则(如何理解块级格式化上下文BFC(block formatting context)?),那么流中具备不一样的规则，好比BFC、IFC、FFC、GFC,下面咱们逐个击破它们吧

BFC与块级元素

IFC与内联级元素

❗️在讲块级元素和内联元素以前，咱们会这样想块级元素：老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示,内联元素：和相邻的内联元素在同一行，的确能够这样理解，可是有没有想过就是这些元素为何会具有这些属性？与其说具有这些属性，倒不如说HTML标签元素被不一样的规则所影响，致使拥有不一样的属性

HTML 常见的标签有<div>、<p>、<li>和<table>以及<span>、<img>、<strong> 和<em>等。虽然标签种类繁多，但一般咱们就把它们分为两类：块级元素（block-level element）和内联元素（inline element）。

持续更新......

1. 温故而知新
2. React Hooks 温故而知新
3. 温故而知新---Java（一）
4. 温故而知新 Spring MVC
5. 温故而知新--day4
6. 温故而知新之HTTPS
7. 温故而知新——UML
8. 温故而知新--day1
9. 温故而知新--day3
10. 我的温故与知新
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• SpringBoot中properties文件不能自动提示解决方法
• IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决