前言

最近几周我一直在看 CSS 规范，下来感受就是，真·心乱如麻。也就是 CSS 是真的简单，真的，你说你 JS 巨佬，我膜拜，HTML 大师，我 respect，CSS 专家，呃，你是写规范的吗，出来咱俩比划比划，别怪我不讲武德。

对于 CSS 本身，真的可以做到战略上藐视。只要你对它的知识体系有一个逻辑合理且基本完备的认知，所有的问题都不过是技巧层面的。

当然，由于 CSS 如何起效、如何表现最后其实是浏览器说了算，因此单纯地从 CSS 语言角度出发是无法获得完整的应用知识的，这是后话，暂且不表，这篇文章我们主要来讲一讲布局方面的知识。

1 CSS 有哪些布局模式？

考虑到网页排版的（早期）需求，CSS2 规范中描述了 “视觉格式化模型” 。在这个模型中，文档树上的每个元素都基于 “盒子模型” 生成了 0 个或多个盒子，而这些盒子依据如下内容排版：

盒子的维度属性（dimensions，也就是宽高边距这些）和类型（type，由 display 属性决定）
位置约束（正常流、浮动、绝对定位）
文档树中元素的关系（后代、子代、sibling、preceding）
外部信息（比如 viewport size，图片维度等）

其实理论上这一套东西也够用了，只是想要达到某些效果需要使用各种复杂

【前端圭臬】五：CSS 核心机制——布局相关推荐

[19/06/07-星期五] CSS基础_布局定位背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录弹性布局: 定位: overflow溢出: 表单: vue数据存取: vuex store 全局数据: vux弹窗,软提示,硬提示 ElementUI MessageBox 弹框简单用法背景设 ...
【前端圭臬】一：写给入坑前端的你
专栏目录导论 [前端圭臬]一:写给入坑前端的你 HTML 篇 [前端圭臬]二:你知道的和不知道的 HTML CSS 篇 [前端圭臬]三:详解 CSS 选择器 [前端圭臬]四:CSS 核心机制--如何 ...
前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
CSS三列布局（五种方式）
/*前提:左右宽度为300px,高度为100px,中间宽度自适应*/* {margin: 0;padding: 0; } <!DOCTYPE html> <html lang=&qu ...

【前端圭臬】五：CSS 核心机制——布局

前言

1 CSS 有哪些布局模式？

【前端圭臬】五：CSS 核心机制——布局相关推荐

最新文章

热门文章