clearclearing的博客

display:box;display:webkit-box;display:moz-box; display:flex;display：webkt-flex; 两者都属于弹性盒子布局，前者是09年开始的，而后者是12年开始进行的。但是在使用的时候，后者还不能完全代替前者，所以为了浏览器的兼容，最好都写上。今天主要来认识一下display:flex；它能很好的解决前端页面居中问题。首先在父容器

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。 下面这段代码，做过移动端项目的同学一定不会陌生。 假设你已经见过上面的代码

作者：郑航 链接：https://www.zhihu.com/question/21679928/answer/84884920 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 早期的Web前端开发者中流传着这些描述了CSS编写方式的名词： 固定布局：顾名思义，网页上的所有元素的尺寸一律使用px作为单位。这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。(链接元素比如新窗口打开，img元素比如保存图像等等) touch-callout:none： 系统默认菜单被禁用 touch-callout:inherit： 系统默认菜单不被禁用

标准盒子模型：content+(padding+border+margin)*2 怪异盒子模型：conten+margin*2      //conent已经包括来padding和border（当不对doctype进行解析时会出现这种） 弹性盒子模型：相比传统的盒子模型。该模型能很轻松的创造出自适应的弹性流动布局和自适应的字体 .parent{ width: 900px;

块级元素：div、dl、dt、ul、ol、li、h1--h6、p、table、th、tr、hr 行内元素：img、span、input、strong、i、em、br、lable、tt 注意：行内元素不能设置width、height、margin、padding；只能通过line-hight来设置

1、IE6怪异解析之padding与border算入宽高  原因：未加文档声明造成非盒模型解析  解决方法：加入文档声明  2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）  解决方法：display:inline  3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲

优化方案 资源加载 1.首屏加载：在1s内内容加载完毕，loading进度条消失； 2.延时加载：先加载屏幕可视范围内的资源，其他的在之后通过网络加载； 3.滚屏加载：一种常见的动态无刷新数据加载方法， 4.响应式加载：在分辨率不同的手机上使用不同的css，加载不同的图片资源； 5.第三方资源异步加载：引用第三方资源时，要充分考虑他们的性能影响，使用异步加载，防止其加载影响页面的加载；