发表于： 2019-06-15 23:47:20
1 749
今日完成的事
继续任务八
明日完成的事
继续任务八
收获
在网上查看资料的时候，发现在布局方面有个说法叫做三无原则，即无图片、无宽度（固定px值）、无浮动。无图片顾名思义就是少用或者不用css image属性，就和之前的雪碧图一样，少用image可以减少请求资源的大小，即使一个小图标只有几百字节的那种，请求加载速度也比css代码慢的多。
然后就是无宽度了，这里借用大佬demo做演示，
默认600px两张图显示的都是很正常，很全面的。
在修改外边框宽度后，有宽度设置的网页已经布局已经乱掉了，宽度布局限制了自适应，降低了扩展和容错性。
无浮动原则，浮动众所周知会造成父容器塌陷的问题，并且如果不清除浮动的话，后续的元素仍会与其并排，既然要清除就说明，float还影响了其他元素，一般来说块元素中有文字都不需要设置高度，靠文字就撑开了，或者说高度=line-height了，加入图片后，行高就会加上图片的高度，而浮动图片刚好脱离了文档流，破坏了行高，让后续的元素不与他重叠，而是围绕在其周围了，此时浮动的高度刚好包裹住内部元素，不会跟block元素一样填充满文档流。
返回列表
评论