部分博客《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. HYSBZ 1036（树链剖分）

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/E 题意:给定一棵树及树上的点权,要求三种操作: 1) ...

  2. 全栈JavaScript之路（十八）HTML5 自己定义数据属性

    HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名能够任意加入,仅仅要带上前缀 data- 开头 ...

  3. hdu4857 逃生 bestcoder round1 A

    题目要求要求在满足约束条件的情况下,使小的序号尽力靠前. 坑点就在这里.小的序号尽量靠前并非代表字典序,它要求多种情况时,先使1靠前(可能1仅仅能在第2或第3位 那么就要使它在第2位),其次2,3. ...

  4. 采用Bash脚本性能监控过程

    为一个Linux过程监控,采用Bash脚本. 采用ps命令的过程监控,使用周期加上连续监测的睡眠时间. 使用方法: psmonitor.sh -p [pid] -d [interval] -n [st ...

  5. 用python调用R做数据分析-准备工作

    0.R的介绍 R是自由软件,不带不论什么担保.在某些条件下你能够将其自由散布,用'license()'或'licence()'来看散布的具体条件. R是个合作计划.有很多人为之做出了贡献,用'cont ...

  6. 讨论asp.net通过机器cookie仿百度（google）实现搜索input搜索提示弹出框自己主动

    为实现自己主动弹出通过用户输入关键词相关的搜索结果,在这里,我举两个解决方案,对于两个不同的方案. 常用的方法是建立一个用户数据库中查找关系表.然后输入用户搜索框keyword异步调用数据表中的相关数 ...

  7. 修改linux系统时间、rtc时间以及时间同步

    修改linux的系统时间用date -s [MMDDhhmm[[CC]YY][.ss]] 但是系统重启就会从新和硬件时钟同步. 要想永久修改系统时间,就需要如下命令:hwclock hwclock - ...

  8. 数据库的group by 分组

    有一个表 查询结果为 用下面的代码写 select COUNT( case NumName when 'a' then NumName end ) as 'aaa', COUNT( case NumN ...

  9. Effective C++ Item 33 避免遮掩继承过来的名称

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie ? 不懂 c++为什么derived classes 内的名称要遮掩 base classe ...

  10. Oracle SQL Lesson (6) - 使用Join进行联合查询

    使用连接SQL 1999SELECT table1.column, table2.columnFROM table1[NATURAL JOIN table2] |[JOIN table2 USING ...