部分博客《CSS——（1）基础》中简介了CSS的概念和几种用法，如今主要是介绍其的核心内容。

盒子模型

为了理解盒子模型，我们能够先从生活中的盒子入手。盒子是用来放置物品的，内部除了有物品外，还有填充部分的东西。

盒子与盒子之间还会有间隙。例如以下图所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

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

标准盒子模型：

当中。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;  /*边框*/

}

网页显示：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

盒子模型显示：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

了解盒子模型能够帮助我们更好的排版，当然只知道这个是不够的，我们还常常会谈到“标准流”。标准流，是指各元素没有特殊规则时的排列方式。

它分为两类：块级元素和行内元素。

二者的差别在于块级元素拥有自己的区域，而行内元素没有。

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

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

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

例如以下图所看到的：

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

有三个经常使用属性值：

1）block   显示为块级元素

2）inline  行内元素

3）none  不显示

盒子模型能够帮助我们更好的布局和规划标签的排版位置，标准流是在没有特殊规则下的普遍适用的排列规则。在对标准流有了大致了解后，下我们将不断推出具体条款博客CSS核心定位机构。

版权声明：本文博主原创文章。博客，未经同意不得转载。

CSS——（2）与标准流盒模型的更多相关文章

  1. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  2. css学习の第三弹—盒模型的创建和使用

    一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...

  3. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  4. CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

    CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...

  5. CSS选择器、样式、盒模型

    一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...

  6. 笔记《精通css》第3章 盒模型，定位，浮动，清理

    第3章    盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用 ...

  7. CSS（二） 颜色 盒模型 文字相关 border

    一.颜色 rgb(r,g,b)  rgb取值 0-255   分别是 色光三元色  red green blue rgba(r,g,b,a) rgb同上  a 是 alpha  代表透明度 colot ...

  8. IE盒模型和标准w3c盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...

  9. IE6与W3C标准的盒模型差异

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子 ...

随机推荐

  1. .Net 内存溢出（System.OutOfMemoryException）

    .Net 内存溢出(System.OutOfMemoryException) 在什么情况下会出现OutOfMemonryException呢? 在我们试图新建一个对象时,而垃圾收集器又找不到任何可用内 ...

  2. Android HAL

  3. 【超有用】图解--怎样使用本地的dtd文件映射

    曾经一直非常苦恼,假设电脑上不了网,就比較麻烦了.自己在配置HIbernate的属性的时候.不知道属性名有没有写错.. 如今和大家分享一下,毕竟自己痛苦过了,大家不要和我一样痛苦.

  4. 在spring MVC的controller中获取ServletConfig

    在使用SmartUpload进行文件上传时,须要用到srevletConfig: 假设是在servlet中写当然是非常easy实现的: private ServletConfig config; // ...

  5. 特里-HDOJ-1671

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  6. WPF遮蔽层的实现

    在一些项目中,难免会有耗时的加载,如果加载时没有提示,给人一种假死的感觉,很不友好,那么现在福利来啦,WPF版的模态窗体,先上效果图 实际效果指针是转动的,话不多说,一大批干货来袭 XMAL的代码 W ...

  7. zend studio 10 实现代码自动换行

    在一篇zend framework 的PHP编码标准的文章中看到了这么一段: 一行 80 字符以内是比较合适,就是说,ZF 的开发者应当努力在可能的情况下保持每行代码少于 80 个字符,在有些情况下, ...

  8. Git在下搭建下环境的工具

    (本文稿来自:http://www.open-open.com/news/view/55387) Git是一个快速,可扩展的,分布式的版本控制系统.Git服务器起初是专为Linux开发,后来移植至Wi ...

  9. OpenCV基础篇之画图及RNG随机数对象

    程序及分析 /* * FileName : random_gen.c * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Tue 29 ...

  10. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...