<!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-width: 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>
