<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒子模型</title> <style type="text/css"> .box01{ width: 200px; height: 200px; /*此处设置的宽和高,可以理解为准备放置content内容的宽和高*/ background-color: yellow; /*宽和高的样式是基本样式*/ /*@分别设置盒子的各个边: border-top-color: #000; border-top- 20px; border-top-style: solid; border-style常用的有三种: 实线(solid,固体), 虚线(dashed),dash(短跑,少量,波折线) 点线(dotted),dot(点,小圆点) border-left:10px dashed #000; border-right:10px dotted #000; border-bottom:10px solid #000; 在写风格的时候,可以直接用border-边:然后定义 像素 风格 颜色 用空格分开 */ border: 10px solid #000; /*同时设置四个边*/ /*@分别设置四个padding填充 在padding中填充像素的时候,会让整个盒子增加像素!!!注意 padding-top:20px; padding-right: 50px; padding-bottom: 200px; padding-left: 40px; */ /*@依次设置盒子的: 上,右,下,左(顺时针旋转)-------------附带四个值 padding: 20px 50px 200px 40px; */ /* @依次设置盒子的: 上,左右,下(上中下)-------------附带三个值 padding: 20px 50px 200px ; */ /* @依次设置盒子的: 上下,左右(上下)-------------附带两个值 padding: 20px 50px ; */ /*@同时设置四个边: 上下左右(全)-------------附带一个值*/ padding: 50px; margin:20px 0 0 100px; /*margin是设置盒子距离外面的间距 设置方法与padding一样
盒子的真实尺寸
盒子的宽度: width + 左右border + 左右padding
盒子的高度: height + 上下border + 上下padding
*/ } </style> </head> <body> <h1>h标签也属于盒子</h1> <div class="box01">这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;这是html的div块元素;增加padding的时候会相应增加盒子的大小</div> </body> </html>