普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布局，因此会表现出一些特性。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
即是说，absolute后，元素和浮动元素的特性差不多，只不过absolute脱离文档流，元素飘在天上，float还在凡间。
常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div
大家都知道，学习前端，有三大神器，html+css+js。如果用武学来比喻，html就好像骨架身躯，学习html就是习武之人所谓的打熬身体，身体底子好，习武才能又快又好，这个阶段，没有太多的捷径可走。而css就如你的拳脚功夫，武功招式。掌握了css，你才能正式算是一个习武之人。精妙的招式往往让你的武学充满美感和力量，优雅地击败敌人。而被人推崇之至的js呢，就是传说中最神秘的内功心法了。可以完美协调我们的身体和招式，打的敌人无可招架。俗话说外练筋骨皮，内练一口气，只有身体招式心法都练到炉火纯青，你的武学才算是融会贯通。
CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。原因有两方面：一是等待浏览器支持的时间太长，导致这个特性被遗忘；二是大部分开发者并不完全理解它的工作原理。
第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往需要很长的时间才能完成，到时候它的功能已经被人们遗忘了。
无依赖绝对定位元素可以使用margin值进行定位，实现脱离文档流的相对定位效果，脱离文档流可以解决溢出限制的问题
CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。position 属性有4个值：static、relative、absoulte、fixed，默认值为 static。
值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；
2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置
前言 刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到Document flow(文档流)的资料。后来终于知道是某位大神将Normal flow翻译为文档流而已。。。。。。而我更偏好它的直译"常规流"，或直接引用英文名词就好了。 Normal flow到底啥意思啊？ 首先我们
前言 《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时，line box的左右边框会与所属的containing block的左右content edge相接触。那到底什么是containing block(abbr. CB)呢？ containing block在CSS的visual formatting model中十分重要的理论基础，因为盒子的宽/高度自动值/相对值的计算，相对/浮动/绝对定位，均依赖conta
定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
CSS基础 CSS基础知识 选择器（重要！！！） 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础知识 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 如下列代码： <head> <style type="text/css"> p{ font-size:20
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园
定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。
CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ;
1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表
margine 正常情况下使用 , 设置 float 浮动 , 使得相邻的盒子模型紧贴在一起 ;
一、简单介绍 1、html，是hyper text markup language的缩写，中文为“超文本标记语言”。 2、html不是编程语言而是一种标记语言。 二、标签与元素 1、html标签：如(两个尖括号加上一个元素名，是开始标签,是结束标签)。 2、html元素：元素内容（开始与结束标签加上内容）。 3、一般的html标签都有开始和结束标签，但是有些是空标签，即没有结束标签和元素内容。如<link012
CSS的四种引入方式： 一、行内样式 cairui 二、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: blue; color:
css堆叠上下文不知道在你的业务中有没有遇到过，前段时间搭建vuepress1.0就遇到这样的一个类似的问题，主要是用了vuepress-reco这个主题,去官方提了一个issue[1],自己提的issue最后自己找到原因了，但是还是有小伙伴遇到同样的类似问题,今天一起探讨一下css堆叠上下文的问题
本文总结了主流的几种 CSS 的布局方法，无论你是一个想要学习 CSS 布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。
本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。
拥有布局的元素负责自身及其子元素的尺寸及定位，而没有布局的元素仅仅能依靠近期的祖先元素进行控制。
1 文档流 要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。 而正常文档流就是在不用样式控制之下，html元素的默认排版方式。它的规则如下： 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行 独占一行 从左向右 这是在不使用 样式的请况之下正常排列方式。倘若使用样式改变了某些元素的位置，那么就称为脱离文档流。也正是因为如此，才能有丰富的页面布局方式。否则大家都只是遵循上述两种方
CSS定位在布局的时候绝对是一大主力，从css1的浮动到css2定位支持远胜对其他的支持到现在css3定位的稳定，css的定位的地位不言而喻。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：
相对定位就是移动一个标签，根据什么来移动呢？对了，就是根据它原来的位置移动，就这么简单。比如，我现在要移动这块场地，就这样做：
《2》。对于绝对定位：对于上面的浮动的div1,div2,div3，我们还可以通过绝对定位对其进行设置。如：
网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
Day6:html和css 复习 达叔与他的朋友们-复习.png margin: 0; padding: 0; 效果 <!DOCTYPE html> <html lang="en"> <head>
1. 页面常用布局 常用的页面布局方式主要有：浮动，弹性盒子，定位，设置表格模式，行内与块级相结合。 布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与父容器 嵌套使用,各中关系 内容会自适应 效果有局限性，行内块之间有缝隙 1.1.浮动布局（Float） 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现
前端的三剑客指的是 HTML、CSS 和 JavaScript，下面是一些常见的前端三剑客面试题及其答案
行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。
HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。
布局的三种基本方式： 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 浮动最开始是做图文绕排的。
简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而后面的对象流向对象的左侧(取消独占一行的行为，允许别人与其一行，其实是这个块从文档流中分离出来，他之后的对象视它不存在)
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
