摘要：布局一左右布局实现左右布局居中布局的几个实现方案标签结构很简单，就是一个父元素里面套了一个子元素想要实现左右布局，只需要把设置成向左浮动，右边向右浮动或者把和设置成二居中布局结构居中布局的几个实现方案标签结构很简单，就是一个父元素
CSS布局 一、左右布局 1、float实现左右布局
居中布局的几个实现方案
DEMO
标签结构很简单，就是一个父元素里面套了一个子元素
想要实现左右布局，只需要把设置成向左浮动，右边向右浮动
.left{
float: left;
}
.right{
float: right;
}
或者把left和right设置成inline-block
.left{
display: inline-block
}
.right{
display: inline-block
}
二、居中布局
1、html结构
居中布局的几个实现方案
DEMO
标签结构很简单，就是一个父元素里面套了一个子元素
2.用text-align和inline-block实现首先text-align只针对inline元素有效，因此，可以在父元素设置text-align:center,然后改变子元素display:block为inline-block.
index01.css的代码为：
.parent{
height: 200px;
background-color: gray;
text-align: center;
}
.child{
background-color: yellowgreen;
height: 200px;
width: 200px;
display: inline-block;
}
3.用display:table和margin:0 auto实现
首先定宽的块级元素可以设置margin:0 auto实现水平居中
display:table这个元素的作用就像
index02.css的代码为; 首先对父元素设置position: relative
对子元素设置绝对定位，相对于父元素定位 用left:50%则可以根据左边进行定位 根据transform，则可以根据自身的宽度偏移
index03.css的代码为： 对父元素设置display:flex，则第一级子元素是flex-item
对子元素设置justify-content: center;就可以实现居中 ///////// 也可以对子元素设置margin:0 auto实现居中
index04.css的代码为： 左中右布局参考一的左右布局，可将三个元素都设置成float:left 四、垂直居中
height和line-height设置垂直居中
display:flex和align-items: center` 行级元素设置vertial-align: middle 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/116625.html 摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警
一劳永逸的搞定 flex 布局
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不... 摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警
一劳永逸的搞定 flex 布局
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不... 摘要：布局一左右布局实现左右布局居中布局的几个实现方案标签结构很简单，就是一个父元素里面套了一个子元素想要实现左右布局，只需要把设置成向左浮动，右边向右浮动或者把和设置成二居中布局结构居中布局的几个实现方案标签结构很简单，就是一个父元素
CSS布局
一、左右布局
1、float实现左右布局
... 摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。
学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结
总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，
那么对于静态的页面... 摘要：学习一个月了，对和页面的静态布局进行一次总结总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，那么对于静态的页面的布局就不会有太大的问题再说布局之前先说一下元素的显示模式分类。
学习HTML一个月了，对HTML和Css页面的静态布局进行一次总结
总体来说静态页面布局分为两大类，水平布局和垂直布局，只要水平布局和垂直布局都能熟悉了，
那么对于静态的页面... 阅读 1334·2021-09-22 15:35 阅读 1793·2021-09-14 18:04 阅读 628·2019-08-30 15:55 阅读 2336·2019-08-30 15:53 阅读 2473·2019-08-30 12:45 阅读 1083·2019-08-29 17:01 阅读 2449·2019-08-29 15:30 阅读 3378·2019-08-29 15:09 元素. 它定义了一个块级盒子.
.parent{
height: 200px;
background-color: gray;
}
/*display:table
在表现形式上很像是block元素
宽度跟着内容走。
*/
.child{
display: table;
margin: 0 auto;
background-color: greenyellow;
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
}
4.用position:absolute和left: 50%以及transform: translateX(-50%)实现
.parent{
height: 200px;
background-color: gray;
position: relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 200px;
background-color: greenyellow;
}
5.用flex+justify-content实现
.parent{
height: 200px;
background-color: gray;
display: flex;
justify-content: center;
}
.child{
height: 200px;
background-color: greenyellow;
/* margin: 0 auto; */
}
三、左中右布局
或者将三个元素都设置成dispaly：inline-block
相关文章
前端-CSS3&H5
前端-CSS3&H5
布局总结-水平居中布局的实现
静态页面布局总结（新手）
静态页面布局总结（新手）
发表评论
0条评论
starsfun
男|高级讲师
TA的文章
阅读更多
基于主机名的虚拟主机服务怎么实现-虚拟主机怎么登陆图解？
LAMP Web一键安装脚本 – Linux服务器安装Apache/MySQL/PHP网站环境
字蛛font-spider报错,<web font not found>,碰到的最新问题
布局总结-水平居中布局的实现
两列自适应布局方案整理
JavaScript的数据类型及其检测
前端面试题1（HTML篇）
伪类和伪元素的区别
最新活动
阅读需要支付1元查看
