边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。为h2改进代码如下： h2 {

转自：http://sojuker.blog.163.com/blog/static/1387908792012760243916/1、基本概念1.  基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。2. 内容区内容区是指底线和顶线包裹的区域（行内元素display：inline可

转自：http://blog.jobbole.com/28681/LESS 背景介绍LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码，在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了（例如 Twitter 提供的 bootstrap 库就使用了 LESS）。那么，LESS 是从何而来呢？它和 SASS 等样式表语言又有何区别呢？图 1.LES

接着第一篇布局（一）——流体浮动三列布局，我进一步学习了流体定位布局，在布局一的代码基础上进行了一些修改，这里做作总结。流体定位三列布局代码实现html代码css文件代码：//1.流体定位核心——没有float设置，而用position：absolute进行设置//2.三列设置技巧——左右两列设置为绝对定位，中间的块采用漂移法

float的特性 ：1：使元素block块级化；2：破坏性造成的紧密排列特性。基于以上的特性，使得我们通常把浮动用来布局，带来的问题是，容易出问题，重用性不行，ie6-的版本下很多问题，因为它是要求固定的宽度，宽度计算错误就会带来整个布局的错乱。float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局，所以float浮动带来的父元素高度没有的问

来自：http://www.javascript100.com/?p=756浏览器默认的滚动条样子太过屌丝了，得自己动手整整。记得IE浏览器有几个设置滚条的样式，不过比较鸡肋，只能设置颜色之类的，而且webkit下面也不支持。无意间看到网易邮箱的滚动条样子很好看，一开始以为是用div模拟的，结果一看，吼吼，正合我意，利用的CSS来设置的，而且是webkit浏览器的。得好

绝对路径 相对路径转自：http://www.cnblogs.com/heyonggang/archive/2013/03/01/2938984.html在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。  1.绝对路径    绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局

转自：http://www.html5cn.org/article-4433-1.html   译者注：网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，很少或者没有涉及垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而css3中的多列布局的也使其显得更为重要，因此还是很有必要去了解学习，至少也是一种思路。——————————译文—————————

转自：前端开发-武方博 http://www.wufangbo.com/css-ju-zhong/CSS的居中有水平居中和垂直居中，这两种居中又分为行内元素居中和块级元素居中，不同的居中用不同方法。水平居中1、行内元素水平居中（文本，图片）给父层设置 text-align:center; 可以实现行内元素水平居中。.cen

[html] view plaincopyprint?>  html lang="en">  head>    meta charset="UTF-8">    title>居中分页DIV CSStitle>    style>   .pages{text-align: center;}  .pages li{display: inline-block;margin:5px 1px

布局3——固定浮动布局，特点：3. 固定浮动布局  规格：固定大小，不能随着视窗改变  采用：浮动布局  兼容：兼容当前主流浏览器实践部分html代码css代码// 1.所谓固定浮动——固定大小，不能随着视窗改变// 2.固定——设置块状width为像素值// 3.中间两列的浮动——首先在两列下方在加一层块（div

今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。    根据李炎恢老师总结的4种布局，分为：    1.流体浮动布局    2. 流体定位布局    3. 固定浮动布局    4. 固定定位布局1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位）规格：当视窗变化时跟着变

转自：http://blog.jobbole.com/37112/很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家写在前面的话：由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。如果读者理解CSS盒子模型，但对于浮动不理解，那么这

css字体一、基础介绍1、“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em ,16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em

转自：http://blog.163.com/amy0713@126/blog/static/13704853720118682245526/一：绝对定位position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

浮动是一个很有用的属性，对于网页布局，特殊效果的实现都很有用。float的基本原理 float:left;//元素向左浮动 float:right;//元素向右浮动为div1设置 float：left之后div为块级元素，所以每次新建都会另起一行。我们想象一下，这些未设置浮动的div盒子是在一个文档流内（假想一个平面内），当设置div1为左浮动后，他就在另一个高于

CSS—盒子模型(a)W3C组织，建议把所有网页上的对象都放在一个“盒子”中—盒子模型。盒子模型主要适用于块级元素。盒子模型主要定义元素的四个区域：内容，内边距，边框，外边距；分别对应元素的四个属性：content、padding、border、margin。设计师，通过控制盒子的属性，进而完成网页设计。盒子模型的在页面中所占的宽度是：左外边距+左边宽+左内边距+内

CSS—position不知道，看我写 前端知识的程序员们，有没有和我一样的感觉，我每次写完html结构，然后写css样式内容时，心里有一个样子，但是实现后，ctrl+save确是另一个样子，心里真是不爽啊。对于position这个属性，我每次设置他的时候，都会或多或少有点意外。面试过两三次，但是却没有被问到这个，心里还是有侥幸的心理的。position

指定字体CSS的font-family命令，指定了网页元素所使用的字体，如font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;规则是优先使用排在前面的字体如果找不到该

CSS—定位CSS有三种基本的定位机制：普通流、浮动、绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。没有任何定位修饰效果块级元素从上到下一个接一个地排列，元素之间的垂直距离是由元素的垂直外边距计算出来。行内元素在一行中水平布置。如图中P标签内的span，超链接，图片。

CSS —表格基本知识table的基本格式这篇里面，写了表格基本用到的标签。但是出于兼容性，不考虑theadtbody tfoot未修饰的效果依据属性设置表格borderborder-spacing 效果border-spacing设置边框之间的距离，一个值代表水平边框之间的距离，两个值分别代表水平与垂直之间的距离。b

什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过UI控件来改变浏览器默认的字体大小。弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5e

使用 CSS3 中的伪类渲染表格CSS 中的伪类（pesudo class）是一种通过文档外信息或通过常规元素选择器无法表达的信息查找页面元素的方法。您可能已经使用过伪类，比如使用：hover 来改变鼠标悬停在超链接上时链接的颜色。使用 CSS3 中新的伪类可以更轻松地定位页面元素。概述在 Web 开发过程中，开发人员经常会通过使用 CSS 来实现页面所需的样式效果。例如：

深入了解 CSS3 新特性现如今，随着 Web2.0 技术的流行，之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求：人们需要实现更加美观、用户体验更好的界面。CSS3，这个新一代的标准应运而生。为了满足现有的对于 Web UI 的开发需求，它提供了一系列强大的功能，如许多新的 CSS 属性（文字，布局，颜色等等），各种 CSS 特效，甚至还支持 CSS 动画、元素的变

深入理解 CSS3 弹性盒布局模型弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用。本文详细的介绍该布局模型以及如何在具体开发中应用该布局模型来

CSS 入门标准化设计了解标准化的 CSS 样式技术，包括 CSS 2.1 和跨浏览器 CSS3。具体来讲，学习如何使用常用的技术增强搜索引擎的优化，为打印、移动和 Web 视图提供不同的 CSS 样式，以及有助于增强可访问性的技巧提示。级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计。使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就

IE vs FFCSS 兼容要点：DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后,

1：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度来计算的。2：css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：tab