全部章节 >>>>

每个盒子都有边界（margin）、边框（border）、填充（padding）和内容（content）4 个属性，其中填充、边框、边界属性分别由 CSS3 的 padding、border、margin 属性设定，而内容属性宽度和高度则由 width 属性和 height 属性设定。

在网页设计上，内容常指文本、图片等元素，但是也可以指嵌套的 HTML 元素；填充是指 HTML 元素的内容与其边框之间的填充厚度；边框是指盒子的外围；边界是指 HTML 元素与其他元素之间的距离。

每个 HTML 元素均可以看作一个盒子，盒子存在 4 条边，因此边框、填充和边界属性均包含 4 个部分，分别是上（top）、右（right）、下（bottom）、左（left），这 4 个部分可以同时设置，也可以分别设置。

7.1.2 盒子的大小

在 CSS 中，可以通过设置 width 和 height 属性的值来控制内容content 所占据的大小，但值得注意的是，盒子还有其他 3 个属性 border、padding 以及 margin，这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小。

一个盒子实际的大小 = 内容 + 填充 + 边框

所占据空间的大小 = 内容 + 填充 + 边框 + 边界

示例：

<div id="t">

	宽度：200px<br/>高度：150px<br/>

	填充：上下10px 左右20px<br/>

	边框：5px<br/>

	边界：10px

</div>

<style type="text/css">

	*{padding:0px;margin:0px;}

	#t{

		width:200px;

		height:150px;

		padding:10px 20px;

		border:5px solid red;

		margin:10px;

	}

</style>

计算盒子的实际大小如下：

（1）盒子宽度 = 内容的宽度 + 左边距 + 右边距 + 左边框宽度 + 右边框宽度，其中内容宽度为 200px、左右边距均为 20px、左右边框宽度均为 5px，因此盒子的实际宽度为 250px。

（2）盒子高度 = 内容的高度 + 上边距 + 下边距 + 上边框宽度 + 下边框宽度，其中内容高度为 150px、上下边距均为 10px、上下边框宽度均为 5px，因此盒子的实际高度为 180px。

所以，盒子的实际大小为 250px×180px。

计算盒子所占据的空间大小如下：

（1）盒子实际占据宽度 = 盒子实际宽度 + 左外边距 + 右外边距，其中盒子实际宽度为 250px、左右外边距均为10px，因此盒子实际占据的宽度为 270px。

（2）盒子实际占据高度 = 盒子实际高度 + 上外边距 + 下外边距，其中盒子实际高度为 180px、上下外边距均为10px，因此盒子实际占据的高度为 200px。

所以，盒子所占据的空间大小为 270px×200px。

灵活利用盒子的相关属性，我们才有能力应付各种各样的排版要求。例如经常会设置内容文本的居中，而文本的居中又分为水平方向居中和垂直方向居中。

示例：

<style type="text/css">

#cat {

	width: 120px;

	height: 20px;

	border: 1px solid lightgray;

	color: red;

	font-size: 12px;

	text-align: center;

	padding-top: 10px;

}

</style>

<div id="cat"> 我的购物车 </div>

7.1.3 盒子之间的关系

一个页面由各种各样的标签元素构成，每个标签都是一个盒子，当盒子在页面中进行排列时，根据盒子之间的位置关系，分为以下 3 种。

垂直盒子

水平盒子

重叠盒子

margin 不同于 border 和 padding 只能取正数，margin 的值可以设置为负数。

7.2 标准文档流

7.2.1 标准文档流概述

标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式，在这种标准方式中，浏览器会根据读取到标签的先后顺序来排列HTML元素，在显示网页时，元素按照从左到右、自上而下的顺序进行排列。

在 CSS 中将 HTML 中标签分为块状标签和行内标签：

1、常见的块状标签

标题（<h1>~<h6>）、

段落（<p>）、

水平线（<hr/>）、

列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）、

表格（<table>）、

层（<div>）、

表单 (<form>)

2、常见的行内标签

图像（<img>）、范围（<span>）、换行（<br/>）、超链接（<a>）

行内标签与块状标签的区别：

1、排列方式不同

行内元素按照从左到右的方式进行排列，多个行内元素显示在同一行，只有当一行排列完毕后，

才会开始一个新行。块状元素各占据一行，则按照自上而下的方式进行排列。

2、内嵌元素不同

块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素，只能包含文本或者其

他行内元素。

3、属性设置不同

行内元素与块状元素的属性设置不同，主要体现在盒子模型中，行内元素设置 width 属性、height 属性时无效，但可以设置 line-height 属性，再设置 margin 属性、padding 属性时，对于上下方向上的设置无效。

样式规则中所设置的样式属性对于块状元素全部有效，而对于行内元素来说，width 属性、

height 属性未能影响元素的大小，padding-top 属性以及 margin-top 属性设置也无效。

7.2.2 display 属性

