常思考->有目标->重实践->善反思

http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html语法： background-position : length || length background-position : position || position 取值： length  : 百分数 | 由浮点数字和单位标识符组成的长度值

文章的起因，我只是为了回复一个帖子，http://bbs.csdn.net/topics/390908928?page=1 结果，一扯就根本停不下来。索性，一捅为快，反正是周末。拿到效果图时，有这么几步，就我了解的情况做一下分享，不一定全部都是科学，但可以部分借鉴。我先说一下，熟练后拿到效果图时这样的一个状态：http://imcn.me/html/y2012/

http://www.cnblogs.com/jikey/p/3631292.html      这是一款用于http://jing-ui.com网站后台管理界面，也可以用于管理系统或其它通用后台界面。有时候我也在思考，一般的用户或者大部分用户他们是否需要像ext,easyui这样成型的界面解决方案，或许他们只是需要一款简洁，方便的一个界面模板，而这款的宗旨是，页面基本没有过多

http://www.cnblogs.com/jikey/p/4259360.html前言一.开发工具 - 前端四大利器1. WebStorm1). 岂今为止，业界公认的前端开发利器。优点：2). 缺点3). 相关资源4). 后续展望2. Photoshop1).基本信息：2). 提高切图效率思路之扩展：3). 切图的几个办法：3. Fire

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.vanseodesign.com/css/inline-blocks/，以及作者相关信息作者：St

http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html最近在看css样式，这个背景平铺的坐标问题还挺困扰我的。总是搞不清楚。写一篇博文还总结一下！！背景图片我画了一个200px*200px的方格。记为test.jpg其实是思考贴上的背景小图，与div边框之间的数据关系。从哪里开始贴的，横做坐标表示在哪个点。

转自：http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ 用来创建一个普通的列表,用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在标志对之间。 实例一：效果: 源码：[html] view plain copy >  htm

正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可

http://www.cnblogs.com/2050/p/3569509.html:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是

http://www.iyunlu.com/view/css-xhtml/55.html 浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 这是一个常用的div写法，下面我们来书写样

我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”，我是想不出

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=594接上回…五、浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。或许我们并没有

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：#example:before { content: "#"; color: red;}#example:after { content: "$"; color: red;}这段代码会在#examp

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。下面是所有值的用法描述。display本身意思是“显示、阵列”的意思值 描述none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-b

http://www.cnblogs.com/jikey/p/4240911.html#一-新浪的布局特点目录：一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点1. 常见布局方法2. 布局要点3. Debugger误区4.列表5.字体颜色6.CSS选择符7.CSS图片10. CSS半透明文章背景：这是一次内部交流会的PPT，

http://www.cnblogs.com/jikey/p/3604459.html一. css基础知识掌握之后(个人的标准是：弄清块元素与内联元素的区别，弄清float的应用场景，弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative['rɛlətɪvli] ,absolute['æbsəlut] ,fixed[fɪkst],i

作者：大狐狸链接：https://www.zhihu.com/question/36426051/answer/76031743来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。本来只是分享几条看法，没想到会有这么多人喜欢。我再补充一些，希望能对进阶中的程序朋友有帮助。手机敲得，比较凌乱。作为个人意见仅供参考。1.重构是程序员的主力技能。

http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.htmldisplay:block就是将元素显示为块级元素.　　block元素的特点是：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度　　, , , , 和 是块元素的例子。

一.CSS引入方法：行内式、嵌入式、导入式、链接式。    1、行内式。    即：在标签的style属性中设定CSS样式。    例子：行内式    2、嵌入式    即：将页面各种元素的设置集中写在标签里。    例子：                 div{ background-color:blue; }               3、

参考了《CSS彻底设计研究》的文章，说的很不错，所以拿来做笔记。 浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。CSS中有float属性，默认为none，也就是标准流通常的情况。如果将float属性设置为left或

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。显然标准流已经无法满足需求，这就要

http://www.cnblogs.com/ForEvErNoME/p/3383539.html什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢

CSS盒模型HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。使用Firebug，可以轻松地查看到盒子的布局大小。盒子本身的大小是这样计算的：width: width + padding-left +

CSS定位机制CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。 相对定位相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将

常用选择器元素选择器，即html标记如div,ul,li,p,h1~h6,table等。p { font-size:14px; }h1 { color:#F00; } 复合选择器， 由两个选择器直接构成，第一个必须是元素选择器，第二个必须是类选择器和ID选择器，这两个选择器之间不能有空格。p.special { color:#red}.special

http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html5. 图片宽度的自适应如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：　　img {max-width: 100%}但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为：

http://www.jianshu.com/p/802afaab545b一般情况下，css 根据class修改标签，js根据id修改标签。.A.B.C 与 .A .B .C 与 .A,.B,.C的区别(ABC分别为标签的class name).A.B.C 指同时包含三个class的标签.A .B .C 指在class 为A 的标签下的class 为B的标签下的class为C的

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。 一、快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签，比

合适的工具会事半功倍，当然也得把握分寸，要不就成了会得越多干的越多的“苦力者”。编辑类软件层出不群，各有所长，各有所短。找到一个合适的还真是难。还好有webstorm的出现，最近又是3.0的新版本发布。为什么这么说呢，她与其它的编辑器有什么不同：1. 任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的米号的

http://www.cnblogs.com/jikey/p/3607133.htmlweb前端开发乃及其它的相关开发，推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于，有个技术叫emmet, http://docs.emmet.io，而这两个对他的支持是：sublime text 是所有编辑器里边支持emmet比较

2. 大多数情况作用是一样的除去兼容性，大多数情况下，两者作用是一样的，甚至都很难想出不一样的理由。① 父容器height: auto，无论height:100%或者height:inherit表现都是auto.② 父容器定高height: 100px，无论height:100%或者height:inherit表现都是100px高.难道没有差异吗？难道没有使用height:inhe