CSS学习笔记（三）——盒子模型

红太狼 2023-08-17 17:05 67阅读 0赞

CSS盒子模型

##### 盒子模型解释 #####

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。  
盒子模型示意图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。  
**设置宽高**

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
    height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

**设置边框**  
设置一边的边框，比如顶部边框，可以如下设置：

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
    border-top-width:10px;   /* 设置顶部边框粗细为10px */   
    border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
      dashed(虚线)  dotted(点线); */

**上面三句可以简写成一句：**

border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。  
四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

**设置内间距padding**

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
    padding-left:30px;     /* 设置左边内间距30px */ 
    padding-right:40px;    /* 设置右边内间距40px */ 
    padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
    四个方向的内边距值。 */
    padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
    padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
    padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
    padding：20px; /* 设置四边内边距为20px */

**设置外间距margin**  
外边距的设置方法和padding的设置方法相同，

**注意：**  
盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

**盒子宽度 = width + padding左右 + border左右  
盒子高度 = height + padding上下 + border上下**

--------------------

### margin相关技巧 ###

**1.设置元素水平居中：margin：x auto; 只能用在左右的宽度方向，不能用在上下方向  
2.margin负值让元素位移及边框合并**

理解练习  
1、制作一个600\*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>margin练习</title>
    	<style type="text/css">
    		.box{
    			width:598px;
    			height: 98px;
    			border: 1px solid #000;
    			margin: 100px auto ;
    		}
    	</style>
    </head>
    <body>
    	<div class="box"></div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 1]  
2、制作下面的菜单效果：  
![在这里插入图片描述][20190930105535229.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>margin练习</title>
    	<style type="text/css">
    		.box{
    			width:200px;
    			height: 150px;
    			margin-left: 100px;
    		}
    		.box div{
    			width: 200px;
    			height: 30px;
    			background-color: gold;
    			border:1px solid green;
    			margin-top: -1px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    </body>
    </html>

**外边框合并**  
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、设置一边的外边距，一般设置margin-top（常用）  
2、将元素浮动或者定位

例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直方向的外边距合并</title>
    	<style type="text/css">
    		.box{
    			width: 500px;
    			border:1px solid #000;
    			margin:50px auto 0;			
    		}
    		.box div{
    			margin: 20px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div>
    			HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。</div>
    		<div>
    			HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。</div>
    		<div>
    			HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。</div>
    		<div>
    			HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。<div>		
    		</div>
    	</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 2]

#### margin-top塌陷 ####

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框  
2、外部盒子设置 overflow:hidden （主要是解决盒子溢出问题）  
3、使用伪元素类  
用法：

.clearfix:before{
        content: '';
        display:table;
    }

举例：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>	</title>
    	<style type="text/css">
    		.clearfix:before{
    			content: "";
    			display:table;			
    		}
    		.con{
    			width: 300px;
    			height: 300px;
    			background-color: gold;
    			/*让里面的盒子居中：
    			方法一：给外部盒子设置边框
    			border:1px solid #000;*/
    
    			/*方法二：防止css溢出
    			overflow: hidden;*/			
    		}
    		.box{
    			width: 200px;
    			height: 100px;
    			background-color:green;
    			margin-top: 100px;
    			/*塌陷只针对margin-top*/
    			margin-left: 50px;
    		}
    	</style>
    </head>
    <body>
    	
    	
    	<div class="con clearfix">	
    		<div class="box">	
    		</div>
    	</div>
    	
    </body>
    </html>

网页效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 3]

#### css元素溢出 ####

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过**overflow**属性来设置。

overflow的设置项：  
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。  
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。  
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。  
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。  
5、inherit 规定应该从父元素继承 overflow 属性的值（不常用）。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>元素溢出</title>
    	<style type="text/css">
    		.box{
    			width: 300px;
    			height: 200px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			background-color: gold;
    			line-height: 30px;
    			/*overflow 
    			为hidden隐藏多余内容 常用
    			visible内容可见 
    			scroll内容滚动条显示 如果文字不多也会设置滚动条
    			auto内容溢出会自动设置纵向滚动条
    			inherit继承父元素的overflow属性值，很少用*/
    			overflow:hidden;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="box">
    		当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
    		1、visible默认值。内容不会被修剪，会呈现在元素框之外。
    		2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
    		3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    	</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]: /images/20230808/243aa9ab43bf4040a2fa77b3fb74ae2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 1]: /images/20230808/17251abaa4e548e8933a280c612d6460.png
[20190930105535229.png]: /images/20230808/e732798700d645a0b7a775f131b96a3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 2]: /images/20230808/086189df14a14b10be7d4bd3eeff847b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 3]: /images/20230808/888893e5f5b948cca71bac99cca9c9a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70 4]: /images/20230808/80777c97453848949965ed0683c3009a.png