2024.4.4-day09-CSS 布局模型（标准流模型、浮动模型）-编程知识

2024.4.4-day09-CSS 布局模型（标准流模型、浮动模型）

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

- 作业
2024.4.4-学习笔记
- 1 CSS 布局模型
- - 1.1 标准流
  - 1.2 CSS 浮动
  - 1.3 去除塌陷
- 2 浮动制作两栏布局
- 3 浮动制作三栏布局

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="首页" content="首页"><meta description="首页" content="首页"><title>首页</title><style>* {padding: 0;margin: 0;}.auto-center {width: 1000px;margin-left: auto;margin-right: auto;}.full-center {min-width: 1000px;}.clearfix::after {content: '';display: block;clear: both;}.header {background-color: #000079;}.top {background-color: red;height: 100px;}.banner {background-color: #003E3E;height: 300px;}.container-one>.left {width: 200px;background-color: #613030;height: 500px;float: left;}.container-one>.right {background-color:#336666;margin-left: 200px;height: 300px;}.main {background-color: #467500;margin-top: 10px;}.container-two>li {float:left;width: 250px;height: 150px;box-sizing: border-box;border: 1px dashed #ccc;background-color:#CAFFFF;}ul {list-style: none;}.container-three>.left,.container-three>.right {          width: 200px;height: 300px}.container-three>.left {float: left;background-color: #F9F900;}.container-three>.right {float: right;background-color: #A5A552;}.container-three>.middle {margin-left: 200px;margin-right: 200px;height: 100px;background-color: #5CADAD;}.footer {              margin-top: 20px;background-color: #642100;height: 200px;}.container-two {margin-top: 10px;}.container-three {margin-top: 10px;}</style></head><body><div class="full-center header"><div class="auto-center top"></div></div><div class="full-center banner"></div><div class="auto-center main "><div class="container-one clearfix"><div class="left"></div><div class="right"></div></div><ul class="container-two clearfix"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="container-three clearfix"><div class="left"></div><div class="right"></div><div class="middle"></div></div><div class="container-three clearfix"><div class="left"></div><div class="right"></div><div class="middle"></div></div></div><div class="full-center footer"></div></body>
</html>

在这里插入图片描述

2024.4.4-学习笔记

1 CSS 布局模型

1.1 标准流

块级从上到下，行内、行内块从左到右

直接设置行高就可以撑开盒子：

在这里插入图片描述

1.2 CSS 浮动

float: left | right |none

浮动盒子之间没有空隙

任何元素都可以加CSS 浮动，会呈现出inline-block效果

浮动元素不会对它前面的标准流元素产生影响。

浮动只能遮盖标准流盒子，但是不能遮盖标准流内容

在这里插入图片描述

设计浮动元素高度要尽量保持一致，一个浮动了，其他兄弟元素也需要设置浮动，折行是找高度低的去折行

1.3 去除塌陷

方法1

clear:both;

在这里插入图片描述

方法2

.clearfix::after {content: ' ';display: block;clear: both;}

在这里插入图片描述

min-width:最短宽度的设置

在这里插入图片描述

2 浮动制作两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

3 浮动制作三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局

.outer {height: 100px;
}
.left {float: left;width: 200px;background: tomato;
}
.right {margin-left: 200px;width: auto;background: gold;
}

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式 ，中间一栏必须放到最后

.outer {height: 100px;
}.left {float: left;width: 100px;height: 100px;background: tomato;
}.right {float: right;width: 200px;height: 100px;background: gold;
}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;
}