码迷,mamicode.com
首页 > Web开发 > 详细

CSS——(2)盒子模型与标准流

时间:2014-08-01 10:54:20      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:css   盒子模型   bs   

上篇博客CSS——(1)基础中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容。

盒子模型

为了理解盒子模型,我们可以先从生活中的盒子入手。盒子是用来放置物品的,内部除了有物品外,还有填充部分的东西。盒子与盒子之间还会有间隙。如下图所示:

bubuko.com,布布扣


对于网页中的大部分对象,实际呈现形式都是一个盒子形状对象,理解了盒子模型才能更好的排版。

CSS盒子模式具备的属性: 内容(content)、填充(padding)、边框(border)、边界(margin)。从上面的例子来看:内容即对应盒内的物品;填充对应盒内为了防止物品破碎的填充物;边框则是盒子的纸壳部分;边界就是纸壳外围的间隙了。

标准盒子模型:

bubuko.com,布布扣

其中,margin为外边距,padding为内边距。填充、边框和边界都分为上、下、左、右4个方向,既可以分别定义,也可以统一定义。

我们可以通过一个小例子来看一下盒子模型。

HTML:

<body>
    <form id="TestForm" runat="server">
        <div class="Test">
            盒子模型
        </div>
    </form>
</body>

CSS:

.Test {
    width: 180px; /*宽,高*/
    height: 30px;

    margin: 5px;   /*外边距*/
    padding: 20px; /*内边距*/
    border: 10px solid #0094ff;  /*边框*/
  
}

网页显示:

                      bubuko.com,布布扣

盒子模型显示:

bubuko.com,布布扣


      了解盒子模型可以帮助我们更好的排版,当然仅仅知道这个是不够的,我们还经常会谈到“标准流”。标准流,是指各元素没有特殊规则时的排列方式。它分为两类:块级元素和行内元素。二者的区别在于块级元素拥有自己的区域,而行内元素没有。


块级元素:以一个块的形式表现出来,并跟同级的块依次竖直排列,左右撑满。占有独立空间。

行内元素:各个字母之间横向排列,到最右端自动折行,横向排列。标签本身不占有独立的区域。


在这里,我们分别举个例子来说明这两类元素的不同。即块级元素中的<div>标签和行内元素中的<span>标签。

如下图所示:

bubuko.com,布布扣

bubuko.com,布布扣

那么,当我想把块级元素转换为行内元素,或者把行内元素转换为块级元素时,应该怎么做呢?这里就涉及到一个重要的属性了——display属性。

有三个常用属性值:

1)block   显示为块级元素

2)inline  行内元素

3)none  不显示

      盒子模型可以帮助我们更好的布局和规划标签的排版位置,标准流是在没有特殊规则下的普遍适用的排列规则。在对标准流有了大致了解后,下篇博客将继续详细介绍CSS的核心内容中的定位机制。

CSS——(2)盒子模型与标准流,布布扣,bubuko.com

CSS——(2)盒子模型与标准流

标签:css   盒子模型   bs   

原文地址:http://blog.csdn.net/u010066934/article/details/38302953

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!