CSS——（2）盒子模型与标准流
上篇博客《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）盒子模型与标准流的更多相关文章
- 【css】IE盒子模型和标准W3C盒子模型
其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- css中盒子模型与box-sizing属性
盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...
- CSS的盒子模型有哪些，区别是什么
1)盒模型: 内容(content).填充(padding).边界(margin). 边框(border) 2)有两种, IE 盒子模型.标准 W3C 盒子模型:IE的content部分包含了 b ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
随机推荐
- 【JS-Java-EL】JavaScript和Java(EL表达式)引发的 Uncaught SyntaxError: Unexpected token ILLEGAL
2018.10.14 BUG原因: 在较早期的代码中,容易出现 JS 拼接 HTML 代码字符串的情况.如 // 页面 test.jsp 内部的 JS 代码 // ${} JSP中EL语法,内部为Ja ...
- 第6章 新建工程-寄存器版—零死角玩转STM32-F429系列
第6章 新建工程—寄存器版 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...
- 九九乘法表（Python实现）
a = 1 #while实现 while a: b = 1 while b: print(str(b)+'*'+str(a),end='=') print(a*b,end=' ') if b == a ...
- （排班表一）使用SQL语句使数据从坚向排列转化成横向排列
知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...
- 懒下载软件，一行代码连接wifi^_^
按键盘的windows+R,输入cmd,回车键 设置语句netsh wlan set hostednetwork mode=allow ssid=user key=possword 按回车键 启动语句 ...
- 【c学习-1】
#include<stdio.h> int main(){ int a,b,max; printf("请输入两个整数:"); //格式化输出函数 scanf(" ...
- Java中的二进制运算出错问题
问题: 最近在做Java web项目中需要计算金额总和,在这里出现了一个问题是我以前没有关注到的: System.out.println(2.0-1.1); 执行时候的console中打印输出的是 0 ...
- linux 源码安装php7.0 yum
PHP7和HHVM比较PHP7的在真实场景的性能确实已经和HHVM相当, 在一些场景甚至超过了HHVM.HHVM的运维复杂, 是多线程模型, 这就代表着如果一个线程导致crash了, 那么整个服务就挂 ...
- C# 控件置于最顶层、最底层、隐藏、显示
控件置于最顶层.最底层 pictureBox1.BringToFront();//将控件放置所有控件最前端 pictureBox1.SendToBack();//将控件放置所有控件最底端 控件隐藏.显 ...
- Leetcode 653. 两数之和 IV - 输入 BST
题目链接 https://leetcode.com/problems/two-sum-iv-input-is-a-bst/description/ 题目描述 给定一个二叉搜索树和一个目标结果,如果 B ...