部分博客《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. Axure RP 实践.1

    工作需要设计产品原型,找来Axure RP帮忙,看了一些文章,其中下面这段话深得我心. “只使用Axure的默认控件(Wireframe),不要用那些样式花哨的自定义控件,并且所有页面中使用的颜色不能 ...

  2. Struts2 学习第一步准备工作

    第一步:安装下载MyEclispe10 对于MyEclispe的下载安装就不再详述了. 第二步:下载Struts-2.3.15 Struts-2.3.15下载地址: http://struts.apa ...

  3. Navicat工具破解

        Navicat提供多达 7 种语言供客户选择,被公认为全球最受欢迎的数据库前端用户介面工具.它可以用来对本机或远程的 MySQL.SQL Server.SQLite.Oracle 及 Post ...

  4. Maven插件之git-commit-id-plugin

    SCM使用GIT而非SVN时,使用Maven发布,总是会出一些莫名其妙的问题,google查找原因,无意中看到了这个插件; 对于该插件,到目前为止,文档比较少,尤其是中文的文档;全部的信息都包含在项目 ...

  5. 【OC加强】NSDate的使用方法——日期时间在实际开发中比較有用

    (1)日期的最主要知识点就是日期转换成字符串格式化输出,相反就是依照某个格式把字符串转换成日期. (2)一般关于时区的设置非常少用到,仅仅要了解就可以. #import <Foundation/ ...

  6. ReactNavtive框架教程（2）

    , alignItems: 'center' } }); 标准的 CSS 属性.尽管用CSS比在IB设置UI样式的可视化要差.但总比在viewDidLoad()方法中用代码写要好一些. 然后增加下面代 ...

  7. android开机启动应用和服务

    注冊广播监听开机状态.启动应用和服务等: 监听开机的广播接收器: public class BootCompletedReceiver extends BroadcastReceiver{ @Over ...

  8. 使用C++名单在文档处理和学生成绩管理系统相结合

    对于学生成绩管理系统,我并不陌生,几乎学习C人的语言.做项目会想到学生成绩管理系统,我也不例外.在研究中的一段时间C语言之后,还用C语言到学生管理系统,然后做几个链接.计数,这个系统是以前的系统上的改 ...

  9. 辛星一起了解下后续PHP性能功能

    关于第一个发言,这篇文章是我的原创.但,这些数据不被总结出来我,你可以搜索下"百度project师HDK",这些数据提供了他,我只是给一个总结.因为他很长的文章,我在这里提炼几点. ...

  10. Angularjs 基于karma和jasmine的单元测试

    目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否正确     3.2 模拟http请求返回值,测试$http服 ...