五.CSS盒子模型
2013-07-16 22:59
253 查看
所谓盒模型,就是浏览器为每个HTML元素生成的矩形盒子。即HTML页面实际上就是由一系列盒子组成。这些盒子是按照可见版式在页面上排布的。并由三个属性进行控制:position属性,display属性,float属性。
position属性:控制页面元素之间的位置关系
display属性:控制元素的堆叠、并排、显示
float属性:提供控制方式,以便把元素组成多栏布局
需要说明的是,默认情况下,我们是看不到盒子的。
每个盒子都有三个属性:
边框(border):可以设置边框的宽窄、样式和颜色
内边距(padding):可以设置盒子内容区与边框的间距
外边距(margin):设置盒子与盒子的间距
下面我用一张图来展示下
一个盒子有四天边,因此,边距、内边距、外边距各有top、right、bottom、left四条边
好啦,说了那么多废话,我们来实际的演示下
首先了,创建具有两个段落的HTML文档
[/code]
然后,设置第一个段落的外边距为100px,在浏览器中查看效果
我们可以看到整个段落外边距情况
当单独为每条外边距编写样式的时候。显示如下
[/code]
几种简写说明:
①
[/code]
不写全
默认按照顺时针顺序设置外边距
②自动取对边值
上面的代码最后一个外左边距没有写出,它会自动取右边距的值。同理可以省去下外边距[/code]
③只写一个值
则四条外边距全部取一样的值
下文待续……
position属性:控制页面元素之间的位置关系
display属性:控制元素的堆叠、并排、显示
float属性:提供控制方式,以便把元素组成多栏布局
需要说明的是,默认情况下,我们是看不到盒子的。
每个盒子都有三个属性:
边框(border):可以设置边框的宽窄、样式和颜色
内边距(padding):可以设置盒子内容区与边框的间距
外边距(margin):设置盒子与盒子的间距
下面我用一张图来展示下
一个盒子有四天边,因此,边距、内边距、外边距各有top、right、bottom、left四条边
好啦,说了那么多废话,我们来实际的演示下
首先了,创建具有两个段落的HTML文档
[code]<!DOCTYPE html> <html> <head> <title>CSS盒模型演示</title> <meta charset="utf-8"> <link href="in_css/box.css" rel="stylesheet" type="text/css"> </head> <body> <p class="p_1"> 西山白雪三城戍,南浦清江万里桥。<br> 海内风尘诸弟隔,天涯涕泪一身遥。<br> 惟将迟暮供多病,未有涓埃答圣朝。<br> 跨马出郊时极目,不堪人事日萧条。<br> </p> <p class="p_2"> 锦瑟无端五十弦,一弦一柱思华年。<br> 庄生晓梦迷蝴蝶,望帝春心托杜鹃。<br> 沧海月明珠有泪,蓝田日暖玉生烟。<br> 此情可待成追忆,只是当时已惘然。<br> </p> </body> </html>
[/code]
然后,设置第一个段落的外边距为100px,在浏览器中查看效果
我们可以看到整个段落外边距情况
当单独为每条外边距编写样式的时候。显示如下
[code]p.p_1{ margin-top: 100px; margin-right: 400px; margin-bottom: 50px; margin-left: 400px; }
[/code]
几种简写说明:
①
[code]p.p_1{ margin: 200px 500px 20px 500px; }
[/code]
不写全
margin-top:200px;margin-right: 500px;margin-bottom:20px;margin-left: 500px;
默认按照顺时针顺序设置外边距
②自动取对边值
[code]margin-top:200px;margin-right: 500px;margin-bottom:20px;
上面的代码最后一个外左边距没有写出,它会自动取右边距的值。同理可以省去下外边距[/code]
③只写一个值
margin: 50px;
则四条外边距全部取一样的值
下文待续……