css基础系列教程之盒模型

作者:divcss教程吧      点击次数:580次     发布日期:2015-05-07

  1. 什么盒模型
  2. Div与sapn介绍
  3. 内边距与外边距
  4. 块元素与行内元素

盒模型在网页布局中起到一个至关重要的作用。在后边会重点说。而实现网页除了要使用盒模型,还有就是xhtml中的div标签。

W3c官方对div的定义是:div是一个块级元素,<div></div>可以包含段落、标题、表格甚至任何元素。

Div 是一个容器,xhtml页面中的每一个标签。对象几乎都可以称得上是一个容器,被<div></div>嵌套起来的文字、图片等任何东西,浏览器都将视为一个整体。

在使用DIV时要注意以下:

1、div 没有样式:

如:<div>这段DIV包含文本内容,没有任何效果出现。</div>;

2、div是块状属性:

Div 是块状对象,如:<div>左分栏</div><div>右分栏</div>这两段效果是上下位置。说明了div本身是占据了整行显示的对象

Div 可以实现并列与嵌套

Div 可以进行嵌套使用,嵌套的目的是为了实现更多复杂的页面排版。

<div id=“header”>头部</div>

<div id=“center”>

<div id=“left”></div>

<div id=“right”></div>

</div>

<div id=“footer”></div>

内边距padding

Css的内边距属性padding是定义内容与边框(border)之间的空白属性,此属性不允许使用负值.

  • 边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right).
  • 边内只有width一种属性.

需要注意的是:

一个物体的宽与高,并不包括内边距,也就是说,一个内边距左右各为10px,对象宽100px,那么实际宽度就是120px;

示例

Xhtml代码:

<p>定义了www.divcss8.com段落的边内补白为50px,padding:50px;所以内容与边框间会有50px的间隔.</p>

Css代码:

<style type="text/css">

                   p{

                            padding:50px;

                            border:thick solid green;}

</style>

Padding应用示例

1、padding-width指定两个值

p#threepaddings { padding:12px 5%; } 上下边内补白是12px,左右边内补白是5%(相对于整个页面).

2、padding-width指定三个值

p#threepaddings { padding:12px 5% 0; } 上边内补白是12px,左右边内补白是5%(相对于整个页面),下边内补白是0.

3、padding-width指定四个值:

p#fourpaddings { padding:12px 5% -12px auto; } 上边内补白是12px,右边内补白是5%(相对于整个页面),下边内补白是-12px,左边内补白将根据浏览器自动调整.

外边距Margin 

说白了。外边距就是网页边框与另一边框之间所空间隔。

margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。

它的设置方法同padding内边距一样,就不示例了

外边距所控制红线

盒模型示例:

css基础系列教程之盒模型

盒模型在网页中起什么作用呢?

假设有一个980像素的宽的网页,里面分为四列,如果这四列要并排显示,那么它们的宽度加起来就不能大于980像素。

网页是怎么计算宽度呢,就是按照盒模型的计算方式,需要计算物体的宽+边框+内边距+外边距*3然后等于980即可。

就像我们现实生活中一个大盒子,里面可以并列容纳几个小盒子一样。但是要注意,小盒子如果在并列摆放的时候不能超过大盒子的宽度。

在我们网页中,如下图所示,外侧一个大盒子(div),里面可能嵌套了四个小盒子(div),那这个四小盒子的宽度(结合上边所讲,要知道要用盒模型的方式进行计算)加起来就不能超过大盒子的宽度

 

 

块元素与行内元素

在学习网页布局时,还有一个重要的知识点就是块元素与行内元素,我们所有的HTML标签都属于这两种类型。

块元素(block element) 特性:会占据整行显示.即使没有设置宽度,也是占据整行.后边即使空着,也让其它元素换行显示(不控制的时候)

示例:

<div>内容1</div>

<div>内容2</div>

由于DIV是块元素,所以这两个DIV中的文字会占据两行进行显示,网页中只要是这种类型的都是霸道的,占据网页整个浏览器显示。下节会讲解如何控制它

内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。‘   行内元素inline   可以同行显示

<a href=”http://www.divcss8.com”>学css</a>

<a href=”http://www.divcss8.com”>学css</a>

由于A链接是行内元素,所以它们都会同行显示。

分享DIVCSS8