CSS 中 display 可以隐藏 HTML 元素包括 div 层

display:none|block;

隐藏 div

<div style="display:none;"></div>

显示div

<div style="display:block;"></div>

隐藏 HTML 元素是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域。

7.2.3 visibility 属性

CSS 中 visibility 可以隐藏/显示 html 元素包括 div 层

visibility：hidden|visible;

隐藏 div

<div style="visibility:hidden;"></div>

显示 div

<div style="visibility:visible;"></div>

display 和 visibility 控制的分别是 HTML 元素是否存在和是否显示，display 的属性定义该元素存在或不存在，而 visibility 的属性只是控制该元素是否显示出来，实际上还是存在的。

7.3 盒子浮动

7.3.1 float 属性

浮动定位是网页中最为重要的定位方式，浮动定位使用float属性，常用于div等块状结构元素的浮动布局。

语法：

float : none | left |right

参数	说明
left	表示文本或图像会移动到父元素的左侧
right	表示文本或图像会移动到父元素的右侧
none	是默认值，表示文本或图像会显示于它在文档中出现的位置

示例：

<body>

	<div class="father">

		<div class="son1">Box盒子1</div>

		<div class="son2">Box盒子2</div>

		<div class="son3">Box盒子3</div>

		<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。若果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定。</p>

	</div>

</body>

