水平垂直居中、两栏布局、三栏布局、flex布局、常见的块级/行内/空元素、CSS Hack

最新推荐文章于 2024-06-02 17:14:20 发布
最新推荐文章于 2024-06-02 17:14:20 发布
阅读量199 收藏 1
点赞数 2
文章标签： css 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77783555/article/details/133041428
版权

一、水平垂直居中

1、父元素relative定位，子元素absottet定位（transform）

2、父相子绝加margin auto

3、父相子绝加margin负值（与transform思路一致） 

4、子元素转换为行内块

5、弹性盒子 

 

二、两栏布局

1、 两个盒子，第一个设置固定宽高然后浮动，第二个加overflow:hidden变成BFC清除浮动的影响

2、弹性盒子：一个大盒子内包两个

最低0.47元/天 解锁文章
曹小瑜
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用CSS3的flexbox实现水平垂直居中与三列等高布局
01-19
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分...
Flexbox制作CSS布局实现水平垂直居中的简单实例
12-13
Flexbox实现一个div元素在body页面中水平垂直居中： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="utf-8"/>  <title>Flexbox...
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
最新发布
m0_73560798的博客
06-02 1358
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
flex布局水平垂直居中
m0_62937694的博客
10-30 5017
在flex布局中，子元素的属性代码写在父盒子里面，并且flex布局中任何元素都可以设置大小；居中的思路就是分清楚主轴justify-content和侧轴align-items，都设置为center即可，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8659
css垂直水平居中方式
利用flex实现元素水平垂直居中
xiecheng1995的博客
07-19 1万+
首先介绍一下flex布局。 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始...
flex布局
yanzi_0216的博客
10-13 377
flex布局 一、布局 块级元素flex布局 display: flex; 内联元素flex布局 display: inline-flex; 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cros
通过Flex布局设置水平垂直居中
热门推荐
新白的博客
05-01 1万+
效果如下： 实现代码： 通过给父元素设置CSS样式： display:flex; align-items:center; justify-content:center; //HTML <div class='box'> <div class='box-item'> </div> </div> //css .box{ ...
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
css使用flexbox布局容器内多元素水平居中
12-13
在本文中，我们将深入探讨如何使用Flexbox实现容器内多元素的水平居中，并讨论相关的CSS属性以及Sass的使用。 首先，要实现容器内子元素的水平居中，我们需要将父元素设置为Flexbox布局。这可以通过添加`display: ...
收罗CSS布局中有关水平和垂直居中的N种方法
09-25
在CSS布局中，水平和垂直居中是网页设计中常见的需求。本文将详细介绍几种不同的方法，帮助你理解和掌握这些技巧。 首先，最常见的水平居中方法是通过设置元素的`margin`属性。例如，给元素设置固定宽度，并将`...
子元素在父元素中水平和垂直居中的几种方法
usernameID007的博客
08-06 2218
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
Flex 布局实现元素的垂直居中和水平居中
StarFishing
01-14 1万+
更多关于flex布局可以参考这篇博文：https://blog.csdn.net/qq_34803821/article/details/85139315 使用flex实现元素的水平居中和垂直居非常方便 水平居中： .box{ display: flex; justify-content: center; } 垂直居中 .box { display: fle...
css垂直水平居中(父元素宽高有无情况）+ flex用法
Rziziの博客
01-26 1078
1. 父元素设置display:flex, 子元素设置 margin:auto. 2. 父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto. 3. 父元素相对定位，子元素绝对定位，`left:50%,top:50%,transform:translate(-50%,-50%)` 4. flex布局，父元素 `display:flex,justify-content:center,align-items:center`
CSS：两栏布局【表单】的四种方式：float/position/flex/grid
weixin_43932309的博客
10-31 1012
CSS：两栏布局的四种方式：float/position/flex/grid，主要针对表单提交。
经典布局 （flex和传统两种实现） 左右两栏式
m0_49515138的博客
02-21 2931
right:宽度和父级一样，设定margin-right:left的宽度px,宽度随父级变化而变化（固定+自适应）当主轴方向为 column时，上面设置高度，宽度和父级一直，下边flex:1。也就是说，当主轴方向是row的情况下，左边设置宽度，右边flex:1。right: 定宽高： position: absolute top: 0 right 0。left： 定宽高： position: absolute top: 0 left: 0。left,right:定宽，定高，float:left。
使用Flex布局实现盒子的水平垂直居中
笔记
01-02 942
在日常的开发中，我们经常会制作登录注册框，一般这种框都是水平垂直于整个页面的，像这种的话一般都是用flex布局书写，因为这样最简洁方便。话不多说，直接上代码。
如何让弹框水平垂直居中？
Bennnnnnn的博客
04-17 1091
以下三种方法都可以实现弹框水平居中和垂直居中，第一种是采用flex布局，第二种是采用绝对定位，第三种是采用位移的方式，可以根据具体情况选择适合自己的方法。
flex垂直居中，最简单的方法之一
公z号：职场爱学习
06-24 808
display: flex; align-items: center;
Flex布局全解析：Web/App/小程序布局新标准
“flex布局分享.pptx”是一个关于Flex布局的培训PPT，适用于H5、小程序、React Native和Flutter等跨平台开发技术。这份资料深入介绍了Flex布局的基本概念、优势以及在不同环境下的应用。 Flex布局，全称为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值