在html中元素边框样式三个缺一不可
1.盒子模型：一个盒子由内容区、内边距、边框、外边距组成。
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
要为一个元素设置边框必须指定三个样式,三个样式缺一不可。
大部分浏览器中，边框的宽度和颜都是有默认值的，边框样式的默认值是none
border-width：边框的宽度
border-color：边框的颜
border-style：边框的样式
❶border-width指定四个边框的宽度，分别设置为上、右、下、左方向，按照顺时针方向设置。
❷如果指定三个值，则这三个值分别设置给上、左右、下。
❸如果指定两个值，则这两个值分别设置给上下、左右。
❹如果指定一个值，上下左右全是该值。
除了border-width,CSS中还提供了四个border-xxx-width。
xxx的值可能是top、right、bottom、left。专门用来设置指定边的宽度。
其余两个样式同理。
.box1{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-width:10px;
    border-color:red;
    border-style:solid;
}
设置边框的样式：
可选值：
❶none，默认值，没有边框
❷solid，实线
❸dotted，点状边框
❹dashed，虚线
❺double，双线
2.border
边框的简写样式，可以同时设置四个边框的宽度、颜、样式。没有顺序要求。
但是一指定就是同时指定四个边，不能分别指定。
border-top、border-right、border-bottom、border-left：
单独设置四个边的样式，规则和border一样，只不过是对一个边生效。
3.内边距：指的是盒子的内容区与盒子边框之间的距离。
共有四个方向，可以通过：padding-top、
padding-right、padding-left、padding-bottom来设置四个方向的边距。
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
盒子可见框的大小由内容区、内边距和边框共同决定。
使用padding可以同时设置四个边框的样式，规则和border-width一致。
4.外边距：指的是盒子与其他盒子之间的距离。
css设置文字垂直居中
不会影响可见框的大小，但是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top、margin-right、margin-bottom、margin-left。
当我们设置上和左外边距时，会导致盒子自身的位置发生改变；
如果设置右和下外边距，则会改变其他盒子的位置。
外边距可以指定为一个负值，如果设置成一个负值，则元素会向反方向移动。
margin还可以设置为auto，auto一般只设置给水平方向的margin。
如果只指定左外边距或右外边距的maigin为auto，则会将外边距设置为最大值。
垂直方向外边距如果设置auto。则外边距默认就是0.
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，这样就可以使元素自动在父元素中居中，所以我们经常在左右边距设置为auto，以使子元素在父元素中水
平居中显示。
外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距。规则和padding一致。
5.垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距的重叠。
外边距重叠是指兄弟元素之间的垂直方向相邻外边距会取最大值而不是取和。
而水平方向的相邻外边距不会重叠，而是求和
如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。
6.默认样式
浏览器为了在页面中没有样式时也能有一个好的显示效果，为很多元素都设置了一些默认的margin和padding。而这些默认样式正常情况下我们不需要使用。所以我们往往在编写样式之前将浏览器中的默认的margin和padding统统去掉。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。