上面的布局宽度
div{
width: 200px;
height: 200px;
border: 10px solid red;
padding: 20px;
}
------------------------------------
<!-- padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域 就是边框到内容之间的距离 padding有四个方向。所以说我们能分别描述4个方向的padding 方法有两种：1.写小属性 2.写综合属性 用空格隔开 --------------------------------------------------------------------------------
.box{
width: 300px;
height: 300px;
/*padding: 30px;*/
background-color: red;
/*border: 5px solid yellow;*/
/*小属性设置*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/
/*综合属性设置，用空格隔开*/
/*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/
/* 三个值表示的时候 上20px 左右30px 下40px*/
padding: 20px 30px 40px;
/*两个值表示的时候：上下为20px 左右为30px*/
/*padding: 20px 30px;*/
/*一个值表示的时候 上下左右都是 20px*/
/*padding: 20px;*/
------------------------------------------------------------------
一些标签默认有padding
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。 我们现在初学可以使用通配符选择器 *{ padding:0; margin:0; } But，这种方法效率不高。 所以我们要使用并集选择器来选中页面中应有的标签（不用背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css） https://meyerweb.com/eric/tools/css/reset/
----------------------------------------------------------------------------
盒模型的属性
盒模型的属性 width：内容的宽度 height: 内容的高度 padding：内边距，边框到内容的距离 border: 边框，就是指的盒子的宽度 margin：外边距，盒子边框到附近最近盒子的距离 如果让你做一个宽高402*402的盒子，您如何来设计呢？ 答案有上万种，甚至上一种。
-------------------------------------------------------
border: 边框，就是指的盒子的宽度
border: 5px solid red;
border: 5px solid red;
border:边框的意思，描述盒子的边框
border:5px(粗细) solid(线性样式) red(颜色)
边框有三个要素： 粗细 线性样式 颜色 border: solid 如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。 按照3要素来写border border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */ 按照方向划分 border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid; 上面12条语句，相当于 bordr: 10px solid red; 另外还可以这样： border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red; 清除边框的默认样式，比如input输入框 border:none; border:0; 使用border来制作小三角 /*小三角 箭头指向下方*/ div{ width: 0; height: 0;
border-top: 10px solid red; top 上 border-bottom: 20px solid red; bottom 下 border-left: 20px solid transparent; left 左 透明色 border-right: 20px solid transparent; right 右 }
<body>
<div></div>
</body>
-------------------------------------------------
margin
margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间) /*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; margin-bottom: 100px;