Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念 第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与 ...

Flex的基本概念 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:flex; } 行内样式也可以使用Flex布局 .box{ ...

一个莫名其妙的属性：text-decoration，这个属性，其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了，通常会用在移除超链接的底线、或一些特殊强调的效果里头，但是这么容易的属性，为什么会莫名其妙呢？就让我们继续看下去~ 项 ...

新的一周开始了，冷风吹得人懒洋洋不想动弹.趁着总结iOS新特性之前继续学习CSS布局。 Absolute 绝对布局，破坏了流结构，会直接覆盖在其他流结构布局元素上。 position:absolute; ① 未设置left right bo ...

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个 ...

counter基本用法 在CSS里头，counter是个很有意思的功能，最常见得就是如果我们使用list清单，样式选择decimal十进制，当清单变多的时候数字也会跟着增加，底层貌似就是使用counter来做的，也因为counter所产生的 ...

网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C ...

parallax.jpg 引言 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。 其实，这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色 ...

html 加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成 ...

BFC BFC全称是Block Formatting Context，即块级格式化上下文。一句话概括，就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。 注意点：BFC 并不是元素，而是某些元素带有 ...