您的位置:首页 > CSS入门 >

 

CSS+DIV盒子模型

 

 CSS盒子模型-什么是CSS盒子模型

认识日常生活中盒子

常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。

CSS盒子
根据字面我们可以理解,CSS盒子也是装东西的,比如我们要将文字内容、图片布局网页中,那就需要像盒子一样装着。这个时候我们对其对象设置css高度(css height)、css宽度(css width)、css边框(css border)、css 边距(css margin)、填充(css padding),即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样
一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding)等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

日常使用CSS盒子
我们说将什么内容放入一个盒子里,我们就要想到是放入<div></div>里,脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子,我们就要知道如下一个概念:

Css样式代码

.yangshi{width:100px;}

对应html代码

<div class="yangshi">内容</div>

这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。

标签(Tag): 盒子 css盒子 css模型
本文分享URL地址:http://www.css5.com.cn/css/319.html

更多

上一页: 上一篇:ThinkCSS是什么?
下一页: 下一篇:HTML与CSS关系

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2011-11-07     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/css/319.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!