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

盒子模型

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

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

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

}

网页显示：

盒子模型显示：

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

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

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

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

如下图所示：

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

有三个常用属性值：

1）block   显示为块级元素

2）inline  行内元素

3）none  不显示

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

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

  1. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  2. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  3. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  4. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  6. css中盒子模型与box-sizing属性

    盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...

  7. CSS的盒子模型有哪些，区别是什么

    1)盒模型: 内容(content).填充(padding).边界(margin). 边框(border)   2)有两种, IE 盒子模型.标准 W3C 盒子模型:IE的content部分包含了 b ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

随机推荐

  1. JavaServlet 路径书写总结

    在写javaweb项目的时候,总会遇到路径书写的问题,现在将其作个总结. 在javaweb中需要书写路径的地方主要有这四大类: 客服端路径 超链接 表单 重定向 服务器端路径 转发 包含 资源获取路径 ...

  2. JavaEE 面试题总结

    一. JDBC 4 1. Java中访问数据库的步骤 4 2. Statement,PreparedStatement,CallableStatement的功能.特点. 4 3. 如何利用JDBC的A ...

  3. 关于 Angular引用Material出现node_modules/@angular/material/button-toggle/typings/button-toggle.d.ts(154,104): error TS2315: Type 'ElementRef' is not generic.问题

    百度了好久 ,,,最后谷歌出来了.. 该错误可能来自于您将@ angular / material设置为6.0.0, 但所有其他Angular包都是5.x.您应该始终确保Material主要版本与An ...

  4. Easyui下的点击回车键跳转到下个控件

    在Easyui框架下,JavaScript 中的 onKeyDown事件居然失效了.所以使用了另外的函数去实现点击回车键跳转到下个控件. /** * 点击回车键跳转到下个控件; * @param ol ...

  5. 在centos7云服务器上搭建Apache服务器并访问到你的网站

    使用X-shell ssh安全连接到云服务器 https://mail.qq.com/cgi-bin/mail_spam?action=check_link&url=https://www.n ...

  6. spring-mybatis整合异常2

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource' ...

  7. MySQL超大表如何提高count速度

    经常用到count统计记录数,表又超级大,这时候sql执行很慢,就是走索引,也是很慢的,怎么办呢? 1.这个时候我们就要想为什么这么慢:根本原因是访问的数据量太大,就算只计算记录数也是很慢的. 2.如 ...

  8. 4.1 基本类型和引用类型的值【JavaScript高级程序设计第三版】

    ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基 ...

  9. <Docker学习>5. docker数据管理

    当我们创建了一个tomcat容器,如何简单部署一个web应用?如何将war包放入到容器中?也就是说怎么样把文件从宿主机中 "放入" 到容器中? docker cp命令可以将宿主机本 ...

  10. C语言函数篇（二）函数参数基础设计

    形参实现一种数据传入的接口 ,由 实参 拷贝给 形参. 拷贝!!!!!!!!!!! 例1: void func(int tmp){ //意图是实现传进来的参数 +1 tmp++; } int mian ...