CSS布局相关问题

详细信息参见上篇博客

1.实现两栏(三栏)布局的方法

1.表格布局

2.float + margin 布局

3.inline-block布局

4.flexbox 布局

2.position:absolute/fixed 有什么区别

position:absolute 相对最近的 absolute / realtive

position:fixed 相对屏幕(viewport)

3.display:inline-block 产生间隙原因和解决方法

原因:有一些空白字符,这些空白字符会产生间距

解决:消灭字符(将标签写在一起,中间不要留空白或在中间加上注释)或消灭间距(直接将字体设为 0 ,让其不要占据空间)

4.如何清除浮动

1.让盒子负责自己的布局(overflow:hidden(auto))

2.新加一个元素在浮动元素后面,从而让父元素包含浮动元素(::after{clear:both} )

5.如何适配移动端

1.先进行 viewport 的适配

2.再进行 rem/viewport/media query 等大小方面的适配

设计上面:隐藏  折行  自适应


猜你喜欢

转载自blog.csdn.net/jianghao233/article/details/80379135