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

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


目录
相关文章
|
21天前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
37 3
|
21天前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
39 3
|
25天前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
48 1
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
135 8
|
3月前
|
前端开发
CSS中的display属性:布局控制的关键
CSS中的display属性:布局控制的关键
141 42
|
1月前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
31 0
|
1月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
32 0
|
1月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
72 0
|
2月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
2月前
|
前端开发
css 十字分割线(含四等分布局)
css 十字分割线(含四等分布局)
47 2