摘要：
什么是CSS清除浮动？网络上流行的说法是：在非IE浏览器（如Firefox）下，当容器的高度（height） 为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到 容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。出现浮动溢出的条件是什么？首要条件：height:auto，或者说高度是自动伸展的。由于容器里面有float元素，由于float元素是脱离文档流的，所以容器是不能获取float的高度的。看下面的例子： ... 阅读全文
随笔分类 - web---css
css float浮动
2012-08-22 16:07 by youxin, 629 阅读, 收藏, 编辑
摘要：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（这个很重要，说明了浮动停止的条件）由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。如下图所示， 阅读全文
利用position:absolute重叠元素
2012-08-22 11:02 by youxin, 915 阅读, 收藏, 编辑
摘要：
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the ab 阅读全文
Absolute, Relative, Fixed Positioning: How Do They Differ?
2012-08-22 10:58 by youxin, 381 阅读, 收藏, 编辑
摘要：
I am fairly new to web design and I could never master the differences in positioning of elements. I know there are absolute, fixed, and relative. Is there any others? Also do they majorly differ? And when should you use which?Short answer:Yes, there is one more, "static", which is the def 阅读全文
关于margin-top/bottom在non-Replaced inline元素上不起作用的解释
2012-08-22 10:45 by youxin, 324 阅读, 收藏, 编辑
摘要：
margin-top/bottom have no effect on non-replaced inline elements。（参见css2.1规范）但是为什么就不支持呢？本人觉得可以这样解释：像这样一个结构xxxxxxxxxxxxxxxx——————效果大概如下xxxxxxxxxxxxxxx————-假如inline元素支持margin-top，而margin-top的参照基准是前一个元素（当然，考虑复杂情况的话，这么说是不正确的,比如前一元素是脱离文档流的元素，或者根本没有前一元素而只有上级元素，等等）。那么给b相对a的设置一个margin-top值，这个效果会是怎么呢？这样？xxxx 阅读全文
css 边距折叠和定位
2012-08-22 02:04 by youxin, 305 阅读, 收藏, 编辑
摘要：
看下面 的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; char 阅读全文
css position
2012-08-21 22:30 by youxin, 405 阅读, 收藏, 编辑
摘要：
(由于position是相对于其包含块定义，先看以前写的：http://www.cnblogs.com/youxin/p/3341305.html）Learn CSS Positioning in Ten Stepshttp://www.barelyfitz.com/screencast/html-training/css/positioning/ id = div-before id = div-1 id = div-1aLorem ipsum dolor sit amet, consectetuer adipiscing elit. ... 阅读全文
eric书：text属性
2012-08-21 21:21 by youxin, 267 阅读, 收藏, 编辑
摘要：
文本和字体的区别：简单说，文本时内容，字体用于显示，它是一个改变文本外观的方法。Indenting Texttext-indentValues <length> | <percentage> | inheriInitial value 0Applies to block-level elementsInherited yesPercentages refer to the width of the containing blockComputed value for percentage values, as specified; for length values, 阅读全文
eric书：css继承
2012-08-21 20:43 by youxin, 276 阅读, 收藏, 编辑
摘要：
As important as specificity （特殊性）may be to understanding how declarations are applied to a document, another key concept is that of inheritance. Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants. If a color is applied to an h1 eleme 阅读全文
转：Quirks模式与Standards模式
2012-08-21 19:44 by youxin, 367 阅读, 收藏, 编辑
摘要：
Quirks Mode中发生了什么？Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中。Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，看它是否包含一个HTML规范所要求的文档类型声明。Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。旧页面可能利用旧浏览器已知的特性写成，或者至少是适应旧浏览器。更多关于怪异模式的信息请访问QuirksMode.Org。 阅读全文
外边距折叠
2012-08-21 16:44 by youxin, 417 阅读, 收藏, 编辑
摘要：
在CSS中，当一个元素的上或下外边距正好和另外一个元素的上或下外边距接触时就会产生外边距折叠。这个概念很简单：两个外边距中更小的那个减小为零。如果两个元素的外边距具有相同的长度，那么其中一个被减小为零。外边距折叠在图7-9中进行示范。 注意：第一个divmargin-top还是10px，只是下面的没有了。当一个元素被另外一个元素包含在里面时也会发生外边距折叠。两个外边距在什么地方接触是无关紧要的，如果两个外边距接触，那么即使是另一个元素里面的元素也会和它的父元素发生外边距折叠。图7-10中显示了一个这样的例子。 显示了外边距折叠在父子元素之间是如何发生作用的。如果一个子元素的外边距直... 阅读全文
关于css中float的一切
2012-08-21 16:33 by youxin, 287 阅读, 收藏, 编辑
摘要：
原文：http://css-tricks.com/all-about-floats/ 这篇文章说的简单易懂 float是CSS中关于定位的属性。 float有4个值：none, left, right, inherit (继承父元素的float属性值） float的姐妹属性：clear clear有4个值：both， none， left, right (也可以说有5个：inherit，但在IE中不支持） 阅读全文
display:inline-block
2012-08-21 02:17 by youxin, 571 阅读, 收藏, 编辑
摘要：
display:inline-block; 是不换行的。 The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block elementdisplay:list-itemThe element is displayed as a list-item, which means that it has a bullet in front of it。看下面的布局：一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个 阅读全文
table标签中thead、tbody、tfoot的作用
2012-08-20 13:08 by youxin, 1060 阅读, 收藏, 编辑
摘要：
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。 tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。thead 表格的头 用来放标题之类的东西tbody 表格的身体 放数据本体tfoo 阅读全文
css 块级元素VS内联元素
2012-08-20 12:54 by youxin, 540 阅读, 收藏, 编辑
摘要：
我们先来认识in-line内联元素和block-line块元素，因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。in-line这个词有很多种说法：内嵌、内联、行内、线级等，但是，它们都是表示相同的意思，在这里我选择我习惯的叫法。块元素可以包含内联元素或某些块元素（刚才的例子其实是错误的使用，我把放在里面），但内联元素却不能包含块元素，它只是包含其他的内联元素。p、h1、或div，li等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display= 阅读全文
CSS Tools: Reset CSS
2011-11-07 22:51 by youxin, 412 阅读, 收藏, 编辑
摘要：
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this wasdiscussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and 阅读全文
reset.css
2011-11-07 22:47 by youxin, 248 阅读, 收藏, 编辑
摘要：
很多地方都提到过CSS Reset这个概念，而且细心的朋友会发现，许多大网站的CSS文件中也含有CSS Reset内容。CSS Reset是什么？ 其实简单的说就是重置浏览器的CSS默认属性。为什么要重置它？ 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。CSS Reset的内容是什么？ 最简单的CSS Reset内容寥寥几行就能完成： * { padding: 0; margin: 阅读全文
进行CSS注释的三种方法
2011-11-02 21:53 by youxin, 1670 阅读, 收藏, 编辑
摘要：
就像HTML教程中描述的一样,在CSS文档中CSS注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等，并且CSS注释的开始使用/*,结束使用*/。AD：通常CSS注释代码如果是单行注释的话开始使用/*,结束使用*/，这里向大家描述一下CSS代码中进行注释的三种方法，相信本文介绍一定会让你有所收获。CSS代码中进行注释的三种方法1、选择器（childselector）如果你想在IE中隐藏一个CSS定义，可以使用子选择器。CSS注释代码：html>bodyp{ /*declarations*/ } 2、“通配符”(*)这种写法只有IE浏览器可以理解（对其他浏览器 阅读全文
2column left navigation 中遇到的问题
2011-11-02 21:48 by youxin, 211 阅读, 收藏, 编辑
摘要：
注释只能是 ，不能是///* 注释内容 */html中注释则是<!--注释的内容--> ，千万要注意。先看自己写的代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <m 阅读全文
css hack 基本技能
2011-11-02 21:00 by youxin, 326 阅读, 收藏, 编辑
摘要：
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。针对不同浏览器写不同的css code的过程，就叫css hack。css hack 原理：由于不同浏览器对css支持的解析结果不一样，还由于css中的优先级关系。根据这个来写。css hack 大致三个表现形式：1；内部类hack 阅读全文
