您的位置：首页 > Web前端 > CSS

css学习笔记---盒模型，布局

2013-11-03 22:33 656 查看

1、外边距叠加

当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加，元素被包含时也有可能会发生叠加（如果没有内边距和边框），如果一个空元素没有内边距和边框本身也会发生上下边距的叠加。只有普通文档流中块框的垂直外边距才会发生叠加，行内框、浮动框或绝对定位框之间的外边距不会发生叠加。

2、定位

css有3中基本的定位机制，普通流，浮动和绝对定位。浮动和绝对定位会脱离普通流，但是float跟绝对定位又有点不一样，绝对定位完全不会再影响普通流中的元素，但是float对其后的文档流中的元素依然有影响，文档流中的内容会让移动以留出空间来展示浮动元素，也就是说，浮动元素之后覆盖其他元素的背景不会覆盖内容，这就需要用到普通流中的元素的clear属性了。。相对定位就是占据原来位置的基础上偏移有可能遮盖其他元素。

3、行框和清理 clear属性

值可以是left、right、both或none，它表示框的那些边不应该挨着浮动框。实际上是留足够的垂直空间给浮动框。通过overflow属性也可以实现clear的功效。

4、背景图片定位

当背景图片使用百分百定位的时候，并不对图像左上角进行定位而是图像是对应百分比的一个对应点。

测试代码：

<!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; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
div{ background-color:red;
margin:20px;
}
span{
background-color:blue;}
</style>
<body  >

<div >123</div>
<div style="background:url(dlck.png) #99FFCC; background-position:20% 20%; background-repeat:no-repeat; position:relative; width:200px ; height:200px;">
<span style="width:100px; height:100px; position:absolute; top:20px; left:20px; background:yellow;-"></span>
<span style="width:100px; height:100px; position:absolute; top:20%; left:20%; background:gray;-"></span></div>
<div style="clear:both;">789</div>

<span style="width:100px; position:relative; top:0px; left:15px;">abc</span>
<span style="width:100px; float:left;">def</span>
<span style="width:100px;">ghi</span>
<div style="background:blue; overflow:auto;">
<p style="float:left;">1232</p>
<h1>jjjjj</h1>
</div>
<img src="ts_logo.png" style="float:left;" />
<h1 style="background-color:green;">哈哈哈哈哈哈</h1>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航