`

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

阅读更多
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]外部元素



[2]内部元素




  • 大小: 30.3 KB
  • 大小: 28.4 KB
  • 大小: 34.8 KB
  • 大小: 27.6 KB
  • 大小: 54.2 KB
  • 大小: 28.8 KB
  • 大小: 45.5 KB
  • 大小: 34.3 KB
  • 大小: 54.3 KB
  • 大小: 36.2 KB
  • 大小: 47.7 KB
  • 大小: 22.5 KB
  • 大小: 85.6 KB
  • 大小: 65.1 KB
分享到:
评论

相关推荐

    Css padding和margin区别

    这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...

    divcss布局:CSS布局方法介绍

    margin: 0px; padding: 0px; text-align: center; } #content { margin-left: auto; margin-right: auto; width: 400px; } ``` ##### 2.2 两行布局 ```css body { margin: 0px; padding: 0px; text-...

    DIV CSS常用的网页布局代码

    单行一列以下是引用片段:body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列以下是引用片段:body{margin:0px;padding:0px;text-...

    李炎恢HTML_CSS教程.pdf

    * CSS盒模型:盒模型、border、padding、margin * CSS边框与背景:边框、背景颜色、背景图片 * CSS表格与列表:表格样式、列表样式 * CSS其他样式:圆角、阴影、透明度 CSS高级 * CSS3前缀和rem:CSS3新特性、rem...

    初写静态网页

    margin: 0; padding: 0; float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } .tcontain { width: 120px; height: 3px; padding: 0; margin: 62...

    简单的网页制作案例(DIV+CSS完成):旅游网站2

    padding: 20px; } .main { display: flex; flex-wrap: wrap; } .sidebar { width: 30%; margin-left: 20px; } .footer { text-align: center; color: #6c757d; } ``` 这段代码展示了如何设置`header`、`...

    js与css样式对照

    在Web开发中,JavaScript经常被用来动态地修改CSS样式,实现页面元素的动态效果。为了方便开发者理解和使用,这里详细介绍了一些常用的CSS样式及其对应的JavaScript属性。 ##### 边框(Border) - **CSS属性**:`...

    简单的网页制作案例(DIV+CSS完成):婚纱摄影

    margin: 0; padding: 0; overflow: hidden; background-color: #333; } .navbar li { float: left; } .navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-...

    5种CSS图片效果及效果预览

    在本教程中,我们将探讨五种常见的CSS图片效果及其实现方法,帮助你提升网页视觉吸引力。 1. 阴影效果: CSS的`box-shadow`属性可以为图片添加阴影效果,增加立体感。例如: ```css img { box-shadow: 2px 2px 4px...

    CSS3效果:自定义“W”形运行轨迹实例

    整理文档,搜刮出一个CSS3效果:“W”形运行轨迹实例的代码,稍微整理精简一下做下分享。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang=en&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&gt; &lt;...

    简单的网页制作案例(DIV+CSS完成):韩国料理

    4. **边距和填充**:使用`margin`和`padding`来调整元素间的距离,提升页面的层次感和空间感。 5. **图片处理**:利用CSS的`max-width`属性确保图片在不同设备上自适应,避免图片过大影响页面加载速度。 6. **响应...

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么... margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor:

    CSS3 2D 转换

    CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white;...margin:10px; } CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 它是如何工作? 转换的效果是让

    HTML5&CSS3网页制作:边距属性.pptx

    4. 四个值:`margin: 10px 20px 30px 40px;` 分别设置上、右、下、左四个方向的外边距。 一个重要的区别是,外边距允许使用负值。这在某些布局技巧中非常有用,比如创建重叠元素或调整元素位置。 在实际网页布局中...

    js中css对照表

    - **CSS语法**:`margin-bottom` - **JavaScript语法**:`marginBottom` - **CSS语法**:`margin-left` - **JavaScript语法**:`marginLeft` - **CSS语法**:`margin-right` - **JavaScript语法**:`marginRight` - ...

    网页制作代码+课程总结

    margin: 0px; padding: 0px; } #container{ text-align:left; padding:0px; width:1400px; position:relative; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ ...

    DIV CSS布局教程:应用ul、li实现表格形式

    - `margin: 0; padding: 0;`清除默认的外边距和内边距,确保布局从零开始。 - `font-size`和`color`定义文本的基本样式。 - 对`#biaoge`设置宽度和外边距,使其在页面中水平居中显示。 - 对所有的`&lt;li&gt;`应用样式...

    css实现登陆界面的代码

    margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; } ``` 这段代码将创建一个宽度为300像素、居中显示、有内边距和灰色背景的登录表单容器。 接下来,我们需要创建输入字段。...

    [CSS] 用伪元素:after实现分割线和气泡

    在CSS世界中,伪元素是用于添加特殊效果的神奇工具,它们并不会在HTML源代码中实际存在,而是由CSS创建。`:after`是CSS中的一个伪元素选择器,用于在元素内容之后插入内容。本话题将深入探讨如何利用`:after`伪元素...

    简单的网页制作案例(DIV+CSS完成):旅游网站1

    - **盒模型**:理解`width`、`padding`、`border`和`margin`如何影响元素的总尺寸至关重要。在旅游网站上,这可以用来设置内容区域的宽度、按钮的边距等。 - **定位**:使用`position`属性(如`static`、`relative`...

Global site tag (gtag.js) - Google Analytics