html盒模型及其样式

盒模型-边框：

记住盒子的大小是由三部分决定的

要设置边框，必须这三个同时设置，缺一不可

譬如：border-width: 10px 0;表示的是将上下边框宽度设置为10px 左右设置为0
border-width: 10px 20px 0; 表示的是将上边框设置为10px 下边框为0 左右边框为20px。
这种简写方式比较重要，接下来还有很多种简写类似这种写法。


边框的简写：

简写只能同时设置四个边框，但是快

盒模型-内边距：

内边距也可以简写，使用padding就可以设置四个内边距，和border-width的规则是一样的。

盒模型-外边距：

重点：设置左和上外边距 动的是自身，设置右和下外边距 动的是其他的盒模型

我们经常将左右外边距设置为auto来达到子元素水平居中的效果。
水平居中：margin:auto 0;
而margin简写规则和padding一样。

盒模型外边距的重叠：

如果是父子元素，那么设置子元素位置的方法有两种，

1. 子元素设置一个边框或上内边距使他们不相邻。
2. 父元素设置一个上内边距使他们不相邻 但是这两种方法会导致盒模型大小发生改变，要注意

浏览器的默认样式：

有些浏览器为了显示美观是自带样式的，所以我们需要事先去除，用一个
*{margin:0;padding:0}
就可以了。

内联元素的盒模型：

• 内联元素不能设置weight和height；
• 内联元素可以设置水平方向的内边距；
• 内联元素可以设置垂直方向的内边距，且不影响页面布局。
• 内联元素可以设置边框，但垂直的边框不会影响页面布局。
• 内联元素支持水平方向外边距，且不会重叠，只会求和
• 内联元素不支持垂直外边距