css探密学习（三）

目录

CSS第一部分

text-align

block和inline

CSS第二部分

padding

min-height

border-cllapse

border-spacing

word-break

list-style

text-decoration

line-height

clear

最近感到自己css样式表的知识太不系统了，编辑样式属性时经常造成各种问题，所以在这里以博客园为应用实例进行系统的认知和学习，把本博客的css样式从头到尾的分析一下。在这里我定义了一般的文字的class为generaltext,代码所在为code,我的标注为myideas。

第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是你不能删除这些样式。

#EntryTag{/*孙级元素文章tag区域*/
    margin-top: 20px; 
    font-size: 9pt; 
    color: gray; 
} 
.topicListFooter {/*页脚的属性*/
    text-align: right; /*text-align用法*/
    margin-right: 10px; 
    margin-top: 10px; 
} 
#divRefreshComments { 
    text-align: right;  
    margin-right: 10px; 
    margin-bottom: 5px; 
    font-size: 9pt; 
}

text-align

• 语法：text-align : left | right | center | justify
• 说明：设定元素内文本的水平对齐方式。
• 参数：left : 左对齐；right : 右对齐；center : 居中；justify : 两端对齐
• 初始值：跟浏览器的设置有关
• 继承性：可继承
• 适用于：block元素
• 更详细资料:http://www.ddcat.net/blog/?p=152

block（块）元素和inline（内联）元素

• 豆豆猫经常提到block和inline，那么什么是block,inline呢？
  所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。
  block元素的特点：
  总是在新行上开始；
  高度，行高以及顶和底边距都可控制；
  宽度缺省是它的容器的100%，除非设定一个宽度。
  inline元素的特点：
  和其他元素都在一行上；
  高，行高及顶和底边距不可改变；
  宽度就是它的文字或图片的宽度，不可改变。
  我们来详细了解它们的情况。

• 块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

  如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。

  你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。

  内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

  需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

  块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

  可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

  html标签的block、inline分类明细：

  块元素(block element):

  ◎ address - 地址
  ◎ blockquote - 块引用
  ◎ center - 举中对齐块
  ◎ dir - 目录列表
  ◎ div - 常用块级容易，也是css layout的主要标签
  ◎ dl - 定义列表
  ◎ fieldset - form控制组
  ◎ form - 交互表单
  ◎ h1 - 大标题
  ◎ h2 - 副标题
  ◎ h3 - 3级标题
  ◎ h4 - 4级标题
  ◎ h5 - 5级标题
  ◎ h6 - 6级标题
  ◎ hr - 水平分隔线
  ◎ isindex - input prompt
  ◎ menu - 菜单列表
  ◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  ◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
  ◎ ol - 排序表单
  ◎ p - 段落
  ◎ pre - 格式化文本
  ◎ table - 表格
  ◎ ul - 非排序列表

  内联元素(inline element):

  ◎ a - 锚点
  ◎ abbr - 缩写
  ◎ acronym - 首字
  ◎ b - 粗体(不推荐)
  ◎ bdo - bidi override
  ◎ big - 大字体
  ◎ br - 换行
  ◎ cite - 引用
  ◎ code - 计算机代码(在引用源码的时候需要)
  ◎ dfn - 定义字段
  ◎ em - 强调
  ◎ font - 字体设定(不推荐)
  ◎ i - 斜体
  ◎ img - 图片
  ◎ input - 输入框
  ◎ kbd - 定义键盘文本
  ◎ label - 表格标签
  ◎ q - 短引用
  ◎ s - 中划线(不推荐)
  ◎ samp - 定义范例计算机代码
  ◎ select - 项目选择
  ◎ small - 小字体文本
  ◎ span - 常用内联容器，定义文本内区块
  ◎ strike - 中划线
  ◎ strong - 粗体强调
  ◎ sub - 下标
  ◎ sup - 上标
  ◎ textarea - 多行文本输入框
  ◎ tt - 电传文本
  ◎ u - 下划线
  ◎ var - 定义变量

  可变元素:

• 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  ◎ applet - java applet
  ◎ button - 按钮
  ◎ del - 删除文本
  ◎ iframe - inline frame
  ◎ ins - 插入的文本
  ◎ map - 图片区块(map)
  ◎ object - object对象
  ◎ script - 客户端脚本

第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤模板所有页面的变化。因为它们是全局的。

