盒子模型
1.前提
html中的所有标签都可以看成一个盒子
2.盒子模型图
3.盒子各部分组成含义以及用法
3.1 盒子内容
具体含义:盒子存放东西的一块区域
width: 盒子内容的宽度
height:盒子内容的高度
width*height: 盒子内容所能书写的区域
其中行内元素的width和height都是由里面的内容决定的
3.2 盒子的内边距padding
具体含义:盒子内边框线到盒子内容的外宽度线之间的距离
即为盒子边框与盒子内容之间的距离,具体位置如下图所示:
有上下左右四个方向,分别是padding-top,padding-bottom,padding-left,padding-right
3.3 盒子的边框border
具体含义:盒子的外边框线与盒子内边距最外层之间的距离
用途:用来确定盒子的位置.
其具体位置如下所示:
有上下左右四个方向,分别是border-top,border-bottom,border-left,border-right,
3.4 盒子的外边距margin
具体含义:盒子与盒子之间的距离
用途:用来控制排版布局
其具体位置如下所示:
有上下左右四个方向,分别是margin-top,margin-bottom,margin-left,margin-right
4.盒子部分属性(内边距、外边距)的合并写法
4.1 辨别的口诀
顺时针,看对面,对面皆无,看相邻
具体指的是盒子有上下左右四个方位,那么书写的属性值顺序就是按照上右下左四个方向进行的,如遇到某些方向没有被赋值的情况,那么其属性值就为对面方向上的属性值.当遇到只写一个属性的时候,就满足左右两边皆没有给值的情况,那么它的右边值就为相邻的上边值
4.2 只写一个属性值
a.语法
属性名:像素值;
/* 全部属性值就为该像素值*/
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值的设置</title>
<style type="text/css">
*{
/* 清除浏览器默认样式的影响 */
padding: 0;
margin: 0;
}
.one{
width: 200px;
height: 200px;
background-color: orangered;
}
.two{
width: 200px;
height: 200px;
background-color: red;
/* 对class值为two的盒子设置外边距
*/
margin: 10px;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div class="one">文明</div>
<div class="two">爱国</div>
<div class="three">团结</div>
</div>
</body>
</html>
注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值
c.分析
margin:10px;根据口诀可知:margin-top的值为10px
其右边相邻属性margin-right的值为10px;当转到margin-bottom会发现其没有赋值
就找对面的margin-top的值,因而margin-bottom=10px;
当转到margin-left的时候，会发现没有给其赋值,看对面的margin-right的值,因而margin-right=10px;
d.展示效果
4.3 写两个属性值
a.语法
属性名:像素值1 像素值2;
/*上下外边距=像素值1,左右外边距=像素值2*/
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值的设置</title>
<style type="text/css">
*{
/* 清除浏览器默认样式的影响 */
padding: 0;
margin: 0;
}
.one{
width: 200px;
height: 200px;
background-color: orangered;
}
.two{
width: 200px;
height: 200px;
background-color: red;
/* 对class值为two的盒子设置外边距 */
margin: 10px 20px;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="top">
<div class="one">文明</div>
<div class="two">爱国</div>
<div class="three">团结</div>
</div>
</body>
</html>
注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值
c.分析
margin:10px 20px;根据口诀可知:margin-top的值为10px,
时针转到margin-right时,发现其设置了值即
margin-right=20px;
时针转到margin-bottom时,会发现没有给其赋值,看对面的margin-top值,可以知道margin-top存在值,因此margin-bottom=10px;
时针转到margin-left,会发现其没有设置值,可以看对面的margin-right值,可以知道margin-right存在值,因此margin-right=margin-left=20px;此时时针停止转动
d.展示效果
4.4 写三个属性值
a.语法
属性名:像素值1 像素值2 像素值3;
/*上外边距=像素值1,左右外边距=像素值2,下外边距为像素值3*/
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值的设置</title>
<style type="text/css">
*{
/* 清除浏览器默认样式的影响 */
padding: 0;
margin: 0;
}
.one{
width: 200px;
height: 200px;
background-color: orangered;
}
.two{
width: 200px;
height: 200px;
background-color: red;
/* 对class值为two的盒子设置外边距 */
margin: 10px 20px 30px;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="top">
<div class="one">文明</div>
<div class="two">爱国</div>
<div class="three">团结</div>
</div>
</body>
</html>
注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值
c.分析
margin:10px 20px 30px;
第一次时针指向margin-top,margin-top的值为10px,
时针转到margin-right时 margin-right=20px;
时针转到margin-bottom时,margin-bottom=30px
时针转到margin-left,会发现其没有设置值,可以看对面的margin-right值,可以知道margin-right存在值,
因此margin-right=margin-left=20px;此时时针停止转动
d.展示效果
4.5 写四个属性值
a.语法
属性名:像素值1 像素值2 像素值3 像素值4;
/*上外边距为像素值1,右外边距为像素值2,下外边距为像素值3,左外边距为像素值4*/
b.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值的设置</title>
<style type="text/css">
*{
/* 清除浏览器默认样式的影响 */
padding: 0;
margin: 0;
}
.one{
width: 200px;
height: 200px;
background-color: orangered;
}
.two{
width: 200px;
height: 200px;
background-color: red;
/* 对class值为two的盒子设置外边距 */
margin: 10px 20px 30px 40px;
}
.three{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="top">
<div class="one">文明</div>
<div class="two">爱国</div>
<div class="three">团结</div>
</div>
</body>
</html>
注意:若其左边没有相邻的盒子,那么它的左外边距也能被设置成功,它此时的参照物为父级元素,即左外边距就会被设置为距离父级元素左边的距离=左外边距值
c.分析
margin:10px 20px 30px 40px;
第一次时针指向margin-top,margin-top的值为10px,
时针转到margin-right时 margin-right=20px;
时针转到margin-bottom时,margin-bottom=30px
时针转到margin-left时,margin-left=40px;此时时针停止转动
d.展示效果
5.盒子实际所占宽度和实际所占高度
盒子实际所占宽度=width+border-left+border-right+padding-left+padding-right
盒子实际所占高度=height+border-top+border-bottom+padding-top+padding-bottom
注意:盒子的外边距是不占盒子实际所占宽度和实际所占高度
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
