CSS布局相关问题

简介: 详细信息参见上篇博客1.实现两栏(三栏)布局的方法1.表格布局2.float + margin 布局3.inline-block布局4.

详细信息参见上篇博客

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 等大小方面的适配

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


目录
相关文章
|
20天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
16 0
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
76 0
|
3月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
34 0
|
3月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
|
11天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
N..
|
30天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
|
2月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?