<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型</title> <!-- 边框（border） 外边距（margin） 内边距（padding） 内容区（content）--> <style> #box10{ width: 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-topborder-right-style/border-right-width/border-right-color--->border-rightborder-bottom-style/border-bottom-width/border-bottom-color--->border-bottomborder-left-style/border-left-width/border-left-color--->border-leftborder-style/border-width/border-color----borderpadding的使用方法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：盒子与盒子之间的距离属性：marginmargin-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>
来源：https://www.cnblogs.com/kwkk978113/p/11330662.html