CSS的视觉效果:width,padding,margin

ap0406708

浏览: 278819 次
性别:
来自: 深圳

最近访客更多访客>>

yuanyu113

姜子鸭

sxzheng96

helloworld_i_android

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS学习

CSS XHTML UP HTML

1.包含元素的整体大小: [width] + padding + margin (三样全是包含元素的)
(可能会因为内部元素比包含元素的width大,而使包含元素的[width]变大左)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><head>
<title>Expanding block level elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* set up for demo rules */
* {margin:0px; padding:0;}
body {padding-left:20px; background-color:#FFC;}
#ruler {position:relative; left:-51px; top:0px; margin-bottom:5px;}

/*DEMO OF BOX MODEL ISSUES */
#column {
	width:170px; 
	background:#FCC; /* not visible in this first step */
	padding:10px;
	margin:20px;
	}

#column_inner {
background:red;
}

h4 {background:#CCF;}
p  {background:#CFC;}
	
</style>
</head>
<body>
<img id="ruler" src="images/ruler_1000px.gif" alt="ruler" />
<div id="column">
  <div id="column_inner">
    <h4>An h4 heading</h4>
    <p>The heading and this paragraph sit in a column with a width of 170px. Because they are block level elements, their boxes
      expand horizontally to fill their containing element.</p>
  </div>
</div>
</body>
</html>

2.内部无素在没有width时会填满包含元素.
(不论包含元素有没有定义width)
~~~例子见上

3.内部元素有width,如果width + padding + margin (内部元素的) >包含无元素的width,就会使包含元素变大,去适应.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><head>
<title>Expanding block level elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* set up for demo rules */
* {margin:0px; padding:0;}
body {padding-left:20px; background-color:#FFC;}
#ruler {position:relative; left:-51px; top:0px; margin-bottom:5px;}

/*DEMO OF BOX MODEL ISSUES */
#column {
	width:170px; 
	background:#FCC; /* not visible in this first step */
	
	}

#column_inner {
background:red;
width:100px;
padding:20px;
margin:20px;
}

h4 {background:#CCF;}
p  {background:#CFC;}
	
</style>
</head>
<body>
<img id="ruler" src="images/ruler_1000px.gif" alt="ruler" />
<div id="column">
  <div id="column_inner">
    <h4>An h4 heading</h4>
    <p>The heading and this paragraph sit in a column with a width of 170px. Because they are block level elements, their boxes
      expand horizontally to fill their containing element.</p>
  </div>
</div>
</body>
</html>

4.位置的偏移 = 内部元素的margin + 包含元素的padding
margin 是与起始位置的偏移
padding 是除内部内容外剩余的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><head>
<title>Expanding block level elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* set up for demo rules */
* {margin:0px; padding:0;}
body {padding-left:20px; background-color:#FFC;}
#ruler {position:relative; left:-51px; top:0px; margin-bottom:5px;}

/*DEMO OF BOX MODEL ISSUES */
#column {
	width:170px; 
	background:#FCC; /* not visible in this first step */
	padding:10px;
	}

#column_inner {
background:red;
padding:20px;
margin:20px;
}

h4 {background:#CCF;}
p  {background:#CFC;}
	
</style>
</head>
<body>
<img id="ruler" src="images/ruler_1000px.gif" alt="ruler" />
<div id="column">
  <div id="column_inner">
    <h4>An h4 heading</h4>
    <p>The heading and this paragraph sit in a column with a width of 170px. Because they are block level elements, their boxes
      expand horizontally to fill their containing element.</p>
  </div>
</div>
</body>
</html>

以下是#column 为width:180px;时的效果

5. 如果内部的元素比其包含的元素大得多的话,内部元素会部分跳出包含元素.
(好像有点与3矛盾的样子,可能是表达得不够好~~~)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /><head>
<title>Expanding block level elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="text_n_colors.css" media="all" rel="stylesheet" />

<style>
* {margin:0px; padding:0;}
body {padding-left:20px; background-color:#FFC;}
#ruler {position:relative; left:-51px; top:0px; margin-bottom:5px;}

#content {
width:500px;
}
#content_inner {
width:800px;
}

</style>

</head>
<body>
<img id="ruler" src="images/ruler_1000px.gif" alt="ruler" />

<div id="content">

	<h2>About This Layout</h2>
    <p>The four structural divs&mdash;header, nav,
      content and footer&mdash;nest inside a fixed
      width containing div. The nav column is fixed width and floated, and the content column is auto width, unfloated. The footer is cleared
      so it sits beneath whichever of the 
      columns is longest.</p>
	  <p>Auto left and right margin settings are applied
	    to the fixed-width containing div, which makes
	    the layout center in a wide browser window.</p>

	<div id="content_inner">
	
    <h3>The Concept</h3>
    <p>The four structural divs&mdash;header, nav,
      content and footer&mdash;nest inside a fixed
      width containing div. The nav column is fixed width and floated, and the content column is auto width, unfloated. The footer is cleared
      so it sits beneath whichever of the 
      columns is longest.</p>
	  <p>Auto left and right margin settings are applied
	    to the fixed-width containing div, which makes
	    the layout center in a wide browser window.</p>

	</div><!-- end content_inner -->
	
	 <h3>The Concept</h3>
    <p>The four structural divs&mdash;header, nav,
      content and footer&mdash;nest inside a fixed
      width containing div. The nav column is fixed width and floated, and the content column is auto width, unfloated. The footer is cleared
      so it sits beneath whichever of the 
      columns is longest.</p>
	  <p>Auto left and right margin settings are applied
	    to the fixed-width containing div, which makes
	    the layout center in a wide browser window.</p>
		
</div><!-- end content -->

</body>
</html>

[1]外部元素