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—header, nav,
content and footer—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—header, nav,
content and footer—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—header, nav,
content and footer—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的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...
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-...
单行一列以下是引用片段: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-...
* 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...
padding: 20px; } .main { display: flex; flex-wrap: wrap; } .sidebar { width: 30%; margin-left: 20px; } .footer { text-align: center; color: #6c757d; } ``` 这段代码展示了如何设置`header`、`...
在Web开发中,JavaScript经常被用来动态地修改CSS样式,实现页面元素的动态效果。为了方便开发者理解和使用,这里详细介绍了一些常用的CSS样式及其对应的JavaScript属性。 ##### 边框(Border) - **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-...
在本教程中,我们将探讨五种常见的CSS图片效果及其实现方法,帮助你提升网页视觉吸引力。 1. 阴影效果: CSS的`box-shadow`属性可以为图片添加阴影效果,增加立体感。例如: ```css img { box-shadow: 2px 2px 4px...
整理文档,搜刮出一个CSS3效果:“W”形运行轨迹实例的代码,稍微整理精简一下做下分享。 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <...
4. **边距和填充**:使用`margin`和`padding`来调整元素间的距离,提升页面的层次感和空间感。 5. **图片处理**:利用CSS的`max-width`属性确保图片在不同设备上自适应,避免图片过大影响页面加载速度。 6. **响应...
本文介绍了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 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white;...margin:10px; } CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 它是如何工作? 转换的效果是让
4. 四个值:`margin: 10px 20px 30px 40px;` 分别设置上、右、下、左四个方向的外边距。 一个重要的区别是,外边距允许使用负值。这在某些布局技巧中非常有用,比如创建重叠元素或调整元素位置。 在实际网页布局中...
- **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{ ...
- `margin: 0; padding: 0;`清除默认的外边距和内边距,确保布局从零开始。 - `font-size`和`color`定义文本的基本样式。 - 对`#biaoge`设置宽度和外边距,使其在页面中水平居中显示。 - 对所有的`<li>`应用样式...
margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; } ``` 这段代码将创建一个宽度为300像素、居中显示、有内边距和灰色背景的登录表单容器。 接下来,我们需要创建输入字段。...
在CSS世界中,伪元素是用于添加特殊效果的神奇工具,它们并不会在HTML源代码中实际存在,而是由CSS创建。`:after`是CSS中的一个伪元素选择器,用于在元素内容之后插入内容。本话题将深入探讨如何利用`:after`伪元素...
- 盒模型是CSS布局的基础,包括`content`、`padding`、`border`和`margin`,理解这四个部分对于创建可调整大小的菜单至关重要。 2. **定位与浮动**: - `position`属性(如`static`、`relative`、`absolute`、`...