Flex（Flexible Box：弹性布局）布局，是 W3C 在2009年提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 1. Flex 基础逻辑 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross Continue reading

CSS的两种盒模型 在最近的工作中，经常遇到给元素设置了 padding 之后元素就超出了原来设定的宽高，就不得不加一个 box-sizing: border-box; 使得元素的内边距在其内部展示，但是对于为什么要使用该属性还是不太熟悉，故学习了一下并简单记录。 在前端的 CSS 工作模式中，每个元素都可以看做是一个盒子，这就是我们所说的盒模型、之所以会初上上述的问题是因为现存有两种盒模型： * W3C的标准盒模型 * IE的盒模型 1. W3C的标准盒模型 在标准的盒子模型中，widh指content部分的宽度 2. IE的盒模型 在IE盒子模型中，width Continue reading

css滤镜（filter）定义了元素的可视效果，如：模糊和饱和度。 npm滤镜库 1. 基本用法 修改所有的图片为黑白（灰度100%） css语法 1 2 3 4 img { filter: grayscale(100%); -webkit-filter: grayscale(100%); } JavaScript语法 1 document.getElementById('grayImg').style.WebkitFilter = "grayscale(100%)"; 2. 常用参数 Filter 描述 none 默认值，没有效果 blur(%) 高 Continue reading

CSS布局模型——流动/浮动/层模型 在网页中，元素有三种布局模型：流动模型，浮动模型和层模型； 1. 流动模型 default，默认文档流，就是块级元素都从左往右，自上而下的分布。 流动模型有两个特征： * 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，其默认宽度是100% * 内联元素都会在所处的包含元素内从左到右水平分布显示 2. 浮动模型 可实现两个块状元素在同一行显示，任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。 3. 层模型 层模型有三种形式： * 1、绝对 Continue reading

BFC布局 1. 概念 在解释 BFC 之前，我们先介绍 Box、Formatting Context的概念。 1. Box Box 是 CSS 布局的对象和基本单位， 就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 2. Formatting context Formatting context （格式化上下文） 是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区 Continue reading

在前端开发尤其是web开发中会经常调整元素位置，所以经常会遇到居中问题，对于水平居中我们都知道用简单的text-align:center;就可以实现，但是对于垂直居中却并不是那么简单实现的，往往需要多条代码合作才能实现其效果。 本文简单介绍几种垂直居中的方式，技术不高，水平有限，仅供参考。 1. 不知道自己高度和父元素高度时，只要使用绝对定位就可以实现 以下代码没有插图的都是实现的效果相同，如图所示： 当一个父元素没有明确限制高度，而只是靠着内部元素的高度撑起来其高度时，我们又要在该父元素中设置一个居中的框框就可以采取这种方式： 1 2 3 4 5 6 7 8 9 10 11 Continue reading