CSS常用布局技巧和适配方案

weixin_45353536

已于 2023-05-12 11:47:22 修改

阅读量186

点赞数

分类专栏： vue3+ts 文章标签： css javascript 前端

于 2023-05-12 11:37:02 首次发布

本文链接：https://blog.csdn.net/weixin_45353536/article/details/130638662

版权

vue3+ts 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.单列布局

1.水平居中

**（1）父元素 text-align:center;子元素：inline-block;**
			优点：兼容性好；
			不足：需要同时设置子元素和父元素

<divclass="parent">
   <divclass="child"></div>
</div>

.parent{
	width: 500px;
	height: 200px;
	background: red;
	text-align: center;
}
.child{
	display: inline-block;
	width: 300px;
	height: 100px;
	background: blue;
}

（2）.子元素 margin:0 auto;
优点：兼容性好
缺点：需要指定宽度

<divclass="parent">
  <divclass="child"></div>
</div>

.parent{width: 500px;
	height: 400px;
	background: red;
}
.child{margin: 0 auto;
	width: 300px;
	height: 100px
	;background: blue;
}

（3）.父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
优点：兼容性好
缺点：需要知道子元素的宽度

<div class="parent">
  <div class="child"></div>
</div>

 .parent {
	  position: relative;
	  top: 0;
	  left: 0;
	  width: 500px;
	  height: 400px;
	  background: red;
}
.child {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  margin-left: -150px;
	  width: 300px;
	  height: 100px;
	  background: blue;
}

（4）.父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
优点：不需要知道子元素的宽度
缺点：兼容性差（新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent">
    <divclass="child"></div>
</div>

.parent {
	  position: relative;
	  top: 0;
	  left: 0;
	  width: 500px;
	  height: 400px;
	  background: red;
}
.child {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  transform: translate(-50%, 0);
	  width: 300px;
	  height: 100px;
	  background: blue;
}

（5）.弹性盒子：父元素：display:flex;justify-content:center;
优点：简单
缺点：兼容性差（新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent">
   <divclass="child"></div>
</div>

.parent {
	  display: flex;
	  justify-content: center;
	  width: 500px;
	  height: 400px;
	  background: red;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
}

2.垂直居中

（1）.vertical-align:center;

<divclass="parent">
    <divclass="child"></div>
</div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  display: table-cell;
	  vertical-align: middle;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
}

(2).line-height

<divclass="parent">
    <divclass="child">
</div></div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  line-height: 400px;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
	  display: inline-block;
	  vertical-align: middle;
}

(3).父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<divclass="parent">
     <divclass="child"></div>
</div>

.parent {
	  position: relative;
	  top: 0;
	  left: 0;
	  width: 500px;
	  height: 400px;
	  background: red;
}
.child {
	  position: absolute;
	  top: 50%;
	  left: 0;
	  transform: translate(0, -50%);
	  width: 300px;
	  height: 100px;
	  background: blue;
}

(4).父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

<divclass="parent">
     <divclass="child"></div>
</div>

.parent {
	  position: relative;
	  top: 0;
	  left: 0;
	  width: 500px;
	  height: 400px;
	  background: red;
}
.child {
	  position: absolute;
	  top: 50%;
	  left: 0;
	  margin-top: -50px;
	  width: 300px;
	  height: 100px;
	  background: blue;
}

(5).父元素：display:flex;align-items:center;

<divclass="parent">
    <divclass="child"></div>
</div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  display: flex;
	  align-items: center;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
}

3.水平垂直居中

(1)父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

<divclass="parent">
     <divclass="child"></div>
</div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  display: table-cell;
	  vertical-align: middle;
	  text-align: center;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
	  display: inline-block;
}

(2)父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);

<divclass="parent">
     <divclass="child"></div>
</div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  position: relative;
	  left: 0;
	  right: 0;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
}

(3).父元素{display:flex;justify-content:center;align-items:center;}

<divclass="parent">
    <divclass="child"></div>
</div>

.parent {
	  width: 500px;
	  height: 400px;
	  background: red;
	  display: flex;
	  justify-content: center;
	  align-items: center;
}
.child {
	  width: 300px;
	  height: 100px;
	  background: blue;
}

二.多列布局

1. 左侧定宽，右侧自适应

(1).left{float:left;width:100px;} .right{margin-left:100px;}

<div class="left">left</div>
<div class="right">right</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  height: 400px;
  width: 300px;
  background: red;
  float: left;
}
.right {
  height: 400px;
  margin-left: 300px;
  background: blue;
}
<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right-fix">
    <div class="right">
      right
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;
}
.right-fix {
  width: 100%;
  margin-left: -300px;
  float: right;
}
.right {
  margin-left: 300px;
  height: 400px;
  background: blue;
}

(2). left{width:宽度值;float:left;} .right{overflow:hidden;}

<divclass="parent">
<divclass="left">   
  left   
</div><divclass="right">   
  right   
</div>
</div>

*设置overflow:hidden;创建BFC。根据BFC特性，BFC不会与float box 重叠。*/
* {
  margin: 0;
  padding: 0;
}
.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;
}
.right {
  height: 400px;
  background: blue;
  overflow: hidden;
}

(3).table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  display: table-cell;
}

(4).flex 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
}
.right {
  height: 400px;
  background: blue;
  flex: 1;
}

**2. 右侧定宽左侧自适应*

(1)float margin 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  float: left;
  margin-right: -300px;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  float: right;
}

(2).table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  display: table-cell;
}

(3).flex 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: flex;
}
.left {
  flex: 1;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
}

3.左边两列定宽，右侧自适应

(1)float margin 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  margin-left: 600px;
}

(2).float overflow 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  overflow: hidden;
}

(3).table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>


*{

margin: 0;

padding: 0;

}

.parent{

width: 100%;

display: table;

table-layout: fixed;

}

.left,

.center{

background: red;

display: table-cell;

width: 300px;

height: 400px;

}

.center{

background: yellow;

}.right{

height: 400px;

background: blue;

display: table-cell;

}