盒子模型（div容器）概念：
盒子模型是用在网页设计和布局时使用 box model
盒子模型：一个盒子封装周围的html元素；
她包括 ：外边距margin 边框 border 内边距 padding 实际内容 content margin
通俗解释：不同的快递盒子之间的距离
border 相当于快递盒子
padding 相当于快递盒子里面的泡沫
content 被快递盒子包裹的快递
margin 相当于快递盒子和别的快递盒子之间的间距
目录
一，盒子模型之内容（content）
内容区域： 1，默认大小，由内容本身撑开 2，手动设置 用withd 和height 去设置 高度默认由内容撑开 设计手机界面的时候 最好用%比去设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之内容区域</title>
<!-- 盒子模型组成
1，内容区域 content
2，内容边距 padding
3，边框 border
4，外边距 margin
-->
<!-- 内容区域：
1，默认大小，由内容本身撑开
2，手动设置 用withd 和height 去设置 高度默认由内容撑开
设计手机界面的时候 最好用%比去设置
-->
<style>
.image{
width: 30%;
}
</style>
</head>
<body>
<a href="图片地址"><img class="image" src="images/24.jpg" alt="小美女" title="我是小美女哟"></a>
</body>
</html>二，盒子模型之内边距（padding）
盒子的内边距 1，padding 定义元素边框和内容之间的距离 边框和内容之间的空白区域 2，内边距可以用固定的像素填充 也可以用百分比填充 3，单边边距的设置属性 padding-top/bottom/right/left 4,简写 1个值 表示上下左右 2个值 上下和左右 3个值上 左右 下 4个值 对应上 右 下 左 顺时针 5，padding 会撑开容器的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之内边距padding</title>
<!-- 盒子模型组成
1，内容区域 content
2，内容边距 padding
3，边框 border
4，外边距 margin
-->
<!-- 内容区域：
1，默认大小，由内容本身撑开
2，手动设置 用withd 和height 去设置 高度默认由内容撑开
设计手机界面的时候 最好用%比去设置
-->
<!-- 盒子的内边距
1，padding 定义元素边框和内容之间的距离 边框和内容之间的空白区域
2，内边距可以用固定的像素填充 也可以用百分比填充
3，单边边距的设置属性 padding-top/bottom/right/left
4,简写 1个值 表示上下左右 2个值 上下和左右 3个值上 左右 下 4个值 对应上 右 下 左 顺时针
5，padding 会撑开容器的尺寸
-->
<style>
.box{
width: 200px;
height: 200px;
background-color: #ffcccc;
/* 通过padding 填充*/
/* 让其四周都有20px的边距*/
padding:2%;
}
.box1{
width: 30%;
background-color: #fa4d15;
/*设置和左右上下面的边距*/
/*padding-left: 20px;*/
/*padding-right: 50px;*/
/*padding-top: 30px;*/
/*padding-bottom: 15px;*/
/* 也可以通过简写来完成 简写默认值 是上 右 下 左 顺时针*/
/* padding: 20px 50px 10px 60px;*/
/* 如果是3个值 就是上 左右 下*/
/* padding: 20px 15px 60px;*/
/* 如果是2个值 就是上下 左右 */
/* padding:20px 50px ;*/
/* 如果是1个值 就是上下左右 */
padding: 15px;
}
.nav>dt{
/*通过子代关系选择器 设置下面的dt选项*/
/*left 将垂直摆放改成水平摆放*/
float: left;
padding:20px ;
background-color: rgba(255,0,0,.5);
}
dt a{
/* 通过后代选择器 选择所有的后代 批量设置字体大小*/
color: #ffcccc;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">
<h3>标题标题标题标题标题</h3>
<p>内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box1">
<h3>标题标题标题标题标题1</h3>
<p>内容内容内容内容内容内容内容内容内容内容内容1</p>
<p>内容1</p>
<p>内容1</p>
</div>
<!--应用场景-->
<dl class="nav">
<dt><a href="#">家电</a></dt>
<dt><a href="#">手机</a></dt>
<dt><a href="#">数码</a></dt>
<dt><a href="#">日常</a></dt>
</dl>
</body>
</html>三，盒子模型之边框（border）
边框 border
1，边框样式 border-stlye solid 实线 double双实线 dashed 虚线 dotted 点线
2，边框宽度 border-width
3，边框颜色 border-color 这个属性单独是不能实现的 必须要现有边框才能有颜色
4，为边框设置单独的样式 border-top/left/right/bottom
5，边框可以简写 border：第一个值边框的线宽 第二个值是边框的样式（必选） 第三个值是边框的颜色
6，设置边框的圆角 border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之边框</title>
<!-- 盒子模型组成
1，内容区域 content
1，默认大小，由内容本身撑开
2，手动设置 用withd 和height 去设置 高度默认由内容撑开
3，设计手机界面的时候 最好用%比去设置
2，内容边距 padding
1，padding 定义元素边框和内容之间的距离 边框和内容之间的空白区域
2，内边距可以用固定的像素填充 也可以用百分比填充
3，单边边距的设置属性 padding-top/bottom/right/left
4,简写 1个值 表示上下左右 2个值 上下和左右 3个值上 左右 下 4个值 对应上 右 下 左 顺时针
5，padding 会撑开容器的尺寸
3，边框 border
1，边框样式 border-stlye solid 实线 double双实线 dashed 虚线 dotted 点线
2，边框宽度 border-width
3，边框颜色 border-color 这个属性单独是不能实现的 必须要现有边框才能有颜色
4，为边框设置单独的样式 border-top/left/right/bottom
5，边框可以简写 border：第一个值边框的线宽 第二个值是边框的样式（必选） 第三个值是边框的颜色
6，设置边框的圆角 border-radius
4，外边距 margin
-->
<style>
.root div{
float: left;
margin: 20px;
}
.box{
width: 500px;
height: 500px;
/*粉色背景虚化*/
background-color: rgba(255,0,0,.5);
/* 设置边框样式 实线*/
border-style: solid;
/* 设置边框样式 双实线*/
/* border-style: double;*/
/* 设置边框样式 虚线*/
/* border-style: dashed;*/
/* 设置边框样式 点线*/
/* border-style: dotted;*/
/* 边框宽度*/
border-width: 20px;
/* 边框颜色*/
border-color: red;
}
.box1{
width: 400px;
height: 400px;
background-color: #006699;
/*单独设置上边的颜色 第一个值是线宽 第二个值是边框的种类 第三个是边框的颜色*/
border-top: 20px solid pink;
/*设置边框左边 30宽 是双实线 然后颜色是红色*/
border-left: 30px double red;
/* 设置右边是40px 是虚线 颜色是黄色*/
border-right: 40px dashed yellow;
/* 设置下面的线宽*/
border-bottom: 60px dotted sandybrown;
}
.box2{
width: 100px;
height: 100px;
background-color: #abcdef;
/*最常见的写法*/
border: 10px solid pink;
/* 设置边框的圆角*/
border-radius: 10%;
}
.a1{
float: left;
border-left: 5px solid lawngreen;
/*调整内边距*/
padding-left: 10px;
}
</style>
</head>
<body>
<div class="root">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
<br>
<!--用边框去实现标题美化效果-->
<p class="a1">国际新闻</p>
</body>
</html>
四，盒子模型之外边距（margin）
外边距 margin 元素和元素之间有一定的距离
1，定义元素和元素之间的空间
2，取值
1，auto 常见的左右平分
2,可以取像素
3，可以取值百分比 百分比会随着屏幕变动而变动
3，可以分别设置上下左右
4,简写的时候同内边距 4个值上右下左 3个值 上 左右 下 2个值 上下 左右 1个值 上下左右
5，当垂直方向的边距冲突的时候 取大值 仅仅只是上下方向
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之外边距margin</title>
<!-- 盒子模型组成
1，内容区域 content
1，默认大小，由内容本身撑开
2，手动设置 用withd 和height 去设置 高度默认由内容撑开
3，设计手机界面的时候 最好用%比去设置
2，内容边距 padding
1，padding 定义元素边框和内容之间的距离 边框和内容之间的空白区域
2，内边距可以用固定的像素填充 也可以用百分比填充
3，单边边距的设置属性 padding-top/bottom/right/left
4,简写 1个值 表示上下左右 2个值 上下和左右 3个值上 左右 下 4个值 对应上 右 下 左 顺时针
5，padding 会撑开容器的尺寸
3，边框 border
1，边框样式 border-stlye solid 实线 double双实线 dashed 虚线 dotted 点线
2，边框宽度 border-width
3，边框颜色 border-color 这个属性单独是不能实现的 必须要现有边框才能有颜色
4，为边框设置单独的样式 border-top/left/right/bottom
5，边框可以简写 border：第一个值边框的线宽 第二个值是边框的样式（必选） 第三个值是边框的颜色
6，设置边框的圆角 border-radius
4，外边距 margin 元素和元素之间有一定的距离
1，定义元素和元素之间的空间
2，取值
1，auto 常见的左右平分
2,可以取像素
3，可以取值百分比 百分比会随着屏幕变动而变动
3，可以分别设置上下左右
4,简写的时候同内边距 4个值上右下左 3个值 上 左右 下 2个值 上下 左右 1个值 上下左右
5，当垂直方向的边距冲突的时候 取大值 仅仅只是上下方向
-->
<style>
.root{
width: 1200px;
height: 600px;
background-color: silver;
/*第一个之代表上下 第二个之代表左右 auto 代表默认左右平分*/
/*margin: 0 auto;*/
/* 设置一个固定的像素值*/
/* margin: 50px;*/
/* 设置一个百分比*/
/* margin: 10%;*/
/* 设置上下左右*/
margin-top: 10px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.root div{
float: left;
}
.box{
width: 200px;
height: 200px;
background-color: #abcdef;
/*给盒子设置一个外边距上下左右都是10*/
margin: 10px;
}
.box1{
width: 200px;
height: 200px;
background-color: #ffcccc;
margin: 10px;
}
</style>
</head>
<body>
<div class="root">
<div class="box"></div>
<div class="box1"></div>
</div>
</body>
</html>
五，总结
盒子模型分为四个区域
内容，可以往里面安放的元素
内边距padding（可以用像素填充，也可以用百分比，还可以指定上下左右的不同的款式），简写模式，1个值的情况下 就是上下左右 四个值是上右下左
边框border
边框的样式 有实线（solid），虚线（dashed），双实线（double），点线（dotted）
border-width 指定边框的宽度
边框可以设置圆角（border-rddius） 用百分比或者像素
边框的不同方位 border-left/top/rigth/bottom
简写模式 第一个值是边框的线宽， 第二个字是边框的样式，第三个值是边框的颜色
外边距margin
常用设置 居中 margin 0 auto
margin的取值 有auto 有百分比 有像素
margin分别设置i上下左右margin-left/top/rigth/bottom
简写模式下 1个值 上下左右 4个值 上右下左
当外边距冲突的时候 取最大值
在网页查看盒子模型的时候 效果
9857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