* {/*This eliminated all differences in padding and margin across browsers.
这里填满，消除浏览器填充背景差异*/
	margin: 0;
	padding: 0;/*padding的使用方法*/
}
html {/*设定html标签下内容的属性，IE6.0环境下html默认就是100%高度，body则不是；FF环境下html和body高度默认都不是100%，需要自定义。*/
	height: 100%;
	font-family: "verdana","ms song","Arial","宋体", "Helvetica", "sans-serif";
}
body {/*设定body标签下内容的属性*/
	height:100%;
	color: #000;
	font-family: "verdana","ms song","Arial","SimSun","SimHei", "Helvetica",
"Microsoft YaHei", "sans-serif";
	font-size: 15px;

	min-height: 101%;/*min-height的使用*/
	background:#152228 
url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_new1.bmp) repeat left top;
	padding-bottom:20px;
	
}
table {/*设定表格标签table的属性*/
	border-collapse: collapse; /*border-cllapse的使用*/
	border-spacing: 0;/*border-spacing的使用*/
}
fieldset, img {/*放置区段和图片标签的属性，标签先不细说，暂时都参考http://www.w3school.com.cn/tags/index.asp*/
	border: 0;
}
ul {/*无序列表标签的属性*/
	word-break: break-all;/*word-break的使用*/
}
li {/*列表项目标签的属性*/
	list-style: none;/*list-style的使用*/
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
a:link {
	color:#000;
	text-decoration: none;/*text-decoration的使用*/
	line-height:22px;/*line-height的使用*/
	font-size:12px;
}
a:visited {
	color: #000;
	text-decoration: none;
	line-height:22px;
}
a:hover {
	color: #F60;
	text-decoration: underline;
}
a:active {
	color: black;
}
.clear {
	clear: both;/*clear的使用*/
}

padding

• 语法：padding :padding-top | padding-right | padding-bottom | padding-left
• 说明：检索或设置对象四边的内补丁。对于td和th对象而言默认值为1。其他对象的默认值为0。
• 参数：length :长度值；% : 百分比，由父元素宽度决定
• 初始值：对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
• 继承性：不可继承
• 注释：不允许使用负值。
• 盒模型（BOX Model）相关讲解：http://www.ddcat.net/blog/?p=138

min-height

• 说明：设置或检索对象的最小高度。
  如果min-height属性的值大于max-height属性的值，将会被自动转设为max-height属性的值。
  作用：可以用来避免参差不齐的高度，而超过最小高度时又可以自动扩展。扩展情况各Browser有差异。 语法：min-height : none |length
  参数：none : 无最小高度限制，length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅长度单位
  默认值：none 注释：目前IE5.5尚不支持此属性。对应的脚本特性为minHeight。

border-collapse

• 说明：设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
• 语法：border-collapse : separate |collapse
• 参数：separate:边框独立（标准HTML）collapse：相邻边被合并
• 初始值：separate
• 继承性：可继承
• 注释：对应的脚本特性为 borderCollapse。

border-spacing

• 说明：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
• 语法：border-spacing :length length
• 参数：一个或两个值，有两个值时以xy轴顺序描述，此length不为负值
• 继承性：可继承
• 注释：某些版本的IE浏览器不支持此属性。

word-break

• 说明：设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
• 作用：控制是否到边界断词
• 语法：word-break : normal |break-all |keep-all
• 参数：normal是默认情况，英文单词不被拆开。
  break-all，是断开单词。在单词到边界时，下个字母自动到下一行。English里主要解决了长串英文的问题。中文一般也使用break-all。
  keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
• 默认值：normal
• 注释：
  ie下：使用word-wrap:break-word;所有的都正常。
  ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。 目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。
  所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。 word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。

list-style

• 作用：列表项目相关样式。
• 说明：该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
• 语法：list-style : list-style-type ||list-style-position ||list-style-image
• 参数：list-style-style：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
  列表项标记类型：
  none 无标记。
  disc 默认。标记是实心圆
  。 circle 标记是空心圆。
  square 标记是实心方块。
  decimal 标记是数字。
  decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
  lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
  upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
  lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
  upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
  lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
  upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
  hebrew 传统的希伯来编号方式
  armenian 传统的亚美尼亚编号方式
  georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
  cjk-ideographic 简单的表意数字
  hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
  katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
  hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
  katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
  list-style-position : outside | inside
  列表放置的位置
  inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
  list-style-image : none | url ( url )
  
• 默认值：disc outside none
• 继承性：可继承
• 注释：当 list-style-image 和 list-style-type 都被指定了时， list-style-image 将获得优先权。除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。

text-decoration

• 作用：文本修饰,主要为划线和闪烁。
• 说明：如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中,假如你body对象此属性值为 none，a对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
• 语法：text-decoration : none || underline || blink || overline || line-through
• 参数：none :默认值。无装饰 blink :闪烁 underline :下划线 line-through :贯穿线 overline :上划线
• 默认值：none

line-height

• 作用：设置行间的距离.
• 说明：字体最底端与字体内部顶端之间的距离。行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。假如一个格式化的行包括不止一个对象，则最大行高会被应用。在这种情况下，此属性不可以为负值。
  该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
  line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
• 语法：line-height : normal |number |length |%
• 参数：
  normal 默认。设置合理的行间距。
  number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
  length 设置固定的行间距。
  % 基于当前字体尺寸的百分比行间距。
• 默认值：normal
• 继承：可继承

clear

• 作用：设置侧面是否允许其他的浮动元素.
• 说明：最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
• 语法：clear : none |left |right |both
• 参数：
  none : 默认值。允许两边都可以有浮动对象
  left : 不允许左边有浮动对象
  right : 不允许右边有浮动对象
  both : 左右两侧不允许有浮动对象
• 默认值：none
• 注释：出现在其他元素中的图形和文本元素称为浮动元素（floating element）。