Css
实现CSS等分布局的5种方式
等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的5种方式 float 【思路一】float 缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差【1】float+padding+background-clip 使用padding来实现子元素之...
CSS三列布局
前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应思路一: float【1】float+margin+ calc<style>...
CSS实现水平垂直同时居中的6种思路
水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的6种思路 水平对齐+行高【思路一】text-align+line-height实现单行文本水平垂直居中<style>.test{text-align:center;line-height:100px;}</style>&...
CSS实现垂直居中的5种思路
相对于水平居中，人们对于垂直居中略显为难，大部分原因是vertical-align不能正确使用。实际上，实现垂直居中也是围绕几个思路展开的。本文将介绍关于垂直居中的5种思路 line-height【思路一】：行高line-height实现单行文本垂直居中 行内流传着一种说法，单行文本垂直居中要将高度和行...
CSS实现水平居中的5种思路
水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的5种思路 text-align【思路一】：在父元素中设置text-align:center实现行内元素水平居中 将子元素的display设置为inline-block，使子元素变成行内...
深入理解CSS径向渐变radial-gradient
上篇介绍了线性渐变，本文接着介绍径向渐变的内容 定义 径向渐变，实际上就是椭圆渐变，圆只是一种特殊的椭圆而已。径向渐变从圆心点以椭圆形状向外扩散，渐变的实现由两部分组成：椭圆和色标。椭圆部分用来控制径向渐变的位置、大小和形状等。而色标部分包含一个颜色值和一个位置，用来控制渐变的颜色变化 [注意]saf...
深入理解CSS动画animation
transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识 定义 和transition类似，animation也是一个复合属性，包括animation-na...
深入理解CSS线性渐变linear-gradient
在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变两种，本文介绍线性渐变。 定义 渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的...
深入理解CSS变形transform(3d)
本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility ...
CSS变形transform(2d)
CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本文将详细介绍变形t...
CSS旧版flex及兼容
flex弹性盒模型有3个版本:旧版本、混合版本和新版本。如果要保证flex弹性盒模型在各个主流浏览器上表现一致，就必须掌握这3个版本的不同用法。深入理解CSS弹性盒模型flex已经详细介绍过其基本用法，本文主要介绍旧版本flex的不同之处及兼容写法 适用范围 旧版本flex是指最早的flex版本，该版本...
CSS多列布局
CSS新增了多列布局特性，可以让浏览器确定何时结束一列和开始下一列，无需任何额外的标记。简单来说，就是CSS3多列布局可以自动将内容按指定的列数排列，这种特性实现的布局效果和报纸、杂志类排版非常相似。本文将详细介绍CSS多列布局的基本属性和用法 列宽 column-width主要用于给元素指...
CSS文本方向
一般地，正常网页文本方向都是从上到下，从左到右。实际上，有多种设置文本方向的属性，前面已经详细介绍过text-align，HTML全局属性中有一个"dir"属性就是专门用来设置文本方向的，设置文本方向的CSS样式有direction、unicode-bidi和writing-mode。本文将详细介绍网页文本方向的设...
深入理解CSS弹性盒模型flex
CSS3引入了一种新的布局模型——flex布局。flex是flexiblebox的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺...
CSS中常见的6种文本样式
CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。本文将详细介绍文本相关样式 首行缩进定义 首行缩进是将段落的第一行缩进，这是常用的文本格式化效果。一般地，中...
