音韵者天

这是display的一个属性，规定元素生成的框类型为“行内块元素”，早在CSS2已经被广泛支持。所谓行内块元素，就是既有行内元素的性质（排在一行）又有块级元素的性质（能设置宽高）。当然行内元素有占位属性的也能设置宽高，比如IMG，这里只是针对绝大多数。 既然属性的兼容性很好，那么对于前端来说是很激动的一件事。所以我一般在需要横排的结构数量较少时会选择该属性。inline-block默认间距。

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

一、什么是CSS预处器CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform

几何图形分两种，一种是由线段构成的，一种是由弧线构成的，下面将利用canvas绘制一个矩形和圆形。canvascanvas是HTML5引入的一个定义图形的标签，相当于一个容器，所以图形的绘制还必须用脚本来完成。绘制矩形html<canvas id="canvas">你的浏览器居然不支持Canvas？</canvas>jsvar canvas = document.getElementById("ca

在这里将会收集相关经典的css hack 布局的一些例子。让一个尺寸不定的div距离浏览器上下左右都为10px//cssdiv{ border:1px solid red; position: fixed; left: 50px; right: 50px; top: 50px; bottom: 50px;}//html<div></div>fo

一、使用text-align: center;居中对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。/*css*/div{ border:1px solid red; text-align: center; width: 200px;}div span{ width: 100px

「node.getAttribute(‘someAttribute’)」获取的是「attribute」，而「node.someAttribute」获取的是元素的「property」，二者并不相同。在大多数情况下「property」和「attribute」是同步的，如场景1。场景1：<input id="username" type="text"><script>var userInput = d

定义overflow 属性规定当内容溢出元素框时发生的事情。visible： 默认值。内容不会被修剪，会呈现在元素框之外。hidden： 内容会被修剪，并且其余内容是不可见的。scroll： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit： 规定应该从父元素继承 ove

本文由大漠根据Chris Mills的《Flexbox — fast track to layout nirvana?》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://dev.opera.com/articles/view/flexbox-basics/，以及作者相关信息 ——作者：Chris Mills ——译者：大

最近写了一个静态页面的时候，出现了一个不常见bug，布局在safari下会出现错乱，但是在firefox、chrome、甚至低版本的IE下都是正常的。仔细排查之后才发现原来是一个弹窗modal的z-index影响的，该弹窗css设置如下：.dialog{ position: fixed; z-index: -1; top: 50%; left: 50%; ov

在网页开发中经常遇到内容不足一屏幕时，footer显示的问题。通常footer是需要公用的，所以在一些内容较少的页面就会出现footer下面留空白。以下是几种常见的解决办法：1. css解决办法。这种是通过负值外补丁来实现的。 html, body { height: 100%;} #wrapper { min-height: 100%;} /*#wrapper 是除foot

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。*：通用元素选择器* { margin: 0; padding: 0; }*选择器是选择页面上的全部元素