一生为追梦的博客

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。#box{ display: flex; width: 500px; height: 300px; border: 10px soli...

先说一下flex一系列属性：一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列==左对齐）　　　　　　　　　　※ flex-direction:row-reverse （与row 相反）　　　　　　　　　　 ※ flex-direction:column （从上往下排列==顶对齐）　　　　　　　　　　※ ...

css动画主要用到三个属性：transition、animation、transform，通过这三个属性可以实现transition过渡：初始状态到终止状态的平滑过渡，animation动画：当前样式逐渐改为新样式，transform变换：改变某个元素形状、大小、位置。js动画要稍微灵活一些，使用setInterval() 方法定时循环改变元素

IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同IE版本浏览器导入不同html元素，如：样式表，html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。让我们举几个例子来看看：1、只有IE才能识别 123<!--[if IE]>

原址：点击打开链接前端构建：Less入了个门一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）  众多CSS预处理器中Less

今天开始学习使用less这个强大方便的前端工具，本来是考虑用koala（专门编辑less的软件）来使用less的，但是发现sublime编辑器也可以实现对less的编译及高亮显示代码，这样既能少用一个软件还能扩展sublime的功能，何乐而不为，于是赶紧去网上查了资料并加以整理。1、在sublime里安装好less（less语法高亮功能插件）和Less2Css（编译功能插件）这两个插件，具

伪类：作用是对所选元素做操作时加一些样式，或者对所选元素的子元素加样式。语法：标签:伪类动作{属性:值}selector : pseudo-class {property: value}标签.标签的类:伪类动作{属性:值}selector.class : pseudo-class {property: value}伪类可以有的动作：

相对定位：层级关系为：效果图：为改变参照物（橘色框）后的效果层级关系为：效果图：参照物为最顶级的元素情况。层级关系为：效果图： 仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-righ

常见浏览器兼容性问题与解决方案　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类：　　第一类是精确按照...