本课我们学习CSSpadding属性和CSS宽高属性。还是看这个例子，每个块除了设置边距外，还有内容周围的空间和内容的宽高。CSSpadding属性用于在元素内容周围创建空间，即边框内侧和内容外侧之间的距离。可以通过padding-top、padding-right、padding-bottom、padding-left等属性设置元素的top、right、bottom、left的内padding。所有padding属性都有以下值：length-以px、pt、cm等为单位指定padding。例如10px、24pt、0.5cm等。%-指定padding占父元素宽度的百分比。比如10%。length和%都可以取负值，表示减小内部填充空间的大小。创建018-css-padding-width-height文件夹，文件夹下创建padding-width-height.html文件，mystyle.css文件。打开html并构建基本代码。导入外部样式。添加一个div元素并用一些文本填充它。打开mystyle.css文件，定义div选择器，声明样式：border:1pxsolidblack,background-color:lightblue,padding-top:50px,padding-right:30px,padding-bottom:50px,padding-left:80像素。在浏览器中查看效果。在Styles选项卡中，点击容器布局图的padding区域，四个方向的padding清晰显示。CSSdiv{边框：1px纯黑色；背景颜色：浅蓝色；填充顶部：50px；向右填充：30px；填充底部：50px；padding-left:80px;}为了简化代码，可以在一个padding属性中指定所有的padding属性。如果padding取四个值，比如padding:25px50px75px100px，表示：toppadding25px，rightpadding50px，bottompadding75px，leftpadding100px。注意书写顺序是左上右下，每个值之间用空格隔开。如果padding取三个值，比如padding:25px50px75px，表示：toppadding25px，leftandrightpadding50px，bottompadding75px。如果padding取两个值，如padding:25px50px，表示：顶部和底部填充25px，左右两边填充50px。如果padding取一个值，如padding:25px，则表示：四个方向全部填充25px。重写填充样式。把原来的代码注释掉，重新定义样式：padding:50px30px50px80px。来看看，效果是一样的！如果元素具有指定的宽度，则应用于该元素的任何填充都将添加到该元素的总宽度中。让我们验证一下。将h1标签添加到HTML并填写一些文本。在CSS中定义h1选择器，复制div元素的边框和背景样式，并为其添加样式width:300px。还要在div中添加一个width:300px样式。看效果，div明显比h1宽，因为左右内边距会增加容器的宽度。h1的宽度为300+2，共302px，div的宽度为300+30+80+2，共412px。CSSh1{宽度：300px;边框：1px纯黑色；背景色：浅蓝色；}div{宽度：300px；边框：1px纯黑色；背景颜色：浅蓝色；/*顶部填充：50px；;填充底部：50px；左填充：80px；*/padding:50px30px50px80px;}接下来我们研究CSS的width和height属性，用来设置元素的宽高。它们已在许多以前的案例中使用过。height和width属性不包括边距、边框和填充区域，但用于定义元素的内容大小。可以设置的值有：auto——这是默认值。浏览器会计算出高度和宽度。length-以px、cm等为单位定义高度和宽度。例如200px、30cm等。%-将高度和宽度定义为父元素宽度的百分比。比如20%。initial[??n??l]-将高度和宽度设置为默认值。事实上，它是自动的。例如，定义一个宽度值为50%的div。再看效果，div中文字内容的宽度等于当前页面宽度的一半。同样，宽度和高度属性不包括填充、边框或边距。比如此时div容器的总宽度大于页面宽度的50%。文章配套视频链接：https://www.bilibili.com/video...
