本文总结了前端布局中常见的技巧，包括使用margin-top和margin-bottom的差异、float与position的适用场景、img标签的自适应、line-height的字体位置调整、选择器的复用、position属性的细节、transform的元素缩放、overflow隐藏子元素溢出、transition的元素变化效果，以及使用float消除div间空隙的方法。同时，文章也列举了一些常见的错误，如border的计算方式、position与float的互斥、a标签的宽度高度设置及背景颜色显示问题。
技巧总结：
1. 对多个li标签使用标签选择器时，margin-bottom对第一个不影响，因为margin-bottom改变两个元素间底边距，而是相对于第一个块的，所以第一个不动，使用margin-top将改变第一个，因为第一个li的margin-top是相对于ul标签所以，margin-top改变他也改变。
2. 对网页布局先用float，float若不能达到要求再改用position
3. 对列表内的img标签可以使用指定标签选择器的方法，对width和height使用比例指，img会自适应父标签的大小
4. line-height可以设置span中字体的高度位置
5. 在写选择器的时候带上父class，则该层选择器的名字可以相同。下例：
.class1 class2 news{}
.class3 class4 news{}
在使用时，可以只写上news。
6. 在具体的一个div块内可以使用position属性调整元素位置，若使用absolute时，其父div需要时也是position属性才行，可以设置position为relative，relative与float属性变化不大。
7. 使用transform: scale();是可以放大缩小元素
8. 使用一个标签A嵌套标签B，标签A设置overflow:hidden，则标签B放大超过标签A的部分则不显示。
9. transition是一个元素变化的属性，可以设置变化的延迟时间，变化的快慢方式等。
10. 使用float进行布局可以消除div之间莫名的空隙
错误总结：
1. border：1px solid black，则在盒子模型中元素的border上下左右都会占1个px。
2. position: absolute和float属性不能一起使用
3. 对a标签使用width、height后设置background-color无法显示出一个矩形，因为a标签是inline元素，所以修改display才能显示
4. span、a等inline元素，需要修改display才能进行布局
扫一扫
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
