1、盒子模型的概念

2、宽度属性

1、宽度属性的设置的值可以是下面几种：

width：长度值 | 百分比 | auto
max-width：长度值 | 百分比 | auto
min-width：长度值 | 百分比 | auto

2、通过代码理解一下max-width和min-width设置长度值。

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ background-color:#ececec; width:400px;}
		.one{max-width:500px;}
		.two{min-width:500px;}
	</style>
</head>
<body>
		<p>盒子模型的宽度width：400px</p>
		<p class="one">盒子模型最大宽度max-width：300px</p>
		<p class="two">盒子模型最小宽度min-width：250px</p>
</body>
</html>

首先要注意的是，p是块级元素，块级元素单独占一整行，所以设置了背景颜色，默认情况下是贯穿于整个浏览器的，然后看一下在浏览器中的效果：max-width为500px是只能比500px小，那么400px符合要求，就是400px的长度，min-width是只能比500px大，所以400px不符合要求，就为500px。

3、长度百分比：给长度设置百分比，百分比是相对于父级元素来说的。

3、高度属性

1、高度的值的设置和宽度的设置差不多是一样的：

height：长度值 | 百分比 | auto
max-height：长度值 | 百分比 | auto
min-height：长度值 | 百分比 | auto

2、代码来看结果：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ background-color:#ececec; height:200px;}
		.one{max-height:100px;}
		.two{min-height:100px;}
	</style>
</head>
<body>
		<p>盒子模型的宽度width：400px</p>
		<p class="one">盒子模型最大宽度max-width：300px</p>
		<p class="two">盒子模型最小宽度min-width：250px</p>
</body>
</html>

下面来看看效果：因为max-height为100px，高度200px超过了100px，不符合要求，所以就是100px，而min-height为100px，200px超过了100px，符合要求，所以第三段内容就是200px。

4、哪些元素可以设置height和width属性

1、首先要注意的是：当我们不设置height和width属性的时候，他们的值都是auto，width默认就是贯穿父级元素的宽度，height就是内容的高度。

2、能设置高和宽属性的有块级元素和替换元素：<p> <div> <h1>~<h6> <ul> <ol> <li> <dl> <dt> <dd>等块级元素，<img> <input> <textarea> 等替换元素。

3、<img>如果同时设置了行内的宽和高，又设置了CSS的宽和高，那么图片是采用的CSS的样式，如果只设置了height和width两者中的一种，那么另外一种属性也会随之等比例变化缩放。

5、边框属性

1、边框的属性有边框宽度（border-width）、边框颜色（border-color ）、边框样式（border-style）

2、设置边框的宽度属性：

border-width:thin | medium | thick | 长度值

3、设置边框的样式属性：注意我们一定要去设置border-style这个属性，不然只设置border-width和border-color是没有效果的。同时边框是可以分别去定义的：

下面示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{line-height:100px;height:100px;background-color:#ececec;width:300px;text-align:center;border-width:10px;border-color:red;border-style:solid;}
	</style>
</head>
<body>

		<p>盒子模型的宽度width：400px</p>

</body>
</html>

4、边框属性简写：

border:  [宽度] [样式] [颜色]
border-top：[宽度] [样式] [颜色]
border-bottom：[宽度] [样式] [颜色]
border-left：[宽度] [样式] [颜色]
borderright：[宽度] [样式] [颜色]

5、padding属性

1、设置了padding，盒子在网页中占的空间，就不单单和width和height有关系了，与padding也有关系。

6、margin属性

1、首先要注意的就是margin可以为负值，这个和padding是不一样的地方

2、另外margin为auto的时候，会自动有个水平居中显示的效果，系统会自动帮你计算外边距：这个是相对父级元素居中显示的。

3、外边距和并，同时设置了外边距，合并的外边距将是外边距最大的那个值：

7、盒子模型计算

8、盒子模型的应用

1、html标签分为块级元素和行内元素：p> <div> <h1>~<h6> <ul> <ol> <li> <dl> <dt> <dd>等块级元素，还有<span> <a> <em> 等行内元素，其中块级元素是独占一行的。行内元素是在同一行连续展示的。

2、能不能将块级元素和行内元素做一下转化呢？通过display属性可以实现两者相互之间的转换：

display :inline(成为行内元素) | block（成为块级元素） | inline-block（行内元素，有块级元素的特征） | none（子元素不被显示）

3、怎么解决行内元素之间有缝隙的问题：外部套一个父标签，样式中font-size设置为0px，然后单独给行内元素设置字体大小：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ border:medium solid #000000;display:inline;font-size:16px;} /*行内样式单独设置font-size*/
		span{border:medium solid #000000;display:block;}
		.zerofont{font-size:0px;marginbottom:10px;} 、/*父级元素的font-size设置为0px*/
		
	</style>
</head>
<body>
	<div class="zerofont">
		<p>块级转化为行内元素</p>
		<p>块级转化为行内元素</p>
		<p>块级转化为行内元素</p>
	</div>
		<span>行内元素转化为块级元素</span>
		<span>行内元素转化为块级元素</span>
		<span>行内元素转化为块级元素</span>
</body>
</html>

4、对于块级元素（包括display：block），它的width，height，margin，padding属性都是有效的

5、对于行内元素（包括display：inline），它的width，height都无效，margin和padding也只在水平方向上有效，垂直方向无效。

6、行内块元素（display：inline-block），属于行内元素，却也可以设置宽和高，以及水平和垂直方向上的margin和padding。

7、子元素不显示（display：none）,用下面的实例代码来演示一下：没有将鼠标放在<a>标签的内容上时，<span>标签中的内容是不显示的，把鼠标放在<a>标签的内容时：<span>中的内容就显示出来了。

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		span{display:none;}s
		a:hover span{display:inline-block;}
	</style>
</head>
<body>	
		<a href="#">后面隐藏着。。。<span>行内元素转化为块级元素</span></a>
</body>
</html>

9、示例总结

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		div,p,span{margin:0px;padding:0px;font-family:"微软雅黑";margin:0 auto;}
		.course{width:220px;background-color:#f2f4f6;border:1px solid #ececec;}
		.list1{width:100%;height:150px;background-color:#040a10;text-align:center;}
		.content{font-size:20px;color:#fff;font-weight:bold;line-height:150px;}
		.list2{font-size:14px;border-bottom:1px solid #d9dde1;margin:0px 15px;padding: 10px 5px 5px 5px;line-height:1.5em;}
		.special{border-bottom:none;}
		span{color:#93999f;font-size:12px;}
	</style>
</head>
<body>	
		<div class="course">
			<div class="list1">
				<p class="content">前端课程安排</p>
			</div>
			<div class="list2">
				<p>html基础课程</p>
				<span>4666人在学</span>
			</div>
			<div class="list2">
				<p>html基础课程</p>
				<span>4666人在学</span>
			</div>
			<div class="list2 special">
				<p>html基础课程</p>
				<span>4666人在学</span>
			</div>
		</div>
</body>
</html>

我们可以在浏览器看一下实现的效果是什么样的：

前端基础夯实--（CSS系列）CSS盒子模型