盒子模型
在html页面中，每一个元素相当于一个盒子，盒子和盒子之间有距离（margin外边距），盒子本身有厚度（border边框），盒子里面放置一个方形物体（width/height），方形物体与盒子之间用白色泡沫隔开（padding内边距）（这里的盒子可以看作一个装着电冰箱的大箱子）
以一个简单的盒子为例：
//第一步：新建一个盒子，盒子取名为div1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div class="div1"></div><!-- 第一步：新建一个盒子，盒子取名为div1 -->
</body>
</html>//第二步：新增style元素，清除盒子的默认样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 第二步：清除盒子的默认样式 */
</style>
</head>
<body>
<div class="div1"></div><!-- 第一步：新建一个盒子，盒子取名为div1 -->
</body>
</html>//第三步：给div1盒子添加样式：宽度设置为100像素、高度设置为100像素、背景颜色设置为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 第二步：清除盒子的默认样式 */
.div1{/* 第三步：给div1盒子添加样式 */
width: 100px;/* 宽度设置为100像素 */
height: 100px;/* 高度设置为100像素 */
background-color: red;/* 背景颜色设置为红色 */
}
</style>
</head>
<body>
<div class="div1"></div><!-- 第一步：新建一个盒子，盒子取名为div1 -->
</body>
</html>经过以上三步之后，运行得到如下效果：
//margin: 10px;/* 第四步：设置盒子的外边距为10像素 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 第二步：清除盒子的默认样式 */
.div1{/* 第三步：给div1盒子添加样式 */
width: 100px;/* 宽度设置为100像素 */
height: 100px;/* 高度设置为100像素 */
margin: 10px;/* 第四步：设置盒子的外边距为10像素 */
background-color: red;/* 背景颜色设置为红色 */
}
</style>
</head>
<body>
<div class="div1"></div><!-- 第一步：新建一个盒子，盒子取名为div1 -->
</body>
</html>经过第四步得到的效果图如下：可以看到明显的外边距效果
小知识：
- margin在设置外边距时可输入1个 或者 2个 或者 3个 或者 4个参数：
- margin:1px 2px 3px 4px; //分别表示 上边距、右边距、下边距、左边距
- margin:1px 2px 3px; //分别表示 上边距、左右边距、下边距
- margin:1px 2px; //分别表示 上下边距、左右边距
- margin:10px; //表示上下左右边距都设置为10像素
- margin-top:10px //上外边距设置为10像素
- margin-right:10px //右外边距设置为10像素
- margin-bottom:10px //下外边距设置为10像素
- margin-left:10px //左外边距设置为10像素
- 两个盒子是平级、同级关系，并且两个盒子上下排列的时候，上面盒子设置margin-bottom，下面盒子设置margin-top，则这两个值不会相加，只会取其中最大值作为两个盒子的间距
新建两个盒子的例子：（两个盒子平级、同级）
//新建两个盒子，并且给两个盒子添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.box{/* 4、给box盒子添加样式 */
width: 100px;
height: 100px;
background-color: yellow;
}
.box1{/* 5、给box盒子添加样式 */
width: 100px;
height: 100px;
background-color: #ff6ca6;
}
</style>
</head>
<body>
<div class="box"></div><!-- 1、新建一个盒子，盒子取名为box -->
<div class="box1"></div><!-- 2、新建一个盒子，盒子取名为box1 -->
</body>
</html>上面代码执行的效果图：
//在两个盒子的样式中添加 6 和 7，使盒子能够由上下排列变成左右排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.box{/* 4、给box盒子添加样式 */
display: inline-block;/* 6、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: yellow;
}
.box1{/* 5、给box盒子添加样式 */
display: inline-block;/* 7、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: #ff6ca6;
}
</style>
</head>
<body>
<div class="box"></div><!-- 1、新建一个盒子，盒子取名为box -->
<div class="box1"></div><!-- 2、新建一个盒子，盒子取名为box1 -->
</body>
</html>代码执行的效果图：
//修改8所在的位置：将两个盒子放在同一行，使得两个盒子中间的空格间隙消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.box{/* 4、给box盒子添加样式 */
display: inline-block;/* 6、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: yellow;
}
.box1{/* 5、给box盒子添加样式 */
display: inline-block;/* 7、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: #ff6ca6;
}
</style>
</head>
<body>
<!-- 8、将两个盒子放在同一行，使得两个盒子中间的空格间隙消失 -->
<div class="box"></div><!-- 1、新建一个盒子，盒子取名为box --><div class="box1"></div><!-- 2、新建一个盒子，盒子取名为box1 -->
</body>
</html>代码执行的效果图：
小知识：当设置两个盒子左右排列时，如果新建的两个盒子之间有 回车 或者 换行符 ，会导致两个盒子之间产生一个空格间隙
//在9的位置给box盒子设置20像素的右边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.box{/* 4、给box盒子添加样式 */
display: inline-block;/* 6、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 20px 0 0;/* 9、两个盒子之间设置边距：右边距设置为20像素 */
}
.box1{/* 5、给box盒子添加样式 */
display: inline-block;/* 7、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: #ff6ca6;
}
</style>
</head>
<body>
<!-- 8、将两个盒子放在同一行，使得两个盒子中间的空格间隙消失 -->
<div class="box"></div><!-- 1、新建一个盒子，盒子取名为box --><div class="box1"></div><!-- 2、新建一个盒子，盒子取名为box1 -->
</body>
</html>代码执行效果图：
//10所在的位置完全可以代替9所在的位置，使得代码更简洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.box{/* 4、给box盒子添加样式 */
display: inline-block;/* 6、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: yellow;
/*margin: 0 20px 0 0;*//* 9、两个盒子之间设置边距：右边距设置为20像素 */
margin-right: 20px;/* 10、等同于上一行的代码，但是更简洁 */
}
.box1{/* 5、给box盒子添加样式 */
display: inline-block;/* 7、设置盒子左右排列 */
width: 100px;
height: 100px;
background-color: #ff6ca6;
}
</style>
</head>
<body>
<!-- 8、将两个盒子放在同一行，使得两个盒子中间的空格间隙消失 -->
<div class="box"></div><!-- 1、新建一个盒子，盒子取名为box --><div class="box1"></div><!-- 2、新建一个盒子，盒子取名为box1 -->
</body>
</html>新建两个包含关系的盒子：
//新建两个盒子div3 div4，并且两个盒子是包含关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.div3{/* 4、给div3盒子添加样式 */
width: 300px;
height: 300px;
background-color: red;
}
.div4{/* 5、给div4盒子添加样式 */
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div3"><!-- 1、新建盒子，命名为div3 -->
<div class="div4"></div><!-- 2、在div3盒子里再新建一个盒子，命名div4 -->
</div>
</body>
</html>该代码执行的效果图：
//添加6所在的位置：给里面的盒子顶部外边距设置50像素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.div3{/* 4、给div3盒子添加样式 */
width: 300px;
height: 300px;
background-color: red;
}
.div4{/* 5、给div4盒子添加样式 */
margin-top: 50px;/* 6、给里面的盒子顶部外边距设置50像素 */
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div3"><!-- 1、新建盒子，命名为div3 -->
<div class="div4"></div><!-- 2、在div3盒子里再新建一个盒子，命名div4 -->
</div>
</body>
</html>对应的效果图：
//添加7所在的位置：解决6所在位置添加的功能影响到外面盒子的问题（这是第一种解决办法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.div3{/* 4、给div3盒子添加样式 */
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;/* 7、超出隐藏，解决6所在位置添加的功能影响到外面盒子的问题 */
}
.div4{/* 5、给div4盒子添加样式 */
margin-top: 50px;/* 6、给里面的盒子顶部外边距设置50像素 */
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div3"><!-- 1、新建盒子，命名为div3 -->
<div class="div4"></div><!-- 2、在div3盒子里再新建一个盒子，命名div4 -->
</div>
</body>
</html>对应的效果图：
//8所在的位置：外面的盒子div3设置顶部内边距，同时注释掉里面盒子div4的外边距（6所在的位置），同样可以解决7所解决的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/* 在style里面给所有盒子设置样式（属性） */
*{margin: 0;}/* 3、清除盒子的默认样式 */
.div3{/* 4、给div3盒子添加样式 */
width: 300px;
height: 300px;
background-color: red;
/*overflow: hidden;*//* 7、超出隐藏，解决6所在位置添加的功能影响到外面盒子的问题 */
padding-top: 30px;/* 8、外面的盒子div3设置顶部内边距，同时注释掉里面盒子div4的外边距（6所在的位置），同样可以解决7所解决的问题 */
}
.div4{/* 5、给div4盒子添加样式 */
/*margin-top: 50px;*//* 6、给里面的盒子顶部外边距设置50像素 */
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div3"><!-- 1、新建盒子，命名为div3 -->
<div class="div4"></div><!-- 2、在div3盒子里再新建一个盒子，命名div4 -->
</div>
</body>
</html>代码执行的效果图：
小知识：当父级盒子没有设置padding-top和border-top值时，如果给子盒子设置了margin-top值，这个值就会传递给父级盒子。如何解决：
- 方法1：给父级盒子设置一个CSS属性-overflow:hidden; //超出隐藏
- 方法2：不要给子盒子设置margin-top，给父级盒子设置padding-top（常用该方法）
- 注意：给父级元素设置padding-top时，父级元素会在原有高度之上增加，此时，一定要减去增加的那个高度
给盒子设置边框：
小知识：border 边框
- border:1px solid red; //设置边框的宽度、样式、颜色（边框常用的三个设置）
- border-top:1px solid red; //设置上边框的宽度、样式、颜色（边框常用的三个设置）
- border-width:1px; //单独设置边框的宽度
border-width:1px 2px 3px 4px; //上 右 下 左
border-width:1px 2px 3px; //上 左右 下
border-width:1px 2px; //上下 左右
border-width:1px; //将四个方向的边框宽度都设置为1像素 - border-style:solid; //单独设置边框的样式（solid表示实线 dashed表示虚线）
border-style:dashed solid dashed solid; //上 右 下 左（同border-width） - border-color:red; //单独设置边框的颜色
border-color:red green red green; //上 右 下 左（同border-width 和 border-style）
//3所在位置：给所有盒子设置通用样式。4所在位置：盒子边框设置5像素、虚线、红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
div{/* 3、给所有盒子设置通用样式 */
width: 200px;
height: 200px;
/*border: 5px dashed red;*//* 4、盒子边框设置5像素、虚线、红色 */
border-width: 5px;
border-style: dashed;
border-color: red;
}
</style>
</head>
<body>
<div class="div5"></div><!-- 1、新建一个盒子div5 -->
</body>
</html>效果图：
//更改5所在的位置：使用4个值分别控制边框四条边的样式（边框为上下虚线，左右实线）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
div{/* 3、给所有盒子设置通用样式 */
width: 200px;
height: 200px;
/*border: 5px dashed red;*//* 4、盒子边框设置5像素、虚线、红色 */
border-width: 5px;
border-style: dashed solid dashed solid;/* 5、设置边框为上下虚线，左右实线 */
border-color: red;
}
</style>
</head>
<body>
<div class="div5"></div><!-- 1、新建一个盒子div5 -->
</body>
</html>效果图：
//修改4所在的位置：只设置上边框（5像素、虚线、红色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
div{/* 3、给所有盒子设置通用样式 */
width: 200px;
height: 200px;
background-color: greenyellow;
border-top: 5px solid red;/* 4、盒子上边框设置5像素、虚线、红色 */
/* border-width: 5px;
border-style: dashed solid dashed solid;/* 5、设置边框为上下虚线，左右实线 */
/* border-color: red;
}
</style>
</head>
<body>
<div class="div5"></div><!-- 1、新建一个盒子div5 -->
</body>
</html>效果图：
//新建一个盒子，并且只设置盒子的边框（宽度、样式、颜色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red yellow blue green;/* 5、设置边框颜色 */
}
</style>
</head>
<body>
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
</body>
</html>效果图：
//添加6所在的位置：设置盒子的宽度为0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
width: 0;/* 6、设置盒子的宽度为0 */
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red yellow blue green;/* 5、设置边框颜色 */
}
</style>
</head>
<body>
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
</body>
</html>效果图：
//修改5所在的位置：上边框设置为红色，左右下边框设置为白色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
width: 0;/* 6、设置盒子的宽度为0 */
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red #fff #fff #fff;/* 5、设置边框颜色,#fff表示白色 */
}
</style>
</head>
<body>
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
</body>
</html>效果图：
//更改7所在的位置：设置整体的背景颜色为黑色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
width: 0;/* 6、设置盒子的宽度为0 */
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red #fff #fff #fff;/* 5、设置边框颜色,#fff表示白色 */
}
</style>
</head>
<body style="background-color: #000;"><!-- 7、设置整体的背景颜色为黑色 -->
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
</body>
</html>效果图：
//修改5所在的位置：上边框颜色设置为红色，其他方向的边框设置为透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
width: 0;/* 6、设置盒子的宽度为0 */
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red transparent transparent transparent;/* 5、设置边框颜色,transparent表示透明 */
}
</style>
</head>
<body style="background-color: #000;"><!-- 7、设置整体的背景颜色为黑色 -->
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
</body>
</html>效果图：
//在新建一个盒子div2：9所在的位置 设置盒子的下边框为蓝色，其他方向的边框为透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}/* 2、清除盒子的样式 */
.div1{
width: 0;/* 6、设置盒子的宽度为0 */
border-width: 20px;/* 3、设置边框宽度为20像素 */
border-style: solid;/* 4、设置外边框样式为实线 */
border-color: red transparent transparent transparent;/* 5、设置边框颜色,transparent表示透明 */
}
.div2{
width: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent blue;/* 9、设置盒子的下边框为蓝色，其他方向的边框为透明 */
}
</style>
</head>
<body style="background-color: #000;"><!-- 7、设置整体的背景颜色为黑色 -->
<div class="div1"></div><!-- 1、新建一个盒子div1 -->
<div class="div2"></div><!-- 8、再新建一个盒子div2 -->
</body>
</html>效果图：
注：两个三角形之间有间距是因为两个盒子的其他边框占据像素，但是设置为透明，所以看不到
小知识：border制作实心三角形
- border-width控制三角形的大小
- 设置盒子的宽度width:0;
盒子的计算公式：
//新建一个盒子box：外间距20px 宽度200px 高度200px 背景颜色蓝色 边框10px 实线 红色 内间距10px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 200px;
height: 200px;
margin: 20px;
background-color: blue;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
CSS盒子模型的计算公式：盒子总宽度的计算值AllWidth = width + 左右padding + 左右border
小知识：padding 内边距
- padding:1px 2px 3px 4px; //上 右 下 左
- padding:1px 2px 3px; //上 左右 下
- padding:1px 2px; //上下 左右
- padding:1px; //四个方向的值都设置为1像素
- padding-top:1px //上内边距
- padding-right:1px; //右内边距
- padding-bottom:1px; //下内边距
- padding-left:1px; //左内边距
- 盒子与盒子之间的距离、块级元素与块级元素之间的距离就用margin
- 盒子内的距离、行内元素与行内元素之间的距离就用padding
//新建两个盒子：两个盒子共同的属性可以写在一起（1所在的位置），两个盒子不同的属性值需要分开写（2、3所在的位置）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
div{/* 1、两个盒子的共同属性可以这样写 */
width: 200px;
height: 200px;
}
.box{/* 2、两个盒子的不同属性需要分开写 */
background-color: blue;
}
.box1{/* 3、两个盒子的不同属性需要分开写 */
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>效果图：
盒子内容超出盒子范围的解决办法：
//新建一个盒子box，在盒子中添加文字内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 200px;
height: 200px;
border: 5px solid pink;
}
</style>
</head>
<body>
<div class="box">叶子从刚生下来时，就有一副爱笑的面孔，那双大大的眼睛，挺翘的鼻梁，都让人疼爱的不行。在叶子两岁那年叶子的父母离婚了，父亲把房子作为抚养费给了叶子和她的妈妈，决绝的离开了这对母女。渐渐的叶子长大了，她开始好奇开始疑问，为什么幼儿园的其他小朋友都有自己的爸爸，自己却没有呢？叶子问了自己的妈妈，妈妈当时先是一愣继而脸色低沉了起来看着叶子大大的眼睛叹了一口气，说:“叶子想要爸爸吗？”叶子瞪着两只可爱的大眼睛急切的说:“想要想要。”在五岁那年叶子的后爸走进了叶子的生活，但是也许父爱对叶子来说终究是可望而不可即的。叶子怎么也想不到后来的生活因为后爸以及后爸的家人的到来有了怎样翻天覆地的变化。</div>
</body>
</html>效果图：
//添加1所在的位置：设置超出隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 200px;
height: 200px;
border: 5px solid pink;
overflow: hidden;/* 1、添加超出隐藏 */
}
</style>
</head>
<body>
<div class="box">叶子从刚生下来时，就有一副爱笑的面孔，那双大大的眼睛，挺翘的鼻梁，都让人疼爱的不行。在叶子两岁那年叶子的父母离婚了，父亲把房子作为抚养费给了叶子和她的妈妈，决绝的离开了这对母女。渐渐的叶子长大了，她开始好奇开始疑问，为什么幼儿园的其他小朋友都有自己的爸爸，自己却没有呢？叶子问了自己的妈妈，妈妈当时先是一愣继而脸色低沉了起来看着叶子大大的眼睛叹了一口气，说:“叶子想要爸爸吗？”叶子瞪着两只可爱的大眼睛急切的说:“想要想要。”在五岁那年叶子的后爸走进了叶子的生活，但是也许父爱对叶子来说终究是可望而不可即的。叶子怎么也想不到后来的生活因为后爸以及后爸的家人的到来有了怎样翻天覆地的变化。</div>
</body>
</html>效果图：
//注释掉1，添加2：自动判断是否添加滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 200px;
height: 200px;
border: 5px solid pink;
/*overflow: hidden;*//* 1、添加超出隐藏 */
overflow: auto;/* 2、浏览器自动判断是否超出元素的高度，如果超出则出滚动条，没有则不出 */
}
</style>
</head>
<body>
<div class="box">叶子从刚生下来时，就有一副爱笑的面孔，那双大大的眼睛，挺翘的鼻梁，都让人疼爱的不行。在叶子两岁那年叶子的父母离婚了，父亲把房子作为抚养费给了叶子和她的妈妈，决绝的离开了这对母女。渐渐的叶子长大了，她开始好奇开始疑问，为什么幼儿园的其他小朋友都有自己的爸爸，自己却没有呢？叶子问了自己的妈妈，妈妈当时先是一愣继而脸色低沉了起来看着叶子大大的眼睛叹了一口气，说:“叶子想要爸爸吗？”叶子瞪着两只可爱的大眼睛急切的说:“想要想要。”在五岁那年叶子的后爸走进了叶子的生活，但是也许父爱对叶子来说终究是可望而不可即的。叶子怎么也想不到后来的生活因为后爸以及后爸的家人的到来有了怎样翻天覆地的变化。</div>
</body>
</html>效果图：
//注释掉1 和 2，添加3：不管有没有超出都显示滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 200px;
height: 200px;
border: 5px solid pink;
/*overflow: hidden;*//* 1、添加超出隐藏 */
/*overflow: auto;*//* 2、浏览器自动判断是否超出元素的高度，如果超出则出滚动条，没有则不出 */
overflow: scroll;/* 3、不管有没有超出都显示滚动条 */
}
</style>
</head>
<body>
<div class="box">叶子从刚生下来时，就有一副爱笑的面孔，那双大大的眼睛，挺翘的鼻梁，都让人疼爱的不行。在叶子两岁那年叶子的父母离婚了，父亲把房子作为抚养费给了叶子和她的妈妈，决绝的离开了这对母女。渐渐的叶子长大了，她开始好奇开始疑问，为什么幼儿园的其他小朋友都有自己的爸爸，自己却没有呢？叶子问了自己的妈妈，妈妈当时先是一愣继而脸色低沉了起来看着叶子大大的眼睛叹了一口气，说:“叶子想要爸爸吗？”叶子瞪着两只可爱的大眼睛急切的说:“想要想要。”在五岁那年叶子的后爸走进了叶子的生活，但是也许父爱对叶子来说终究是可望而不可即的。叶子怎么也想不到后来的生活因为后爸以及后爸的家人的到来有了怎样翻天覆地的变化。</div>
</body>
</html>效果图：
小知识：overflow 内容溢出的显示方式
- overflow: hidden; //超出元素高度就隐藏掉（常用）
- overflow: auto; //浏览器自动判断是否超出元素的高度，如果超出则出滚动条，没有则不出
- overflow: scroll; //不管有没有超出都显示滚动条
盒子中添加图片：
//1位置：给新建的盒子box添加图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//添加2：设置盒子背景不平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//注释掉2，添加3：盒子背景x轴上平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
/*background-repeat: no-repeat;*//* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
background-repeat: repeat-x;/* 3、x轴上平铺 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
小知识：background-repeat 改变背景图片的平铺方式
- background-repeat: repeat; //平铺（默认值）
- background-repeat: no-repeat; //不平铺（常用）
- background-repeat: repeat-x; //x轴平铺
- background-repeat: repeat-y; //y轴平铺
//添加4：改变背景图片的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
/*background-repeat: repeat-x;*//* 3、x轴上平铺 */
background-size: 100px 200px;/* 4、改变背景图片的大小 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//更改4：使用比例来改变图片的大小（如果只有一个值，则按照width的值来等比放大或者缩小图片）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
/*background-repeat: repeat-x;*//* 3、x轴上平铺 */
background-size: 100%;/* 4、改变背景图片的大小 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
注：background-size 改变图片的大小 默认写一个值，那就代表x轴和y轴都是这个值（可以使用像素值表示，也可以使用百分比表示，用百分比表示时，是根据盒子的width和height来等比计算）
//注释掉3、4，添加5：移动图片在盒子中的位置：x轴右移50px，y轴下移100px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
/*background-repeat: repeat-x;*//* 3、x轴上平铺 */
/*background-size: 100%;*//* 4、改变背景图片的大小 */
background-position: 50px 100px;/* 5、移动图片在盒子中的位置：x轴右移50px，y轴下移100px */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//注释掉5，添加6：将图片移动到盒子的右下角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
/*background-repeat: repeat-x;*//* 3、x轴上平铺 */
/*background-size: 100%;*//* 4、改变背景图片的大小 */
/*background-position: 50px 100px;*//* 5、移动图片在盒子中的位置：x轴右移50px，y轴下移100px */
background-position: right bottom;/* 6、将图片移动到盒子的右下角 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//注释掉6，添加7：将图片移动到盒子的正中间位置（x轴中间和y轴中间）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("1.jpg");/* 1、添加图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
/*background-repeat: repeat-x;*//* 3、x轴上平铺 */
/*background-size: 100%;*//* 4、改变背景图片的大小 */
/*background-position: 50px 100px;*//* 5、移动图片在盒子中的位置：x轴右移50px，y轴下移100px */
/*background-position: right bottom;*//* 6、将图片移动到盒子的右下角 */
background-position: center;/* 7、将图片移动到盒子的正中间位置（x轴中间和y轴中间） */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//1位置：添加大图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("2.jpg");/* 1、添加大图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//增加3：等比缩放图片，因为只赋了一个值，所以图片只会以width作参考进行缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("2.jpg");/* 1、添加大图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
background-size: 100%;/* 3、等比缩放图片：因为只赋了一个值，所以图片只会以width作参考进行缩放 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
//修改3：等比缩放图片，赋了两个值，图片会根据盒子的width和height分别进行缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;}
.box{
width: 400px;
height: 400px;
border: 5px solid pink;
background-image: url("2.jpg");/* 1、添加大图片 */
background-repeat: no-repeat;/* 2、背景是否平铺，默认设置为平铺，这里设置不平铺 */
background-size: 100% 100%;/* 3、等比缩放图片：赋了两个值，图片会根据盒子的width和height分别进行缩放 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果图：
小知识：CSS属性之background背景
- background-color:red; //背景颜色
- background-image: url("2.jpg"); //设置背景图片
- background-repeat: no-repeat; //改变背景图片的平铺方式
默认值：repeat 平铺
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺 - background-position:10px; //设置背景图片的位置
设置单位：px、%、英文字母
有两个值：第一个值代表x轴或者水平方向、第二个值代表y轴或者垂直方向
如何让背景图片与盒子的中心点重合：background-position:center center; - background-size:100% 100%; //设置背景图片的大小
设置值的单位：px、%
有两个值：第一个值代表x轴、第二个值代表y轴
当两个值都设置为100%时根据元素的盒子有多大，背景图片就有多大 - background: pink url("favicon.ico") no-repeat 20px 30px; //background的复合属性，可以添加四个属性值：颜色、图片路径、背景图片是否平铺、改变背景图片位置。如果想改变背景图片的大小，只能重新另起一行设置这个元素的样式
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
