1、弹性布局-display:flex
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.content {
width:100%;
height:100px;
/*
弹性布局
*/
/*display:flex;*/
}
.left {
width:400px;
background-color:green;
height:100px;
/*
浮动
*/
float:left;
}
.right {
width:100%;
background-color:red;
height:100px;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2、浮动布局-display:float
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
.content {
width:100%;
height:100px;
}
.left {
width:400px;
background-color:green;
height:100px;
/*
浮动
*/
float:left;
}
.right {
width:100%;
background-color:red;
height:100px;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3、table布局-display:table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
* {
box-sizing: border-box;
}
.content {
display: table;
border: 1px solid #06c;
padding: 15px 15px;
max-width: 1000px;
margin: 10px auto;
min-width: 320px;
width: 100%;
}
.img-box {
height: 150px;
width: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #4679bd;
}
.text-box {
margin-left: 20px;
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<div class="content">
<div class="img-box">
[图片上传失败...(image-5e66ac-1553415098492)]
</div>
<div class="text-box">
<span>
王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,>有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。
</span>
</div>
</div>
<div>
父元素:display:table;
子元素:display:table-cell;
<p>(1) 空间平均划分:子级容器默认是自动平分宽度沾满父级容器</p>
<p>(2) 设置其中一个table-cell为固定宽度:如果固定好其中一个子级容器,那么其余子级容器会自动平分宽度沾满父级容器;</p>
<p>(3) 设置每一个table-cell为固定宽度</p>
<p>(4) 把此元素放置在父元素的中部,即垂直居中—vertical-align:middle</p>
<p>(5) 等高对齐
是不对右侧的box设置display:table-cell,只对左侧,所以就会出现左侧跟随右侧高度变化而变化,如果要实现不管两个box哪个高度产生变化另一个就跟随,只需要把右侧的box也设置成display:table-cell就可以实现了。
</p>
</div>
</body>
</html>
4、网格布局-display:grid
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html5css3 阶段</title>
<style>
body {
margin: 0;
font-size: 20px;
}
.item-1 {
background-color: red;
}
.item-2 {
background-color: green;
}
.item-3 {
background-color: blue;
}
.item-4 {
background-color: orange;
}
</style>
</head>
<body>
<style>
.parent {
width: 400px;
background-color: #ccc;
/* 把父元素设置为网格容器(行和列) */
display: grid;
/* 指定行的样式 (数量和高度) */
/* 例如:以下表示网格容器划分1行,每行高度100px */
/* grid-template-rows: 100px 100px; */
grid-template-rows: 100px;
/* 指定列的样式 (数量和宽度)*/
/* 例如:以下表示网格容器划分2列,*/
/* 第二列宽度自适应 */
grid-template-columns: 50px auto;
}
.child-1 {
background-color: red;
}
.child-2 {
background-color: green;
}
</style>
<div class="parent">
<div class="child child-1">1</div>
<div class="child child-2">2</div>
</div>
</body>
</html>