flex+margin打开你的新大陆

最新推荐文章于 2024-10-17 17:37:06 发布
最新推荐文章于 2024-10-17 17:37:06 发布
阅读量228 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_50885646/article/details/134567726
博客介绍了在CSS中，flex与margin结合能大大简化布局。以元素水平垂直居中为例，以往需给父元素设置多个属性，而使用margin+flex，只需在子元素里设置margin:auto，因为在弹性盒子中margin:auto可吃掉元素剩余空间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大家在最初学习CSS的时候想必对flex,margin已经很熟悉了，但是flex+margin能给你意想不到的结果,它能大大简化我们的布局。

举个例子：

如果我们要想实现一个元素水平垂直居中，以前是这样做的给父元素设置display:flex,justify-content:center,aligin-content:center。使用margin+flex.你只需要在子元素里面设置margin:auto。

在弹性盒子里面设置margin:aoto的意思是吃掉元素剩余的空间。假设设置margin-left:aoto就是吃掉它左边的剩余空间，同理其它边也是一样。

这里就是各吃掉一半，所以就水平居中了。

这种复杂的布局

前端开发攻略---利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？
nibabaoo的博客
04-09 680
利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？
手写仿淘宝商城页面（html+css+部分js）
xiediyue的博客
10-07 5064
一个练手项目，边看视频边写的，代码都是别人的。 效果图： html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini.
前端 CSS 经典：flex + margin 布局
weixin_64684095的博客
06-21 646
如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。
CSS 属性篇(四)：Flex弹性盒子
weixin_33762321的博客
02-22 244
一、Flex介绍 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局: .box{ display: flex; } 复制代码行内元素也可以使用 Flex 布局: .box{ display: inline-flex; } 复制代码Webkit 内核的浏览器，必须加上-webkit前缀: .box{ ...
flex+margin布局方法
Clover ‘s Blog
06-03 333
方式：【具体代码1】
flex + margin 妙用
一只路过的小码农
12-27 1417
利用flex + margin 巧用
7天精通Web APIs——-Dom获取&属性操作（理论+实战篇）（第一天）
爱游戏爱学习的博客
04-24 1234
DOM是文档对象模型，dom对象和结点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原神登录注册表单</title> <style> body { font-family: 'Arial', sans-serif; background: url('https://i.imgur.com/3QZQZ9m.jpg') no-repeat center center fixed; background-size: cover; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .form-container { background: rgba(0, 0, 0, 0.7); padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); width: 350px; text-align: center; color: white; } .form-container h2 { font-size: 24px; margin-bottom: 20px; color: #ffcc00; } .form-container input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: white; font-size: 16px; } .form-container input::placeholder { color: #ccc; } .form-container button { width: 100%; padding: 10px; background: #ffcc00; color: #000; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 10px; } .form-container button:hover { background: #e6b800; } .toggle-button { background: none; border: none; color: #ffcc00; cursor: pointer; text-decoration: underline; font-size: 14px; } .toggle-button:hover { color: #e6b800; } .hidden { display: none; } </style> </head> <body> <div class="form-container"> <!-- 登录表单 --> <div id="login-form"> <h2>欢迎登录提瓦特大陆</h2> <input type="text" id="login-username" placeholder="用户名" required> <input type="password" id="login-password" placeholder="密码" required> <button type="submit" onclick="login()">登录</button> <p>没有账号？<button class="toggle-button" onclick="toggleForm('register-form', 'login-form')">注册</button></p> </div> <!-- 注册表单 --> <div id="register-form" class="hidden"> <h2>注册提瓦特大陆</h2> <input type="text" id="register-username" placeholder="用户名" required> <input type="password" id="register-password" placeholder="密码" required> <input type="email" id="register-email" placeholder="邮箱" required> <button type="submit" onclick="register()">注册</button> <p>已有账号？<button class="toggle-button" onclick="toggleForm('login-form', 'register-form')">登录</button></p> </div> </div> <script> // 切换表单显示 function toggleForm(showId, hideId) { document.getElementById(showId).classList.remove('hidden'); document.getElementById(hideId).classList.add('hidden'); } // 登录功能 function login() { const username = document.getElementById('login-username').value; const password = document.getElementById('login-password').value; alert(`欢迎回到提瓦特大陆，${username}！\n登录成功！`); } // 注册功能 function register() { const username = document.getElementById('register-username').value; const password = document.getElementById('register-password').value; const email = document.getElementById('register-email').value; alert(`欢迎加入提瓦特大陆，${username}！\n注册成功！`); } </script> </body> </html> 创建一个首页页面
最新发布
03-11
但用户最后的请求有点模糊，可能是在现有代码基础上扩展首页，或者创建一个新的首页。需要进一步确认，但根据上下文，可能是指基于现有登录页面后的首页。 接下来，分析现有代码。结构上，使用了flex布局居中表单...
移动web开发rem+js适配布局开发
每天都要努力学习哦~~
01-07 1522
视口 视口(viewport) 就是浏览器显示页面内容的屏幕区域,视口分为 布局视口 视觉视口和理想视口 布局视口:layout viewport 一般设备的浏览器设置了一个布局视口,用于解决早期pc端页面在手机上显示的问题 rem基础 rem (root em) 是一个相对单位,类似于em是父元素字体大小,不同的是,rem的基准是相对于html元素字体大小 rem的优点:可以通过修改html里面的文字大小来改变页面元素中的大小可以整体控制 rem+js 用过js动态获取屏幕宽度修改ht
ColorUI组件库简易教程之扩展插件
仗剑东游的猫
11-22 9789
按照惯例，在此奉上官方示例！！！ 目录 扩展插件 索引列表 微动画 全屏抽屉 垂直导航 扩展插件 索引列表 索引列表主要由scroll-view标签实现，类名为indexes，具体js逻辑请看源码，有些我没看懂，希望看懂的大佬教教我 <template> <view> <view class="cu-bar bg-white...
flex与margin在单行布局的配合使用
weixin_30650859的博客
08-16 456
flex布局极大程度上方便了页面的构建，如下的几种布局当中，为了不增加额外的标签来嵌套，单独使用flex布局的话，还需要其他一些设置来处理，比如与伪元素的配合使用，这个下次再进行描述，这里flex与margin的使用配合，个人认为是目前自己用过最方便的一种方法。 <!DOCTYPE html> <html> <head> <meta c...
flex配合margin实现元素均匀分布
Rverdoser的博客
10-17 427
在Flex布局中，要使用margin实现元素均匀分布，可以设置容器内元素的margin值相同，并且设置容器的justify-content属性为space-between。这样，第一个元素会紧贴容器边缘，最后一个元素会被紧贴容器边缘，其余元素均匀分布在这两个元素之间。在这个例子中，.container是一个Flex容器，.item是容器内的子元素。子元素.item使用了水平方向的margin，容器.container使用了justify-content: space-between;
flex布局 （解决了margin传递、重叠（叠加）问题）
热门推荐
qq_37672347的博客
08-23 1万+
Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 任何一个容器都可以指定为Flex布局。 .box { display: flex; } 行内元素也可以使用Flex布局。 .box { display: inline-flex; } 最新版本，使用display:flex或者display:inline-flex ...
探秘 flex 上下文中神奇的自动 margin
weixin_34253126的博客
05-23 486
为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？ 水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： <div class="g-container"> <div class="g-box"></div> </div> 复制代码.g-conta...
Flex布局+margin 如何实现列表布局
qq_63605379的博客
10-28 277
实现列表布局
flex布局，子级margin会撑爆父级div
qq_27806371的博客
09-08 902
flex布局 子级撑爆父级
神奇的flex+margin:auto
Brilliant Me 的博客
08-19 3523
flex布局相信是大家现在开发中比较常使用的一种布局了，使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。 div { width: 100px; height: 100px; background-color: black; display: flex; align-items: center; ...
flex弹性布局
m0_72741512的博客
08-01 392
flex，弹性布局
css: flex 与 margin
好好学习，天天向上 ～
09-14 256
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值