初学者在CSS布局时容易遇见的一些问题及解决方法

因为本人目前正在学习前端的CSS布局知识，所以整理了一下初学者在做CSS布局时容易遇见的一些问题及其解决方法，旨在帮助自己巩固知识、便于复习，或者如果恰好能帮助到有需要的初学者解决问题那也相当有价值。

1、盒子塌陷问题

当做盒子布局时，父盒子里面有一个子盒子，此时想对子盒子进行上下移动位置，于是初学者可能会想到用margin-top来调整位置，这时会发现子盒子并没有相对父盒子撑开边距，而是父盒子添加了这个边距值，这并不符合我们所预想的布局要求！

解决方法：给父盒子添加overflow = hidden

2、清除浮动问题

当我们使用浮动来对数个同级的块元素进行调整布局时，如果父元素本身并未设置高度，则会导致父元素的高度丢失，即：浮动后的子元素不会称开父元素的高度！这样可能并不符合我们的布局要求，会导致父元素下面的同级元素陷入子元素下面被覆盖住。

解决方法：共三种方法：①给父元素添加overflow = hidden ②加一个空子元素，并添加clear = both属性 ③给元素添加after伪元素，并且需要设置height = 0以及content属性，content属性值可以为空。

3、关于居中的汇总（我已知的）

text-align = center 添加于父元素，用于使行内元素（包括行内块元素）水平居中对齐。

想使块元素中的子行内元素（包括行内块元素）垂直居中可以设置子元素 line-height = “父元素高度”

vertical-align设置行内元素的垂直对齐方式，当有图片和文本在一行时，将它们的vertical-align都设置为middle可以让文本垂直对齐图片的中间

对于块元素进行水平居中，可以使用margin = 0 auto，上下边距可以不为0而为其他值，但是左右边距需要设置auto，这样它会自动设置左右边距从而实现水平的居中。

对于块元素进行垂直居中，可以给父元素添加display = flex以及align-items = center，这样里面的块元素会自动垂直居中，非常好用。

4、清除内外边距和边框盒子设置

许多块元素例如ul，会默认带有一定内外边距，更重要的是不同的浏览器带有的值还可能不一样，在实际开发中，为了更符合心意的布局以及照顾兼容性，都会加margin = 0，padding = 0，并使用通配符选择器应用于所有元素来消除影响；而通常情况下对于块元素的内边距和边框的设置会撑大盒子的实际大小，从而影响布局，此时要设置box-sizing = border-box，这样设置以后就可以随心所欲的布局了。

暂时总结出来这些，以后有新的发现再补充。