JS基础编程课件11_CSS盒子模型.pdf

CSS盒子模型

王红元coderwhy

目录

1认识盒子模型

content

2内容width/height

3内边距padding

4边框/圆角border

5外边距margin

6盒子和文字阴影

7box-sizing

coderwhy认识盒子

◼生活中,我们经常会看到各种各样的盒子:

coderwhyHTML每个元素都是盒子

◼事实上,我们可以把HTML每一个元素看出一个个的盒子:

coderwhy盒子模型(BoxModel)

◼HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性

◼内容（content）

元素的内容width/height

◼内边距（padding）

元素和内容之间的间距

◼边框（border）

元素自己的边框

◼外边距（margin）

元素和其他元素之间的间距

coderwhy盒子模型的四边

◼因为盒子有四边,所以margin/padding/border都包括top/right/bottom/left四个边:

coderwhy在浏览器的开发工具中

coderwhy内容–宽度和高度

◼设置内容是通过宽度和高度设置的:

宽度设置:width

高度设置:height

◼注意:对于行内级非替换元素来说,设置宽高是无效的!

◼另外我们还可以设置如下属性:

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width

max-width：最大宽度，无论内容多少，宽度都小于或等于max-width

移动端适配时,可以设置最大宽度和最小宽度;

◼下面两个属性不常用:

min-height：最小高度，无论内容多少，高度都大于或等于min-height

max-height：最大高度，无论内容多少，高度都小于或等于max-height

coderwhy内边距-padding

◼padding属性用于设置盒子的内边距,通常用于设置边框和内容之间的间距;

◼padding包括四个方向,所以有如下的取值:

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

◼padding单独编写是一个缩写属性：

padding-top、padding-right、padding-bottom、padding-left的简写属性

padding缩写属性是从零点钟方向开始,沿着顺时针转动的,也就是上右下左;

◼padding并非必须是四个值,也可以有其他值;

coderwhypadding的其他值

padding值的个数padding例子代表的含义

4padding:10px20px30px40px;top:10px,right:20px,bottom:30px,left:40px;

3padding:10px20px30px;缺少left,left使用right的值;

2pa