CSS教程
【九月打卡】第21天 一课全面掌握主流CSS布局 课程全集
本文主要是介绍【九月打卡】第21天 一课全面掌握主流CSS布局 课程全集，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
课程名称： 一课全面掌握主流CSS布局
课程章节： 课程全集
主讲老师： KingJ
课程内容：
今天学习的内容包括：
如何实现主流的CSS布局
课程收获：
问答：
问题：在全屏布局中, 不同分辨率该如何处理
回答：
1.可以设置百分比宽度。
2.根据媒体查询 设置不同分辨率下 输入框的固定宽度
如下：
@media screen and (max-width: 1920){
input.xxx{width: 200px}
}@media screen and (max-width: 1780){
input.xxx{width: 180px}
}
笔记：
使元素脱离文档流的三种方法：
-
让元素浮动float:left/right;
-
给元素添加绝对定位属性position:absolute;
-
给元素添加固定定位属性position:fixed;
这三种方法使元素脱离了文档流，会导致margin属性的值无效
两列、三列布局
- 浏览器兼容好，但需要根据宽度进行调整（耦合性低）
.left{float:left；}
.right{margin-left:left的宽度；} - 兼容好，overflow隐藏后无法解决不隐藏的子级
.left{float:left；}
.right{overflow:hidden；} - table使用后需要对表格默认的相关属性进行调整
父元素{display：table；table-layout:fixed；}
left，right{display：table-cell；}
position : absolute属性 的两种情况
-
当父级元素没有开启定位的话，则子级元素是相对于页面的绝对定位。
-
当父级元素开启了定位的话，则是相对于父级元素的。
当把当前元素设置为绝对定位之后：
-
如果父级元素没有开启定位：当前元素是相对于页面定位的。
-
如果父级元素开启了定位：当前元素是相对于父级元素定位。
怎么给父级元素开启定位？
- 将父级元素的position属性设置为relative/fixed/absolute
实现不定宽块状元素水平居中的方法：
-
通过给父元素设置float:left然后父元素设置position:relative;left:50%，子元素设置position:relative；left:-50%来实现水平居中。
-
把元素放在表格单元里，给元素外面套一层
<table>...</table>，利用表格不定义宽度时不自动设置成body元素宽度，而是由内容撑开的特性，给table标签设置margin:0 auto;实现水平居中。
margin属性设置:
一个值 : 表示上右下左的外边距相同
两个值 : 第一个表示上下外边距 第二个表示左右外边距
三个值 : 第一个表示上边距 第二个表示左右外边距 第三个表示下外边距
四个值 : 分别表示上右下左的边距
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
Transform：translateX(x)（向X轴便宜量，可以是px，也可以是%）
实例代码：
/01-01 水平居中布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>水平居中布局的第一种解决方案</title>
<style>
#parent {
width: 100%;
height: 200px;
background: #ccc;
/*
text-align属性:是为文本内容设置对齐方式
* left:左对齐
* center:居中对齐
* right:右对齐
*/
text-align: center;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
/*
display属性:
* block:块级元素
* inline:内联元素(text-align属性有效)
* width和height属性是无效的
* inline-block:行内块级元素(块级+内联)
* width和height属性是有效的
*/
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>
</body>
</html>
/01-02 水平居中布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>水平居中布局的第一种解决方案</title>
<style>
#parent {
width: 100%;
height: 200px;
background: #ccc;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
/* display的值为table和block */
display: table;
/*
margin属性:外边距
* 一个值 - 上右下左
* 二个值 - 第一个表示上下，第二个表示左右
* auto - 表示根据浏览器自动分配
* 三个值 - 第一个表示上，第二个表示左右，第三个表示下
* 四个值 - 上右下左
*/
margin: 0 auto;
position: absolute;
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>
</body>
</html>
/01-03 水平居中布局的第三种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>水平居中布局的第三种解决方案</title>
<style>
#parent {
width: 100%;
height: 200px;
background: #ccc;
/* 开启定位 */
position: relative;
}
#child {
width: 300px;
height: 200px;
background: #c9394a;
/*
当把当前元素设置为绝对定位之后:
* 如果父级元素没有开启定位的话，当前元素是相对于页面定位的
* 如果父级元素开启了定位的话，当前元素是相对于父级元素定位的
*/
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>
/02-01 垂直居中布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>垂直居中布局的第一种解决方案</title>
<style>
#parent {
width: 200px;
height: 600px;
background: #ccc;
/*
display属性:
* table:设置当前元素为<table>元素
* table-cell:设置当前元素为<td>元素(单元格)
*/
display: table-cell;
/*
vertical-align属性:用于设置文本内容的垂直方向对齐方式
* top:顶部对齐
* middle:居中对齐
* bottom:底部对齐
*/
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
居中布局
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>
/02-02 垂直居中布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>垂直居中布局的第二种解决方案</title>
<style>
#parent {
width: 200px;
height: 600px;
background: #ccc;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>
/03-01 居中布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>居中布局的第一种解决方案</title>
<style>
#parent {
width: 1000px;
height: 600px;
background: #ccc;
/* <td> */
display: table-cell;
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
/* <table> */
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>
/03-02 居中布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>居中布局的第二种解决方案</title>
<style>
#parent {
width: 1000px;
height: 600px;
background: #ccc;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>
/04-01 两列布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>两列布局的第一种解决方案</title>
<style>
#left,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
/* 当前元素脱离文档流 */
float: left;
}
#right {
background-color: #cccccc;
margin-left: 400px;
}
#inner {
height: 300px;
background-color: green;
clear: both;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<div id="inner"></div>
</div>
</body>
</html>
/04-02 两列布局的第一种解决方案优化版.html
<!DOCTYPE html>
<html lang="en">
<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>两列布局的第一种解决方案优化版</title>
<style>
#left,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
/* 当前元素脱离文档流 */
float: left;
/* 设置显示层级更高 */
position: relative;
}
/* 自适应 */
#right-fix {
/* 设置为浮动，导致默认宽度值为 0 */
float: right;
width: 100%;
margin-left: -400px;
background-color: hotpink;
}
#right {
background-color: #cccccc;
}
#inner {
background-color: green;
height: 300px;
clear: both;
}
</style>
</head>
<body>
<div id="left"></div>
<!-- 为自适应元素定位父级元素 -->
<div id="right-fix">
<div id="right">
<div id="inner"></div>
</div>
</div>
</body>
</html>
/04-03 两列布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>两列布局的第二种解决方案</title>
<style>
#left,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
float: left;
}
#right {
background-color: #cccccc;
/* 开启BFC模式 - 当前元素的内部环境与外界完全隔离 */
overflow: hidden;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
/04-04 两列布局的第三种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>两列布局的第三种解决方案</title>
<style>
#parent {
/* 表格的单元格的宽度会自动分配 */
display: table;
table-layout: fixed;
width: 100%;
}
#left,
#right {
height: 300px;
display: table-cell;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
}
#right {
background-color: #cccccc;
}
</style>
</head>
<body>
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
/05-01 三列布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>三列布局的第一种解决方案</title>
<style>
#left,
#center,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
float: left;
}
#center {
width: 400px;
background-color: green;
float: left;
}
#right {
background-color: #cccccc;
margin-left: 800px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
/06-01 三列布局补充一.html
<!DOCTYPE html>
<html lang="en">
<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>三列布局补充一</title>
<style>
#left,
#center,
#right {
height: 300px;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
float: left;
}
#center {
background-color: green;
margin-left: 300px;
margin-right: 300px;
}
#right {
background-color: #cccccc;
float: right;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</body>
</html>
/06-02 圣杯布局.html
<!DOCTYPE html>
<html lang="en">
<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>圣杯布局</title>
<style>
#parent {
height: 300px;
/* 对应的是left元素的宽度 */
margin-left: 300px;
/* 对应的是right元素的宽度 */
margin-right: 300px;
}
#left,
#center,
#right {
height: 300px;
float: left;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
/* 将当前元素从当前行，移动上一行同一个位置 */
margin-left: -100%;
position: relative;
/* 将当前元素移动到理想位置 */
left: -300px;
}
#center {
/* 为父级元素宽度的100% */
width: 100%;
background-color: green;
}
#right {
background-color: #cccccc;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div id="parent">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
/07-01 双飞翼布局.html
<!DOCTYPE html>
<html lang="en">
<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>双飞翼布局</title>
<style>
#parent {
height: 300px;
}
#left,
#center,
#right {
height: 300px;
float: left;
}
#left,
#right {
width: 300px;
}
#left {
background-color: #c9394a;
/* 将当前元素从当前行，移动上一行同一个位置 */
margin-left: -100%;
}
#center {
/* 为父级元素宽度的100% */
width: 100%;
background-color: green;
}
#right {
background-color: #cccccc;
margin-left: -300px;
}
#inner {
height: 300px;
background-color: hotpink;
/* 对应的是left元素的宽度 */
margin-left: 300px;
/* 对应的是right元素的宽度 */
margin-right: 300px;
}
</style>
</head>
<body>
<div id="parent">
<div id="center">
<div id="inner"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
/08-01 等分布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>等分布局的第一种解决方法</title>
<style>
.col1,
.col2,
.col3,
.col4 {
height: 300px;
width: 25%;
float: left;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
</body>
</html>
/08-02 等分布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>等分布局的第二种解决方法</title>
<style>
#parent {
width: 100%;
/* <table> */
display: table;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
/* <td> */
display: table-cell;
}
.col1 {
background-color: hotpink;
}
.col2 {
background-color: lightblue;
}
.col3 {
background-color: green;
}
.col4 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
</body>
</html>
/08-03 等分布局的第一种解决方案修改版.html
<!DOCTYPE html>
<html lang="en">
<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>等分布局的第一种解决方法</title>
<style>
.parent-fix {
overflow: hidden;
}
#parent {
height: 300px;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
width: 25%;
float: left;
box-sizing: border-box;
padding-left: 10px;
}
.inner {
height: 300px;
}
.col1 .inner {
background-color: hotpink;
}
.col2 .inner {
background-color: lightblue;
}
.col3 .inner {
background-color: green;
}
.col4 .inner {
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent-fix">
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
/08-04 等分布局的第二种解决方案修改版.html
<!DOCTYPE html>
<html lang="en">
<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>等分布局的第二种解决方法</title>
<style>
#parent-fix {
overflow: hidden;
}
#parent {
width: 1434px;
/* <table> */
display: table;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
display: table-cell;
box-sizing: border-box;
padding-left: 10px;
}
.inner {
height: 300px;
}
.col1 .inner {
background-color: hotpink;
}
.col2 .inner {
background-color: lightblue;
}
.col3 .inner {
background-color: green;
}
.col4 .inner {
background-color: yellow;
}
</style>
</head>
<body>
<div id="parent-fix">
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
/09-01 等高布局的第一种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>等高布局的第一种解决方案</title>
<style>
#parent {
display: table;
}
#left,
#right {
width: 300px;
/* 表格的单元格默认是等高的 */
display: table-cell;
}
#left {
background-color: #c9394a;
}
#right {
background-color: #cccccc;
}
</style>
</head>
<body>
<div id="parent">
<div id="left">imooc</div>
<div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque
repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores
distinctio obcaecati a?</div>
</div>
</body>
</html>
/09-02 等高布局的第二种解决方案.html
<!DOCTYPE html>
<html lang="en">
<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>等高布局的第二种解决方案</title>
<style>
#parent {
overflow: hidden;
}
#left,
#right {
width: 300px;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
#left {
background-color: #c9394a;
}
#right {
background-color: #cccccc;
}
</style>
</head>
<body>
<div id="parent">
<div id="left">imooc</div>
<div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque
repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores
distinctio obcaecati a?</div>
</div>
</body>
</html>
/10-01 CSS3的多列布局.html
<!DOCTYPE html>
<html lang="en">
<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>CSS3的多列布局</title>
<style>
#parent,
#parent2,
#parent3 {
/* column-count: 4;
column-width: 300px; */
columns: 4 300px;
column-gap: 20px;
/* column-rule-width: 5px;
column-rule-color: tomato;
column-rule-style: double; */
column-rule: 5px tomato double;
}
.col1,
.col2,
.col3,
.col4,
.col5 {
height: 300px;
}
.col1,
.col6 {
background-color: hotpink;
}
.col2,
.col7 {
background-color: lightblue;
}
.col3.col8 {
background-color: green;
}
.col4,
.col9 {
background-color: yellow;
}
.col5 {
background-color: tomato;
column-span: all;
}
.col6,
.col7,
.col8,
.col9 {
column-fill: balance;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
<div id="parent2">
<div class="col5"></div>
</div>
<div id="parent3">
<div class="col6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum possimus aliquid nostrum provident
est esse necessitatibus mollitia error, tempore voluptate nobis odio alias, ab animi reprehenderit repellat
perferendis voluptas rerum!</div>
<div class="col7">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, quibusdam vel! Provident consequatur
voluptates quibusdam consectetur architecto! Ut eaque aspernatur quibusdam incidunt nobis ipsam quidem, quod
ullam, velit officia necessitatibus!
</div>
<div class="col8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dicta officia porro error
suscipit. Nostrum, deleniti laborum. Sed odit, nemo, ducimus dolores rem reprehenderit soluta ipsam nesciunt id
unde accusamus.</div>
<div class="col9">imooc</div>
</div>
</body>
</html>
/11-01 全屏布局.html
<!DOCTYPE html>
<html lang="en">
<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>全屏布局</title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
header {
height: 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: lightgray;
}
.content {
position: fixed;
left: 0;
right: 0;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: lightblue;
}
.content .left {
width: 300px;
height: 100%;
position: fixed;
left: 0;
top: 100px;
bottom: 100px;
background-color: lightcoral;
}
.content .right {
height: 1000px;
margin-left: 300px;
background-color: greenyellow;
}
footer {
height: 100px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: lightslategray;
}
</style>
</head>
<body>
<header></header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
这篇关于【九月打卡】第21天 一课全面掌握主流CSS布局 课程全集的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
uniapp动态设置不同的css有哪些方法？-icode9专业技术文章分享12-07
-
UniApp 中，怎么通过 CSS 设置 view 组件的水平居中效果？-icode9专业技术文章分享12-07
-
TailwindCSS开发入门教程12-06
-
TailwindCSS项目实战：从入门到上手12-06
-
TailwindCss项目实战：初学者指南12-06
-
TailwindCSS入门指南：轻松上手实用教程12-05
-
TailwindCss入门指南：轻松上手实用技巧12-05
-
Tailwind.css入门：简洁高效的设计利器12-04
-
Tailwind.css学习：从入门到实战的全面指南12-03
-
Tailwind.css入门指南：快速上手实用教程11-29
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
栏目导航
