1，左右布局
1.左边定好宽，右边自适应。float + margin
.left{
float:left;
width:200px;
height:100%;
border:1px solid red;
}
.right{
margin-left:200px;
border:1px solid green;
}
2.左边设置左浮动，右边宽度设置100%
.left{float:left;}
.right{width:100%;}
3.父容器设置 display：flex；Right部分设置 flex：1
.marin{display:flex;}
.left{width:200px;}
.right{flex:1;}
4.定位 ，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{height:200px;}
.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}
.right{margin-left:100px;height:100px;background-color:yellow;}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2，左中右布局
1.用浮动float完成。
2.通过设置display完成。
3，左中右布局
1.通过margin: 0 auto; text-align: center实现CSS水平居中。
- 这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。
2.通过display:flex实现CSS水平居中.
- 原理是父元素display:flex;flex-direction:column;而子元素align-self:center;
3.通过display:table-cell和margin-left实现CSS水平居中。
- 对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
4.通过position:absolute实现CSS水平居中。
- 这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。
使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。
5.通过width:fit-content实现CSS水平居中。
- 这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。
需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。
6.通过display:inline-block和text-align:center实现CSS水平居中.
- display:inline-block能改父元素内的子元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使用。
7.通过position:relative、float:left和margin-left实现CSS水平居中。
- 给父元素样式position:relative，给子元素float:left和margin-left就可以实现CSS水平居中。
8.通过隐藏节点+float的方法实现CSS水平居中。
- 我们可以通过增加一个隐藏节点，然后使其float:left，这样子元素就会被隐藏节点推着水平居中。
这种增加隐藏节点方法也适用于CSS垂直居中，原理一样，但是不用float。
9.通过transform实现CSS水平居中。
- 这种方法是最不推荐的方法，因为transform属性在各个浏览器中的表现行为不一致，所以会出现一些兼容性的问题，只有当已知用户浏览器时才推荐使用。
4，垂直居中
1.通过verticle-align:middle实现CSS垂直居中。
- 通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
2.通过display:flex实现CSS垂直居中。
- 随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3.通过伪元素:before实现CSS垂直居中。
- 具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。
4.通过display:table-cell实现CSS垂直居中。
- 给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。
5.通过隐藏节点实现CSS垂直居中。
- 创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。
这种方法也适用于CSS水平居中，原理一样。
6.已知父元素高度通过transform实现CSS垂直居中。
- 给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。
7.通过line-height实现CSS垂直居中。
- 设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
8.知父元素高度通过transform实现CSS垂直居中。
先给父元素position:relative，再给子元素position:absolute，通过translateY即可定位到垂直居中的位置。
网友评论