网站域名要钱吗chatgpt中文在线
一.标准流，浮动，flex布局
1.标准流
概念：标准流又叫文档流，指的是标签在页面中默认的排布规则，例如块元素独占一行，行内元素可以一行显示多个等等排布规则
2.浮动
（1）.作用：
让块元素水平排列
（2）.属性名：
float
（3）.属性值：
left（左对齐），right（右对齐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.test_one {width: 300px;height: 300px;background-color: blueviolet;float: left;}.test_two {width: 300px;height: 300px;background-color: blue;/* 建议读者自己试试左右对齐不同的效果 */float: right;}
</style>
</head>
<body><div class="test_one">div标签</div><div class="test_two">div标签</div>
</body>
</html>
（4）.特点：
①：顶部对齐
②：具备行内块显示模式的特点
③：浮动的盒子会脱离标准流的控制，具体还是要通过案例来理解这一特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 第三个特点 *//* 优先显示的是浮动元素 */.test_one {width: 150px;height: 150px;background-color: green;float: left;}/* 在这个类选择器中没有设置浮动，也就是说使用这个类的标签仍在标准流的控制中 */.test_two {width: 300px;height: 300px;background-color: blue;}
</style>
</head>
<body><div class="test_one">div标签</div><div class="test_two">div标签</div>
</body>
</html>
（5）.常用的布局模式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 去除默认样式 */* {margin: 0;padding: 0;}li {list-style: none;}/* 设置盒子 */.product {margin: 100px auto;width: 1226px;height: 628px;background-color: blueviolet;}/* 父级盒子中又分出两个子级盒子 */.left {width: 234px;height: 628px;background-color: green;float: left;}.right {width: 978px;height: 628px;background-color: blue;float: right;}.right li {width: 234px;height: 300px;background-color: black;margin-right: 14px;margin-bottom: 14px;float: left;}/* 如果不设置这一复合选择器，第四个和第八个小盒子会因为右margin被挤出盒子，这也是浮动有时会出现的问题 */.right li:nth-child(4n) {margin-right: 0;}
</style>
</head>
<body><div class="product"><div class="left"></div><div class="right"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div></div>
</body>
</html>
（6）.浮动可能脱离标准流，这时我们就需要清除浮动
具体场景：浮动元素脱标，如果父级没有高度，子级就无法撑开父级高度（导致页面布局错乱）
因此我们需要清除浮动，以消除浮动带来的影响
这是设置了高度，所以没有出现浮动脱标现象的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 此时都设置了高度，就不会出现浮动元素脱标的现象 */.top {margin: 10px auto;width: 1200px;height: 300px;background-color: red;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}
</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>
以下是没有设置高度导致元素脱标的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; 消去了设置的高度 */background-color: red;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}
</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>
元素脱标后的解决方法：
①：额外标签法：
在父级元素内容的最后添加一个块级元素，设置CSS属性clear:both
缺点：会增加额外的标签，页面结构变得更复杂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; 消去了设置的高度 */background-color: red;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}/* 一般使用额外标签法时都使用clearfix这个类名 */.clearfix {clear: both;}
</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div><!-- 新添的块级标签 --><div class="clear"></div></div><div class="bottom"></div>
</body>
</html>
②：单伪元素法：
在父级元素中添加一个伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; 消去了设置的高度 */background-color: red;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}/* 单伪元素法 */.clearfix::after {/* 必须存在content属性，否则伪元素不生效 */content: "";display: block;clear: both;}
</style>
</head>
<body><!-- 将伪元素添加到顶部元素中 --><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>
③：双伪元素法（最推荐使用的方式）
在父级元素中添加两个伪元素
推荐的原因是：既解决了塌陷问题，又解决了元素脱标的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; 消去了设置的高度 */background-color: red;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}/* 双伪元素法 *//* before伪元素是为了解决外边距塌陷问题而存在的 */.clearfix::before,.clearfix::after {/* 必须存在content属性，否则伪元素不生效 */content: "";display: table;}/* after伪元素才是为了解决元素脱标问题的 */.clearfix::after {clear: both;}
</style>
</head>
<body><!-- 将伪元素添加到顶部元素中 --><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>
④：使用overflow
在父元素中添加CSS属性overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; 消去了设置的高度 */background-color: red;/* overflow法 */overflow: hidden;}.bottom {height: 100px;background-color: green;}.left {width: 200px;height: 300px;background-color: orange;float: left;}.right {width: 950px;height: 300px;background-color: blue;float: right;}
</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>
（7）.浮动总结：
①：浮动属性名为float，我们常用的属性值为left（左浮动），right（右浮动）
②：浮动后的盒子根据顶部对齐
③：浮动后的盒子具备行内块的特点
④：父级宽度如果不够，那么浮动的子级会换行
⑤：浮动后的盒子会脱离标准流的控制
⑥：清除浮动有四种方法，分别为：双伪元素法（最推荐），单伪元素法，额外标签法和overflow法
⑦：浮动最初的作用是实现图文混排的效果
3.flex布局
概念：
lex布局也叫弹性布局，是浏览器中提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
优点：
flex模型不会产生浮动布局中脱离标准流的现象，布局网页更简单，更灵活
设置方式：
给父元素设置display:flex属性，之后子元素会自动挤压或者拉伸
在父级盒子中装入三个子级盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 在父级盒子中装入三个子级盒子 */.father {height: 300px;border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
使用浮动使得这三个盒子排列在同一行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 使用浮动使得这三个盒子排列在同一行 */.father {height: 300px;border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;float: left;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
使用flex实现相同的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {/* 将展示方式改为flex */display: flex;/* 自动分隔开每个盒子之间的距离，将其排列整齐 */justify-content: space-between;height: 300px;border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
flex相对于浮动的一个很明显的优点，不会脱离标准流的控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {/* 将展示方式改为flex */display: flex;/* 自动分隔开每个盒子之间的距离，将其排列整齐 */justify-content: space-between;/* 如果是使用浮动，那么一旦取消父级盒子的高度就会出现脱标的现象，但是flex却不同，请读者自己试试取消父级盒子高度的效果 *//* height: 300px; */border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
（1）.flex的各个属性：
①：display:flex：
创建flex容器
②：justify-content：
主轴对齐方式
属性值：flex-start（默认值，弹性盒子从起点开始依次排列），flex-end（弹性盒子从终点开始排列），center（弹性盒子沿主轴居中排列），space-between（弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间），space-around（弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧），space-evenly（弹性盒子沿主轴均匀排列，弹性盒子与容器之间的间距相等）
③：align-items：
侧轴对齐方式
④：align-self：
单独控制某个弹性盒子的侧轴对齐方式（设置在弹性盒子中）
属性值：
stretch（弹性盒子沿着侧轴线被拉伸至铺满容器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {display: flex;/* 想要使用stretch属性就必须要侧轴方向没有属性，所以得取消子级盒子的高度 */align-items: stretch;height: 300px;border: 1px solid #000;}.father div {width: 100px;/* 如果不取消子级盒子的高度那么stretch属性就不会生效 *//* height: 100px; */background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div><!-- <div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> --></div>
</body>
</html>
center（弹性盒子沿侧轴居中排列），flex-start（弹性盒子从起点开始依次排列），flex-end（弹性盒子从终点开始依次排列）
单独控制某子级盒子的侧轴对齐方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 单独控制某子级盒子的侧轴对齐方式 */.father {display: flex;align-items: flex-end;height: 300px;border: 1px solid #000;}/* 单独控制第二个子级盒子的侧轴对齐方式为center */.father div:nth-child(2) {align-self: center;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div><!-- <div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> --></div>
</body>
</html>
⑤：flex-direction：修改主轴方向
属性值：row（水平方向，从左向右，默认为row），column（垂直方向，从上到下），row-reverse（水平方向，从右向左），column-reverse（垂直方向，从下向上）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {display: flex;/* 修改主轴方向为垂直方向，此时侧轴方向变为水平方向 */flex-direction: column;/* 排列方式设置为依照主轴中心排列 */justify-content: center;/* 依照侧轴中心排列 */align-items: center;/* 最终的效果为子级元素被置于父级盒子最中央 */height: 300px;border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
⑥：flex：
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸（按照比例分配父级盒子剩余空间）
属性值：整数数字，表示占用父级剩余尺寸的份数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}.father div {height: 100px;background-color: blueviolet;}.father div:nth-child(1) {width: 300px;}.father div:nth-child(2) {flex: 1;}.father div:nth-child(3) {flex: 9;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>
⑦：flex-wrap：
弹性盒子换行
作用：因为弹性盒子可以自动挤压或拉伸，所以在默认情况下所有的弹性盒子都在一行显示，因此我们需要使用本属性控制弹性盒子中的子级元素换行
属性值：wrap（换行），nowrap（不换行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.father {display: flex;flex-wrap: wrap;justify-content: center;height: 300px;border: 1px solid #000;}.father div {width: 100px;height: 100px;background-color: blueviolet;}
</style>
</head>
<body><div class="father"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
</html>
⑧：align-content：
行对齐方式（对单行弹性盒子不会生效）
属性值：和主轴对齐方式的属性值的属性名以及效果都是相同的，flex-start，flex-end，center，space-between，space-around，space-evenly
（2）.flex的组成结构：
①：弹性容器
②：弹性盒子
弹性容器和弹性盒子的压缩与拉伸现象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 弹性容器 */.father {display: flex;justify-content: space-between;height: 300px;border: 1px solid #000;}/* 弹性盒子，沿着主轴的方向排列 */.father div {width: 100px;/* 如果不设置子级的高度，那么flex就会将子级盒子的高度拉长到与父级的高度相等的长度上这就是flex的拉伸效果 *//* height: 100px; */background-color: blueviolet;}
</style>
</head>
<body><div class="father"><!-- 如果子级盒子过多，为了在同一行中放下所有的盒子，flex就会压缩子级盒子的宽度，这就是flex的压缩效果 --><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
</html>