问题最近的开发中有遇到一个页面样式的兼容性问题，大致是使用 flex 布局的两个嵌套弹性盒子，在 Chrome 和 Safari 中对一些特殊情况的处理行为不一致，从而产生了测试 bug； 复现下面将问题简化为了一个 demo 模型，一个定

css单位px常用的单位，即像素pixel缩写，但通常被当做绝对单位，但严格说并不是，因为官方考虑到观看不同设备显示屏时，使网页设计出的某一图形的显示大小在人眼中的观看效果差不多，而定义的一个相对值，即人以一臂之遥观看96DPI的显示屏的角

HTML中元素有三种布局模型：流动模型、浮动模型、层模型。 流动模型（flow）HTML网页默认布局就是流动模型，布局如下： 块级元素(block)**自上而下垂直分布，因为块级元素默认宽度为浏览器窗口的100%，或者理解为每个块级元素默认

水平居中HTML中要实现某一内容水平居中显示，要通过设置css样式来实现，主要分为行内元素和块状元素两种情况，块状元素又可分为块状定宽与块状不定宽两种情况，接下来依次介绍分析。 行内元素像 a、span、i 这类元素叫做行内元素，文本和图片

文章出自个人博客https://knightyun.github.io/2018/05/02/css-selector，转载请申明 目录 基础 选择器 元素选择器 类选择器 ID选择器 ID选择器与类选择器的区别 子选择器 后代选

目录 目录 关于坐标轴 2D变换 translate(x,y) rotate(deg) scale(x,y) skew(xdeg,ydeg) matrix(a,b,c,d,e) 3D变换 translate3d(x,y,z) rota

CSS3中出现很多新的特性，下面就讲一下其中比较好玩的3D操作，过渡和动画效果； 过渡(transition)过渡就是使瞬间的样式变化，按照一定方式变得缓慢平缓； 例如鼠标划过超链接时颜色的变化，点击按钮后的颜色变化等，默认转化都是瞬间完成

CSS是个很强大的网页开发工具，使生硬的网页变得丰富绚丽，css能实现很多效果，比如css3中的过渡与动画效果都很好看，最基本的就是画一个具有长宽的矩形，通过设置 border-radius 又能实现画圆形和椭圆形，但是其他多边形似乎没有直

CSS3中一些新功能也是目前导致各大浏览器不兼容的一个原因，这些新功能的出现，浏览器厂商们变便开始尝试融合、试验，所以就在这些功能前加上自己的特定前缀来执行自己的特定解决方法，为了让这些功能能在完全确认下来前使用； 下面就是我们经常用到的前