<style type="text/css">

	body {margin: 15px; font-family: Arial;font-size: 12px;}

	.father {background-color: #ffff99;border: 1px solid #111111;padding: 5px;}

	.father div {padding: 10px;margin: 15px;border: 1px dashed #111111;background-color: #7FFFD4;}

	.father p {border: 1px dashed #111111;background-color: #ff90ba;}

	.son1 { float: left; /* 这里设置son1的浮动方式*/}

	.son2 { float: right; /* 这里设置son2的浮动方式*/}

	.son3 { float: left; /* 这里设置son3的浮动方式*/}

</style>

7.3.2 清除浮动

浮动产生的原因：

一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float 浮动就产生了。左边盒子使用左浮动，右边盒子使用右浮动，两个盒子被包在另外一个盒子中。

浮动产生的负作用：

背景不能显示
边框不能撑开
margin padding设置值不能正确显示

清除浮动影响的方法：

对父级设置适合 CSS 高度
对父级设置适合高度样式清除浮动，这里对“.box1-max”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是 100px+ 上下边框为 2px，这样具体父级高度为 102px。

示例：

.box1-max {

	width: 400px;

	border: 1px solid #F00;

	background: #FF0;

	height: 102px;

}

清除浮动影响的方法：

对父级设置适合 CSS 高度
clear:both 清除浮动
在父级“</div>”结束前加此div引入“clear:both”样式即可清除浮动。

示例：

<body>

	<div class="box1-max">

		<div class="box2-left">left 浮动 </div>

		<div class="box3-right">right 浮动 </div>

		<div class="clear"></div>

	</div>

</body>

<style type="text/css">

	.box1-max {width: 400px;border: 1px solid #F00;background: #FF0;}

	.box2-left,.box3-right {width: 180px;height: 100px;border: 1px solid #00F;background: #FFF;}

	.box2-left {float: left;}

	.box3-right {float: right;}

	.clear {clear: both}

</style>

清除浮动影响的方法：

对父级设置适合 CSS 高度
clear:both 清除浮动
父级 div 定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

7.4 盒子定位

盒子定位通过设置css样式的position 属性。

7.4.1 静态定位

position 属性的默认值static表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。

语法：

position: static;

7.4.2 相对定位

相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。

语法：

position: relative;

示例：

p{

	font:bold 20px "宋体";

	text-align:center;

	margin-top: 0;

	color:#000000;

	background-color:transparent;

	position:relative;

	top:-90px;

}

7.4.3 固定定位

语法：

position: fixed;

示例：

p.one {

	position: fixed;

	left: 5px;

	top: 5px;

}

p.two {

	position: fixed;

	top: 30px;

	right: 5px;

}

7.4.4 绝对定位

绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上。

语法：

position: absolute;

示例：

p{

	position:absolute;

	top:150px;

	left:250px;

	......

}

7.4.5 z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

语法：

z-index:数字;

示例：

img.x {

	position: absolute;

	left: 0px;

	top: 0px;

	z-index: 1

}

总结：

盒子模型（Box Model）是每一个标签都会在页面上生成一个盒子。
每个盒子都有边界（margin）、边框（border）、填充（padding）和内容（content）4 个属性，其中填充、边框、边界属性分别由 CSS 的 padding、border、margin 属性设定。
在 CSS 中，可以通过设置 width 和 height 属性的值来控制内容content 所占据的大小。
盒子之间的位置关系:垂直盒子、水平盒子和重叠盒子。
在 CSS 中将 HTML 中标签分为块状标签和行内标签。
浮动定位是网页中最为重要的定位方式，浮动定位使用float属性，常用于div等块状结构元素的浮动布局。
盒子定位包含静态定位、相对定位、固定定位和绝对定位。

HTML网页设计基础笔记 • 【第7章盒子模型】的更多相关文章

HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节内容第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章排列页面内容] 第3章 ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
html学习第三天—— 第11章盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
CSS学习笔记（float和盒子模型）
1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+pa ...
HTML第六章盒子模型
什么是盒子模型: (1)边框: (2)内边距: (3)外边距: (4)元素内容·: (5)背景色·: 边框: 属性: 颜色(border-color),粗细(border-width),样式(bord ...
C++ primer plus读书笔记——第9章内存模型和名称空间
第9章内存模型和名称空间 1. 头文件常包含的内容: 函数原型. 使用#define或const定义的符号常量. 结构声明. 类声明. 模板声明. 内联函数. 2. 如果文件名被包含在尖括号中,则C ...
HTML网页设计基础笔记 • 【第6章背景和阴影】
全部章节 >>>> 本章目录 6.1 背景属性 6.1.1 背景颜色 6.1.2 背景图片 6.1.3 背景图片的重复方式 6.2 背景图片的定位 6.2.1 backg ...
HTML网页设计基础笔记 • 【第8章页面布局与规划】
全部章节 >>>> 本章目录 8.1 表格布局 8.1.1 表格布局 8.2 流式布局 8.2.1 瀑布流布局 8.2.2 masonry 实现瀑布流布局 8.3 div ...
HTML网页设计基础笔记 • 【第5章常用的样式属性】
全部章节 >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...

随机推荐

C++构造函数和析构函数初步认识(2)
构造函数的三个作用1.构造对象2.对象初始化3.类型转换 //Test1.h #include<iostream> using namespace std; //构造对象 //初始化对象 ...
Output of C++ Program | Set 6
Predict the output of below C++ programs. Question 1 1 #include<iostream> 2 3 using namespace ...
SpringMVC原理分析
Spring MVC主要包括以下要点: 1:由DispatcherServlet控制的整个流程: 2:注解驱动的控制器,其中包括请求映射.数据的绑定和格式化: 3:文件上传: 4:一些杂项,如静态资源 ...
List如何一边遍历，一边删除？
1.新手常犯的错误可能很多新手(包括当年的我,哈哈)第一时间想到的写法是下面这样的: public static void main(String[] args) { List<String& ...
【MySQL】查询不在表中的数据
1.方法一(仅适用单个字段):使用 not in ,比较容易理解,缺点是效率低如:select A.ID from A where A.ID not in (select ID from B): 2 ...
java 多线程的状态迁移常用线程方法分析
一.线程的各个状态图中的线程状态(Thread.Stat 中定义的Enum 名)NEW.RUNNABLE .TERMINATED.WAITING.TIMED_WAITING 和BLOCKED 都能够 ...
使用Zabbix + Python对Mysql监控
一.背景介绍随着公司业务的变迁,公司的开发数据库以mysql为主了.mysql服务器层面的监控,例如CPU.内存.硬盘空间等就用zabbix自带的linux模板即可.数据库层面zabbix也自带了一 ...
*CTF pwn write up
第一次做出XCTF的题目来,感谢wjh师傅的指点,虽然只做出一道最简单的pwn题,但是还是挺开心的.此贴用来记录一下,赛后试着看看其他大师傅的wp,看看能不能再做出一道题来. babyheap 程序有 ...
GDAL重投影重采样像元配准对齐
研究通常会涉及到多源数据,需要进行基于像元的运算,在此之前需要对数据进行地理配准.空间配准.重采样等操作.那么当不同来源,不同分辨率的数据重采样为同一空间分辨率之后,各个像元不一一对应,有偏移该怎么办 ...
UVA294 约数 Divisors 题解
Content 给定 \(n\) 个区间 \([l,r]\),求出每个区间内约数个数最大的数. 数据范围:\(1\leqslant l<r\leqslant 10^{10}\),\(r-l\le ...

HTML网页设计基础笔记 • 【第7章 盒子模型】

全部章节 >>>>

7.1 盒子模型原理

7.1.1 盒子模型概述

7.1.2 盒子的大小

7.1.3 盒子之间的关系

7.2 标准文档流

7.2.1 标准文档流概述

7.2.2 display 属性

7.2.3 visibility 属性

7.3 盒子浮动

7.3.1 float 属性

7.3.2 清除浮动

7.4 盒子定位

7.4.1 静态定位

7.4.2 相对定位

7.4.3 固定定位

7.4.4 绝对定位

7.4.5 z-index 属性

总结：

HTML网页设计基础笔记 • 【第7章 盒子模型】的更多相关文章

随机推荐

热门专题

HTML网页设计基础笔记 • 【第7章盒子模型】

HTML网页设计基础笔记 • 【第7章盒子模型】的更多相关文章