html（css部分问题、样式）

外边距问题

父级嵌套子集

<p>  //父级

<span></span>//子集

</p>

margin塌陷问题

有嵌套关系时，给子集设置外边距时，会发生margin塌陷问题，本来想让子集离父级有外边距效果

结果效果没产生反而父级有了外边距。

解决方法：方法1.给父级设置边框或者内边距。

方法2.给父级设置overflow：hidden；css样式。

margin重叠问题

有同级关系时。举例第一个块级元素取名为a，第二个块级元素取名为b，两个元素在两行显示。

a下外边距想离b为50像素，那么a的css样式下外边距为50，那么又来了个问题让b离a的边距为60 b的上外边距时60，那么加起来两个元素的边距应该是110，但浏览器不会这样认为，两个值会合并，他会取两个元素的最大值，也就是60 两者的外边距只有60 那么这种方法时不可取的。

解决方法：其实没必要给两个元素设置外边距直接给其中一个元素设置外边距为110就可以了。

如果非要这样设置，那么给要设置外边距的元素嵌套一个块级父元素，并加css样式overflow：hidden；即可。

css显示模式

块级元素（常见的 div、p、h、ul、ol、li、dt、dt、dd、table、tr）

块级元素特征：单独在一行显示，可以设置宽高。

在不设置宽度的情况下，块级元素的宽度是它父级元素的内容宽度。

在不设置高度的情况下，块级元素的高度是它本身内容的高度。

可以设置上下左右内填充和外边距。

行级元素（常见的 span、a、strong、em、b、i、th、td、）

行级元素特征：并排显示，不能设置宽高，宽高取决于内容。

行级元素里面只能容纳文本或者行级元素（不能在行级元素内嵌套块级元素）

行级标签之间有间隙，不可以设置上下外边距，（上下内填充不能把文本挤下来）

行内块元素 （常见的 img、input）

行内块元素特征：默认并排显示，可以设置宽高，宽高取决于内容。

并排显示时中间有间隙

可以设置任意方向的外边距和内填充

可以强制设置块级元素、行内元素、行内块元素。

css样式为：

强制设置块级元素     display：block；

强制设置行内元素     display：inline；

强制设置行内块元素  display：inline-block；