html中所有的标签其实都是盒子。
以span,b,strong,a等标签为例。
span,b,strong,a等标签是行标签,不是块标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<base target="_self">
<style>
span,b,strong,a{ 运用并集选择器给span,b,strong,a等标签设置属性。
display:inline-block; 运用display:inline-block; 将行标签转化成块标签。
width:100px;
height:100px;
border:6px solid #000;
padding:20px;
margin:20px;
}
</style>
</head>
<body>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<a href="#">我是超链接</a>
</body>
</html>
由上面的例子可以证明:html中所有的标签都可以设置高度、宽度、内边距、边框、外边距。
一个盒子包括的:
内容区域:
蓝色的这一部分是存放内容和数据的部分。
存放数据和内容的区域大小与设置的width,height相同。
内边距: 边框: 外边距:
现实生活中的盒子模型:
盒子宽度和高度的理解:
(1)内容的宽度和高度:
就是通过标签的width和height属性设置内容的宽度和高度的。
(2)元素的宽度和高度:
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 ;
高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框 ;
(3)元素空间的宽度和高度:(元素空间=元素所占用的空间大小)
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距
盒子的box-sizing属性:
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:300px;
height:300px;
background-color:#F00;
}
.box2{
width:200px;
height:200px;
background-color:#009;
float:left;
}
.box3{
width:100px;
height:200px;
background-color:#060;
float:right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
要求:
给蓝色部分周围加上粗细为20px的边框。
如果直接给蓝色部分加上粗细为20px的边框,那么就会改变原有的布局,因为原来的元素的宽度为width,当加上20px的边框的时候,整个元素就变成了宽度为width+20px+20px、高度为height+20px+20px的元素,也就是说原来的元素变大了,所以说改变了整体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:300px;
height:300px;
background-color:#F00;
}
.box2{
width:200px;
height:200px;
background-color:#009;
float:left;
border:20px solid;
}
.box3{
width:100px;
height:200px;
background-color:#060;
float:right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:300px;
height:300px;
background-color:#F00;
}
.box2{
width:200px;
height:200px;
background-color:#009;
float:left;
border:20px solid;
box-sizing:border-box;
}
.box3{
width:100px;
height:200px;
background-color:#060;
float:right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
(1)box-sizing: 这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽度和高度不变。
(2)增加padding和border后,要想保证盒子元素的宽度和高度不变,那么就要减少一部分内容部分的空间,也就是 减少内容的宽度和高度,从而维持整体盒子元素的不变。
box-sizing:取值
1.content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
2.border-box
元素的宽高 = width属性/height属性
盒子居中和内容居中:
(1)text-align:center; 作用:设置盒子中储存的文字/图片水平居中。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:800px;
height:500px;
background-color:#F00;
}
</style>
</head>
<body>
<div class="box1">
我是文字
</div>
</body>
</html>
效果图:
添加完text-align:center;属性。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:800px;
height:500px;
background-color:#F00;
text-align:center;
}
</style>
</head>
<body>
<div class="box1">
我是文字
</div>
</body>
</html>
效果图:
在大盒子中插入一张图片,这张图片在添加text-align:center;前后的变化和文字“我是文字”变化是一样的。
(2)margin:0 auto; 作用:让盒子自己水平居中。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<base target="_self">
<style type="text/css">
.box1{
width:800px;
height:500px;
background-color:#F00;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box1">
我是文字
</div>
</body>
</html>
效果图;