MoveLikeRabbit的博客

弹性布局 2009年，W3C 提出了一种新的方案—-Flex 布局（弹性布局），可以简便、完整、响应式地实现各种页面布局。 传统盒子模型： 一般的布局我们都是用的盒子模型，通过浮动 定位来布局。 行元素、行内块元素不换行，块元素独占一行的。 利用浮动可以使块元素横排。 但是某些特殊的布局，它们很难实现。比如 垂直居中。 设置弹性盒子之后，盒子内部的元素没有行元素与块

让我们从一些背景资料开始，当一个元素的外观的可见性visibility发生改变的时候，重绘(repaint)也随之发生，但是不影响布局。类似的例子包括：outline, visibility, or background color。根据Opera浏览器，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。而回流更是性能的关键因为其变化涉及到部分页面（或是整个页面）的布局。一个元素的回流导致了其所有

横竖屏限制问题<meta name = "x5-orientation" content="portrait | landscape" /> 只支持x5内核 <meta name = "screen-orientation" content="portrait" /> 只支持UC浏览器 全屏限制问题<meta name = "x5-fullscreen" content="true" />

最近在复习HTML 和 CSS，把以前做的一些小例子拿出来分享一下，也加深自己的印象css 是通过 transform 来实现3D旋转的，看代码之前，先复习一下相关知识 transform-origin 规定了转换的中心点 ，定义场景，也就是灭点，2D 转换可以设置 x轴和y轴，3D转换还能设置 z轴 语法：transform-origin: x-axis y-axis z-axis; tran

目标：用css写出如下图形思路 分析一下，要写出这个图形并不难，我数数，总共有4个同心圆，和8个圆角矩形，需要8+4=12个DOM节点，似乎离一个还有很远 如果用border写同心圆，可以减少2个圆 如果加上before 和 after 伪类又可以减少2个节点 如果巧用box-shadow ，一个div 足矣！