CSS中盒子模型

来源：互联网发布：海美迪hd600a软件下载编辑：程序博客网时间：2024/06/07 00:37

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>

如果加上 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; 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>

效果图；

0 0