<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!-- 边框（border） 外边距（margin） 内边距（padding） 内容区（content）-->
<style>
#box10{
100px;
height: 200px;
background-color: blueviolet;
/*border:dashed 10px red ;*/
border:solid 10px red ;
/*border:dashed 10px red ;*/
/*border:dotted 10px red ;*/
/*盒子模型内容*/
/*overflow: hidden;!* 内容被剪切，其余内容不可见*!*/
/*overflow: visible;!*内容不被裁剪，会呈现在元素框以外*!*/
/*overflow: scroll;!*内容被剪切，流动条显示其余内容*!*/
/*overflow: auto;!* 如果内容被剪裁则浏览器以流动条显示其他内容*!*/
/*overflow-x:scroll;*/
/*overflow-y:scroll;*/
/*text-overflow: clip;!*修改文本*!*/
/*text-overflow: ellipsis;!*显示省略号来代表文本*!*/
/*text-overflow:string;*/
}
/* 元素的边框*/
/* border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地个边设置样式
border-width 简写属性用于元素的所有边框的宽度，或者单独地为各边边框设置宽度
border-color 简写属性设置元素的所有部分 可见部分的颜色，或 四边分别设置颜色
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中
border-top 简写属性，用于把上边框的所有属性设置到一个声明中
边框border:
线型（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
右边框border-right:
线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
左边框 border-left:
线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
上边框 border-top:
线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
下边框 border-bottom:
线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
solid:实线，dashed:虚线，dotted:点状线，double:双线
border-top-style/border-top-width/border-top-color--->border-top
border-right-style/border-right-width/border-right-color--->border-right
border-bottom-style/border-bottom-width/border-bottom-color--->border-bottom
border-left-style/border-left-width/border-left-color--->border-left
border-style/border-width/border-color----border
padding的使用方法
padding：填充，元素边框与元素内容之间的区域，称之为内边距。
用法：
用来调整内容在容器中的位置关系
用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。
padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。
属性值四种方式：
四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 {padding:2px;}
说明：
可单独设置一方向填充
如：上方向padding-top:10px; 右方向pahdding-right:10px;
下方向padding-bottom:10px; 左方向padding-left:10px;
margin 的使用方法
margin：盒子与盒子之间的距离
属性：
margin
margin-top：上边界
margin-right：右边界
margin-bottom：下边界
margin-left：左边界
属性值四种方式：
四个值：上 右 下 左 {margin:10px 20px 30px 40px;}
三个值：上 左右 下 {magin:10px 20px 30px ;}
二个值：上下 左右 {margin:10px 20px ;}
一个值：四个方向 {margin:2px;}
说明：
{margin: 0 auto; } 在浏览器中横向居中
可单独设置一方向边界，如：上边界margin-top:10px; 右边界margin-right:10px;
下边界margin-bottom:10px; 左边界margin-left:10px;
盒子尺寸的计算
计算公式：
宽 =左右margin+左右border+左右padding+内容width
高 =上下margin+上下border+上下padding+内容height
例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px
宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
注意：
设置padding和margin会撑大盒子，如何解决？
根据外边距，内边距，边框大小重新计算盒子中内容的宽度和高度
*/
</style>
</head>
<body>
<div id="box10">
3.1415926265358979323846264338327950288419716939969513456456456456456456456798797897</div>
</body>
</html>