6-css盒子模型（边框、内边距、外边距、内容）及清除网页自带边距

一、边框：border

①、复合写法：border: 1px solid #ccc;

②、边框会撑大盒子的大小。

 

二、内边距：padding

①、复合写法：padding: 10px 5px;  上下10，左右5.

②、padding是内容与盒子边框之间的距离，给内容的父亲添加。 

③、padding会撑大盒子。

④、如果盒子没有宽高，就不会撑大盒子；如果盒子只有高，就会撑大高，只有宽，就会撑大宽。

 

三、外边距：margin

①、复合写法：margin: 10px 5px;  上下10，左右5.

②、margin是盒子与盒子之间的距离。

③、margin应用：让块级元素水平居中： margin; 0 auto； 

 

 

四、外边距应用及塌陷问题：

①、行内元素或者行内块元素要水平居中就给他的父亲添加 text-align: center; 垂直居中就是 行高等于高。

②、两个嵌套的块元素，如果父亲有外边距，子元素也有外边距，此时父元素会塌陷；或者直接给子元素一个外边距父元素也会塌陷。

③、解决：给父元素添加 overflow: hidden;

 

五、网页会自带一些内外边距：

①、比如自带padding和margin，一些元素也会自带，比如 ul。

②、清除： * {margin; 0 padding:0}。

③、行内元素为了照顾兼容性尽量只设置左右的内外边距，不要设置上下内外边距；设置了也是无效的。

④、行内元素直接就看做是文字就行了。