CSS应用的小问题总结

Posted 2020-09-20

1.两个元素换行书写时，在实际的布局中展示为两个元素之间多了一个区间（这个区间通常是因为代码在换行时，解析会自动默认为一个空格字符），所以在实际应用时，如果想要将两个元素完全无缝隙的放置在一起并排显示时，应该注意使用浮动和定位，或者可以通过设置父级元素的font-size:0;的方法；

2.使用绝对定位或者固定定位时，会使元素脱离文档流，此时元素会在文档层的上方显示，可能导致其他元素被挡在下方，不能正常显示出来。此时就需要设置z-index来解决将脱离文档流的元素设置层级，以达到显示效果；

3.很多时候，对于要显示外框线的元素，我们都会下意识的去设置它的边框border的属性值。虽然这样做是对的，但是在固定了大小的容器中，而要显示的元素的大小刚刚好，那么此时就需要设置outline来替代border。（outline只能四个边同时设置，而border可以分别设置单边的属性，使用时应该根据需求来设置）。