content宽度和高度_contentstyle-CSDN博客

本文链接：https://blog.csdn.net/ice_yr/article/details/97827580

div {   /*外盒尺寸计算（元素空间尺寸）*/
    	width: 100px;
    	height: 100px;
    	background-color: blue;
    	border: 5px solid red;    /*4个边框 110 5+5*/
    	/*空间尺寸： width+border*/
    	padding: 10px; /* left right 10+10 (加上前面的一共130)*/
    	margin: 20px;      /*left  right 20+20  （加上前面的一共170）*/
    	/*空间尺寸: width + border + padding + margin;*/
    	/*内盒(实际)尺寸: width + border + padding;  130*/
    }

计算盒子尺寸

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    div {  
    	width: 59px;
    	height: 33px;
    	border: 1px solid #c1c1c1;
    	margin: 200px;
    	font-size: 16px;
    	color: #666;
    	line-height: 33px;
    	border-radius: 5px 0 0 5px;
    	padding-left: 15px;  /* 给了padding值盒子会增大*/
    	/*74+15=89*/
    	/*74-15=59*/
    }	
	
	</style>	
</head>
<body>
	<div>新闻</div>
</html>

注意：
1.宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
2.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
3.如果一个盒子没有给定宽度/高度或继承父亲的宽度/高度，则padding不会影响本盒子大小
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			height: 30px;
			border: 1px solid red;
			padding-left: 20px;  /*因为这个盒子没有宽度所以padding不会影响盒子的宽度 ，width：100%也会影响*/
		}
		nav {
			width: 300px;
			height: 40px red; 
		}
		p {
			/*因为p没有指定宽度，所以会默认和父亲一样宽 块级元素*/
			height: 20px;
			background-color: skyblue;
			padding-left: 30px;    /*此时padding也不会影响盒子的宽度*/
		}
	</style>
</head>
<body>
	<div>123</div>
	<nav>
		<p>456</p>
	</nav>
</body>
</html>