CSS2学习笔札

最新推荐文章于 2013-09-22 17:29:43 发布

原创最新推荐文章于 2013-09-22 17:29:43 发布 · 626 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML 专栏收录该内容

27 篇文章

订阅专栏

一、样式

1、背景

2、文本

3、超衔接

4、列表

5、表格

6、轮廓ie不支持

二、盒模型

1浏览器兼容性

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

2、外边距合并

指的是，当两个垂直外边距相遇时，它们将形成一个外边距，不管它们是嵌套还是同辈。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

三、定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

relative属于普通流的一种，注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

float脱离文档流，不占据空间。要处理可以做这样

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

要达到包围float元素的效果，使用clear：（参考http://www.w3school.com.cn/css/css_positioning_floating.asp）

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>