盒模型是CSS定位布局的核心内容，页面中所有的元素都是放进一个容器内的，这个容器可以看成是一个盒子。可以通过CSS来控制这些盒子的各种显示属性，把这些盒子进行定位，完成整个页面的布局。在掌握了盒子模型以及其中每个元素的用法后，才能拥有较完善的布局观。
5.1盒模型的定义
web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。它们之间的关系，如图5-1所示。
一个页面由许多这样的盒子组成，这些盒子层层嵌套，互相影响，设计者在布局网页和定位Web元素时要充分考虑到这些要素，才能更自如地摆弄这些盒子。
而网页元素的定位实际上就是这些大大小小的盒子在页面中的定位，这些盒子在页面中是“浮动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会移动到上一块级元素所处的行中。要关注的是这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，其中盒子尺寸计算，是否浮动等要素是最需要关注的。
5.2 CSS元素的高度和宽度
5.2.1 盒模型的宽度
盒模型的宽度=左外边距(margin-left)+左边框(border-let)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-night)+右外边距(margin-right)。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding:0px;
}
img{
width: 50px;
height: 50px;
}
/*第五章CSS盒模型*/
div{
/*5.1盒模型的定义*/
/*5.2 CSS元素的高度和宽度*/
/*5.2.1 盒模型的宽度*/
width: 50px;
/*5.1.2 盒模型的高度*/
height: 50px;
/*5.3 边距设置和边框设置*/
border: 10px #ff0000 solid;
/*5.3.1 外边距设置*/
margin: 30px;
/*5.3.1.1 上外边距*/
/*5.3.1.2 右外边距*/
/*5.3.1.3 下外边距*/
/*5.3.1.4 左外边距*/
/*5.3.1.5 外边距*/
/*5.3.2 外边距的合并*/
/*5.3.2.1 行级元素外边距合并*/
display: inline;
/*5.3.2.2 块级元素外边距合并*/
display: block;
/*5.3.3 内边距设置*/
padding: 30px;
/*5.3.4 边框设置*/
border: 10px #ff0000 solid;
/*5.3.4.1上边框*/
border-top: thick #00ff00 solid;
/*5.3.4.2右边框*/
border-right: thin #00ffff dashed;
/*5.3.4.3下边框*/
border-bottom: medium #aaff00 inherit;
/*5.3.4.4 左边框*/
border-left:10px #0000ff double;
/*5.3.4.5 边框样式*/
/*5.3.4.6 边框宽度*/
/*5.3.4.7 边框颜色*/
/*5.3.5 新增边框属性*/
/*5.3.5.1圆角边框*/
border-radius: 15px;
/*5.3.5.2阴影边框 右偏移量 下偏移量 阴影宽度 阴影颜色*/
box-shadow:-10px 10px 30px #00ffaa;
/*5.3.5.3图片绘制边框*/
}
/* 5.4 CSS元素的定位*/
/*5.4.1 static 定位*/
position:static;/*默认定位方式，可省略*/
/*5.4.2 relative定位*/
position:relative;
top:30px;
left:40px;
/*5.4.3 absolute定位*/
/*5.4.3.1 相对浏览器绝对定位*/
/*5.4.3.2 相对父盒子绝对定位*/
/*5.4.4 fixed定位*/
/*5.5 CSS元素的浮动*/
/*5.5.1 盒子的浮动添加*/
/*5.5.2 盒子的浮动清除*/
</style>
</head>
<body>
<div><img src="img/flower.jpg"/></div>
<div><img src="img/flower.jpg"/></div>
</body>
</html>width: 60px;
5.2.2 盒模型的高度
盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(paddingtop)+内容高度(height)+下内边距(padding-bottom)+下边框(border-botom)+下外边距(margin-bottom)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding:0px;
}
img{
width: 50px;
height: 50px;
}
/*第五章CSS盒模型*/
div{
/*5.1盒模型的定义*/
/*5.2 CSS元素的高度和宽度*/
/*5.2.1 盒模型的宽度*/
width: 50px;
/*5.1.2 盒模型的高度*/
height: 50px;
/*5.3 边距设置和边框设置*/
border: 10px #ff0000 solid;
/*5.3.1 外边距设置*/
margin: 30px;
/*5.3.1.1 上外边距*/
/*5.3.1.2 右外边距*/
/*5.3.1.3 下外边距*/
/*5.3.1.4 左外边距*/
/*5.3.1.5 外边距*/
/*5.3.2 外边距的合并*/
/*5.3.2.1 行级元素外边距合并*/
display: inline;
/*5.3.2.2 块级元素外边距合并*/
display: block;
/*5.3.3 内边距设置*/
padding: 30px;
/*5.3.4 边框设置*/
border: 10px #ff0000 solid;
/*5.3.4.1上边框*/
border-top: thick #00ff00 solid;
/*5.3.4.2右边框*/
border-right: thin #00ffff dashed;
/*5.3.4.3下边框*/
border-bottom: medium #aaff00 inherit;
/*5.3.4.4 左边框*/
border-left:10px #0000ff double;
/*5.3.4.5 边框样式*/
/*5.3.4.6 边框宽度*/
/*5.3.4.7 边框颜色*/
/*5.3.5 新增边框属性*/
/*5.3.5.1圆角边框*/
border-radius: 15px;
/*5.3.5.2阴影边框 右偏移量 下偏移量 阴影宽度 阴影颜色*/
box-shadow:-10px 10px 30px #00ffaa;
/*5.3.5.3图片绘制边框*/
}
/* 5.4 CSS元素的定位*/
/*5.4.1 static 定位*/
position:static;/*默认定位方式，可省略*/
/*5.4.2 relative定位*/
position:relative;
top:30px;
left:40px;
/*5.4.3 absolute定位*/
/*5.4.3.1 相对浏览器绝对定位*/
/*5.4.3.2 相对父盒子绝对定位*/
/*5.4.4 fixed定位*/
/*5.5 CSS元素的浮动*/
/*5.5.1 盒子的浮动添加*/
/*5.5.2 盒子的浮动清除*/
</style>
</head>
<body>
<div><img src="img/flower.jpg"/></div>
<div><img src="img/flower.jpg"/></div>
</body>
</html>height: 40px;
代码如下：
img{
width: 50px;
height: 50px;
}
<div><img src="img/flower.jpg"/></div>
<div><img src="img/flower.jpg"/></div>
5.3 边距设置和边框设置
margimn-border-padding模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上一右一下一左的顺序(顺时针)。
5.3.1 外边距设置
外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-right、margin-bottom、margin-left,也可以用 margin 属性一次性设置所有外边距。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding:0px;
}
img{
width: 50px;
height: 50px;
}
/*第五章CSS盒模型*/
div{
/*5.1盒模型的定义*/
/*5.2 CSS元素的高度和宽度*/
/*5.2.1 盒模型的宽度*/
width: 50px;
/*5.1.2 盒模型的高度*/
height: 50px;
/*5.3 边距设置和边框设置*/
border: 10px #ff0000 solid;
/*5.3.1 外边距设置*/
margin: 30px;
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
