---恢复内容开始---
<!doctype html><!--声明文档类型 网页文档-->
<html><!--根目录标签 父级-->
<head><!--网页的头部 用户看不见的-->
<meta charset='UTF-8'><!--国际编码 字符的编码格式-->
<!--网页三要素 title keywords description-->
<title>咸鱼联盟</title><!--网页的标题-->
<meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->
<meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->
</head>
<style type="text/css">
.box-one{
width: 300px;
height: 200px;
/* border-width: 30px;
border-style: solid;
border-color: pink;*/
border: 30px solid green;/*边框宽度 线形 颜色*/
}
.box-two{ /* 设置各个边框的 粗细 样式 颜色 */
width: 300px;
height: 200px;
border-top: 10px solid red;
border-right: 20px solid green;
border-bottom: 30px solid blue;
border-left: 40px solid yellow;
}
.box-three{ /* 设置一个三角形构成的正方形 */
width: 0;
height: 0;
border-top: 40px solid deeppink;
border-right: 40px solid green;
border-left: 40px solid yellow;
border-bottom: 40px solid red;
}
.box-four{ /* 认识透明颜色 transparent*/
width: 0;
height: 0;
border-top: 40px solid deeppink;
border-right: 40px solid transparent;
border-left: 40px solid transparent;/* 透明颜色 */
border-bottom: 40px solid red;
}
.box-five{ /* 取消上半部分的边框 */
width: 0;
height: 0;
border-top: none;
border-right: 40px solid transparent;
border-left: 40px solid transparent;/* 透明颜色 */
border-bottom: 40px solid deeppink;
}
.box-six{ /* 认识简写顺序 全部一样只写一个 不一样按照上右下左顺序 */
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: transparent transparent blue transparent;
border-top: none ;
}
.box-seven{ /* 认识padding内边距 信纸 */
width: 150px;
height: 100px;
padding: 25px 50px;
background: pink;
}
.box-eight{ /* 盒子外边是padding再外边是border */
width: 100px;
height: 100px;
padding: 25px;
border: 25px solid green;
background: red;
}
.box-nine{
float: left;
width: 100px;
height: 100px;
margin-right: 0;
background: purple;
}
.box-ten{
width: 200px;
height: 100px;
background: pink;
overflow: hidden;
}
</style>
<body><!--网页的身体 用户可视化区域-->
<div class="box-one"></div>
<div class="box-two"></div>
<div class="box-three"></div>
<div class="box-four"></div>
<div class="box-five"></div>
<div class="box-six"></div>
<div class="box-seven">咸鱼联盟</div>
<div class="box-eight">咸鱼联盟</div>
<div class="box-nine"></div>
<div class="box-ten"></div>
<!--
单一写法
border-width 设置边框宽度
border-style 设置边框线形
border-color 设置边框颜色
复合写法
border: 30px solid green;
transparent 透明颜色
solid实线 dashed虚线 dotted点线
border-width: 40px 40px 40px 40px;上右下左
border-width: 40px 40px 40px;上 左右 下
border-width: 40px 40px;上下 左右
border-width: 40px;上下左右
盒子的宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)这是标准盒(content-box)模型下的计算公式
margin 外边距 自身盒子边界到外部盒子边界的距离 改变盒子位置
padding 内边距 自身盒子边界到外部盒子边界的距离 改变盒子大小
-->
</body>
</html>
---恢复内容结束---
