盒子模型的基础
-
盒子模型
-
边框（border）
-
border可以设置元素的边框，边框分成三部分，边框的（粗细）边框的样式，边框的颜色
-
<style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框的样式 border-style: solid 实线边框 dashed 虚线边框 dotted 点线边框border-color: 边框颜色} </style> <body><div></div> </body> -
边框的简写：没有顺序，一般规定。
-
border-width: 200; border-style: 边框的样式 border-color: 边框颜色 -
简写后：border: 5px solid pink;
-
可以分别让四个边框各自修改
-
border-top: 大小 边框样式 边框颜色。这是让上边框改变，还有bottom left right
-
border: 1px solid bule;
-
border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色，其他边其他颜色
-
当想合并两个方框的边框使其1+1=1则
-
border-collapse:collapse; -
测量盒子的大小的时候，不量边框
-
测量包括边框时需要，width/height剪切边框的宽度
-
让内容与边框有距离则利用填充的方法
-
padding-left: 200px;//将左边的进行填充 padding-top: 38px;//将上边进行填充 
-
-
如果固定了和盒子的大小使用padding就会使盒子变大，故当使用padding时要将其与盒子一起相加
-
当父类有witch/height时，子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围
-
外边距margin-left: 数值
-
右外边距margin-right: 数值
-
上外边距margin-top: 数值
-
下外边距margin-bottom: 数值
-
让盒子水平居中
-
1、盒子必须指定了宽度（width)
-
2、盒子左右的外边距都设置为auto
-
<style>div {width: 100px;height: 100px;background-color: aqua;margin: 0 auto;//0代表上下外边框为0，auto自动水平对齐}</style><body><div></div> </body> -
以上的方法是让让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可
-
嵌套块元素垂直外边距的塌陷
-
由于两个父子关系的块元素，两个都用margin-top: 59px；最终执行的是父类的塌陷
-
解决方法一、父类定义上边框
-
border: 1px solid transparent；//transparent是全透明
-
方法二、给父类上内边框
-
padding: 1px ；
-
方法三、给父类添加overflow.hidden