一、盒子模型
1、盒子模型的内容包括:content、padding、border、margin。
2、盒子模型分类:
标准盒:正常盒模型、怪异盒模型
伸缩盒:新、旧
二、正常盒模型
1、内边距:padding
1)内边距在content外,边框内
属性 描述
padding ----------------设置所有边距
padding-bottom-------设置底边距
padding-left------------设置左边距
padding-right----------设置右边距
padding-top------------设置上边距
2)举例
总结:content为100*100px的红色正方形,而padding为20px,padding也被认为是红色,所以整个正方形为140*140px的大小,
属性 描述
border-width------------------边框宽度
border-style-------------------边框样式
border-color-------------------边框颜色
border-radius-----------------设置圆角边框
box-shadow-------------------设置对象阴影
border-image-----------------边框背景图片
2)举例
2)外边距接受任何长度、百分数值
注意:外边距合并问题
属性 描述
margin---------------------设置所有边距
margin-bottom-----------设置底边距
margin-left----------------设置左边距
margin-right--------------设置右边距
margin-top----------------设置上边距
3)举例
1)鞋子与鞋盒
总结:
①一个盒子的width和height指的是其内容的宽和高,要加上外边距并不需要增加宽和高的值,只要给padding属性加上需要的大小即可。
②父级div内部的子级div的大小超过父级div的大小时,父级div不会被撑开,子级div会以父级内容区域左上角为基准,向右下方变大。
③如果父级div内容区域的位置变动(如父级的外边距、内边距、边框发生改变),那么子级div也会跟随父级内容区域左上角发生相应的位置变动。
页面效果:
页面效果:
当把haha的上外边距增加为100px时,页面效果如下:
总结:
①当两个盒子都有外边距时,两个盒子的边框之间的距离不是两者外边距相加,而是以两者中外边距较大的作为两者边框之间的距离。
2)box-sizing属性的border-box取值意为该盒子是一个怪异盒子。
3)举例
①怪异盒子固定了盒子的大小为width*height,设置了padding、border的部分会以缩小content区域为代价。
②外边距依然属于width*height之外的区域。
③即怪异盒子把border和padding划分到了width*height区域内。
页面效果:
1、盒子模型的内容包括:content、padding、border、margin。
2、盒子模型分类:
标准盒:正常盒模型、怪异盒模型
伸缩盒:新、旧
二、正常盒模型
1、内边距:padding
1)内边距在content外,边框内
属性 描述
padding ----------------设置所有边距
padding-bottom-------设置底边距
padding-left------------设置左边距
padding-right----------设置右边距
padding-top------------设置上边距
2)举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
div{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
总结:content为100*100px的红色正方形,而padding为20px,padding也被认为是红色,所以整个正方形为140*140px的大小,
页面效果:
2、边框:border
1)边框border是内外边距的分界线属性 描述
border-width------------------边框宽度
border-style-------------------边框样式
border-color-------------------边框颜色
border-radius-----------------设置圆角边框
box-shadow-------------------设置对象阴影
border-image-----------------边框背景图片
2)举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
div{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
总结:border一定要指定线型和颜色,只指定像素值不会显示出来。
页面效果:
3、外边距:margin
1)围绕着内容边框的区域就是外边距,外边距默认为透明区域2)外边距接受任何长度、百分数值
注意:外边距合并问题
属性 描述
margin---------------------设置所有边距
margin-bottom-----------设置底边距
margin-left----------------设置左边距
margin-right--------------设置右边距
margin-top----------------设置上边距
3)举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
div{
width: 100px;
height: 100px;
background-color: red;
padding: 20px;
border: 5px solid blue;
margin: 100px;
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
页面效果:
1)鞋子与鞋盒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.shoebox{
width: 200px;
height: 200px;
background-color: aquamarine;
padding: 20px;
}
.shoe{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="shoebox">
<div class="shoe">
</div>
</div>
</body>
</html>
总结:
①一个盒子的width和height指的是其内容的宽和高,要加上外边距并不需要增加宽和高的值,只要给padding属性加上需要的大小即可。
②父级div内部的子级div的大小超过父级div的大小时,父级div不会被撑开,子级div会以父级内容区域左上角为基准,向右下方变大。
③如果父级div内容区域的位置变动(如父级的外边距、内边距、边框发生改变),那么子级div也会跟随父级内容区域左上角发生相应的位置变动。
页面效果:
2)外边距合并问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.shoebox{
width: 200px;
height: 200px;
background-color: aquamarine;
padding: 100px;
margin-bottom: 50px;
}
.shoe{
width: 200px;
height: 200px;
background-color: brown;
}
.haha{
width: 100px;
height: 100px;
background-color: black;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="shoebox">
<div class="shoe">
</div>
</div>
<div class="haha"></div>
</body>
</html>
页面效果:
当把haha的上外边距增加为100px时,页面效果如下:
总结:
①当两个盒子都有外边距时,两个盒子的边框之间的距离不是两者外边距相加,而是以两者中外边距较大的作为两者边框之间的距离。
三、怪异盒子
1)box-sizing属性的content-box取值意为该盒子是一个正常盒子。2)box-sizing属性的border-box取值意为该盒子是一个怪异盒子。
3)举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: pink;
box-sizing: border-box;
padding: 10px;
border: 5px solid blue;
margin: 10px;
}
.content{
width: 100px;
height: 100px;
background-color: palegreen
}
</style>
</head>
<body>
<div class="box">
<div class="content">
</div>
</div>
</body>
</html>
总结:
①怪异盒子固定了盒子的大小为width*height,设置了padding、border的部分会以缩小content区域为代价。
②外边距依然属于width*height之外的区域。
③即怪异盒子把border和padding划分到了width*height区域内。
页面效果: