html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。先来看看下面的效果：。无特殊定位，对象遵循HTML定位规则。absolute :将对象从文档流中拖出，使用 lef

left、top、right、bottom是相对于当前元素自身进行偏移，不能独自存在，必须配合定位元素进行使用。如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移。设置了sticky的元素，在屏幕范围时该元素的位置并不受定

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生了变化，后面的内容位置也会随着发生变化。在标准流中，大部分标签是区分等级的，习惯将标签划分为几种常见的加载级别: 块级元素、行内元素、行内块级元素等。隐藏的

元素的定位属性主要包括定位模式和边偏移两部分。静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。在静态定位状态下，无法

就比如在网页中的一些广告，无论你怎么滑动网页都无法隐藏掉广告，这就运用到我们强大的CSS定位。CSS定位的内容包括：position（位置）:relative（相对） / absolute（绝对）/static （默认）/sticky（粘性）/ fixed

6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。使用 display 属性改变生成的框的类型。这样的话，该框

　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画。　　　　a、与其他行内元素并排；　　　　b、不能设置宽、高，默认的宽度，就是文字的宽度；　　　

它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素框从文档流完全删除，并相对于其包含块定位。文档流指的是元

position 定位属性，检索对象的定位方式；当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

我们其他的布局实现方式，都是基于正常的文档流来进行的。默认的文档流，确保在没有任何css样式的时候，还能够正确的渲染和显示内容。行内元素的height width与内容一致。正常布局流是一套在浏览器视口内放置、组织元素的系统。我们在传统的css布局当中，不

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。一切皆为

block元素无视float元素啥意思呢，就是A和B两个block(块级)元素在排队买东西，A在前面，那么B只能遵守规则突然A膨胀了，飘了，然后B就无视A,前进一步跑到A下面。but，如果此时A没有浮动，而B浮动了，此时他只漂浮在自己的位置上方。从俯视图看

为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重的偏科，CSS弱得很，所以我决定要重新学习CSS，从打好CS

CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染。如果不特殊指定，浏览器会默认当前的HTML渲染是按文档流模式。盒模型是css渲染的时候抽象于html标签在画布所占有区域，由CSS引擎根据文档中的内容所创建。盒模型是有两种标准的，一个是

block默认宽度100%，设置absolute，变成包裹内容二、position属性1、static 没有定位，元素出现在正常的文档流中，默认属性。DOM Tree中一些节点不会被放入到Render Tree中。

选择器注意点属性选择器[attr^=value] - 开头或全等[attr$=value] - 结尾或全等[attr*=value] - 包含值[attr~=value] - 字符串包含选择器组A > B - 直接子节点A + B - 下一个兄弟节点

《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。去float化 - float属性将会失效跟随性 - 根据原有位置脱离文档流放置无依赖绝对定位元素 —— 即未手动定位的绝对定位元素。无依赖绝对定位元

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。一切皆为

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，且脱离文档流。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到