HTML网页随手记

在使用HTML5+CSS做一套前端的过程中的笔录：

• 使用flex布局，配合justify-content和align-items实现居中效果
• div下的img默认不会充满div，在底部留有一些空白，解决办法：将img的display设置为block。参考：https://cloud.tencent.com/developer/ask/25502
• li设置float属性之后，脱离正常文档流，所以不能撑起ul的高度，ul变成一条线，解决办法：将ul的overflow属性设置为auto或者hidden。参考：https://www.cnblogs.com/cielzhao/p/5781462.html
• 使用flex布局时需注意flex-direction，默认为横向，此时会使块级元素横向排列
• 两个div（命名为A、B）垂直排列，A随意高度，B高度要求填满空间：将父级position设置为relative；再把B的position设置为absolute，且设置top为A的高度，bottom为0。参考：https://zhidao.baidu.com/question/814985361925107332.html
• div中文字水平垂直居中，使用text-align实现水平居中，设置line-height和div高度相同则实现垂直居中
• 使用css实现hover某一个元素，使其子元素的效果发生变化，可以用  元素:hover 子元素{}，例如  li:hover a{background:white}
• 如果页面右侧出现空白区域导致出现滚动条，可能是由于position设置问题，解决办法：html{ width:100%; overflow-x:hidden；}，也可能是由于某个元素在width设置为100%的时候使用了padding或margin导致页面溢出，解决办法：给该元素添加box-sizing属性，设为border-box，作用是把padding部分计入width之内
• 父级div（A）下有两个子级div（Ab，Ac），设置A为float，Ab为float，发现Ac和Ab不在同一行，解决办法：设置Ac的position为absolute
• 子元素设置了float属性后，不能撑起父元素的高度，解决办法：将父元素最后添加一个div，设置clear：both。