CSS学习笔记

左右浮动布局

清除浮动模板，给float元素的父元素添加。

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}

文档流

元素的高度与宽度由内部文档流高度和宽的总和决定。
文档流：文档内元素的流动方向。
内联元素：流动方向从左往右，遇到阻碍换行。
块级元素：流动方向从上往下，一块一行。
在内联元素中，word-break控制换行，英文默认情况下单词不可分（keep-all，），中文默认全部可分（break-all，英文可用break-word）。
使用position:fix后块级元素将会往内缩：
场景：写一个带logo的顶部固定导航栏，

 .top-nav  .logo {float: left;}
.top-nav  nav{float: right;}

在top-nav添加position:fix后，整个top-nav会往内缩，不再占满一行。
这时可以使用width: 100%（大雾)
然后bug来了，因为logo和nav的padding会导致top-nav宽超过父元素body的宽。解决方案是在top-nav里再给logo和nav包一个

---

width：100%是大部分bug的根源。
大部分时候我们不应该通过设置height和width来改变高宽，而是应该通过内部文档流来改变。

背景图

当我们需要设置一个背景图需要考虑的问题

• 图片的尺寸（文件大小）以及压缩，可以使用在线压缩。
• 背景图需要no-repeat ，居中的方式需要考虑。
• 需要考虑大分辨率下的情况，background-size: cover。
• 在背景图未加载出来前的背景。
• 背景与背景里的元素的契合度。