21.5 CSS 网页布局方式

image-20230907210458236

  1. 网页布局方式

网页布局方式: 是指浏览器对网页中的元素进行排版的方法.常见的网页布局方式包括:
* 1. 标准流(文档流/普通流)布局: 这是浏览器默认的排版方式.元素按照其在文档中的位置依次排列, 可以使用CSS的盒模型属性进行水平和垂直布局.* 2. 浮动布局: 通过设置元素的float属性, 使元素脱离标准流, 并根据浮动方向排列.常用于实现多列布局或图文混排等效果.* 3. 弹性布局(Flexbox): 通过CSS的flex属性, 实现灵活的盒模型布局.可以方便地调整元素的尺寸, 顺序和对齐方式, 适用于构建响应式布局.* 4. 网格布局(Grid): 通过CSS的grid属性, 将网页划分为行和列的网格, 实现复杂的布局.可以精确地控制元素在网格中的位置和尺寸.* 5. 定位布局: 通过CSS的position属性, 将元素相对于其父元素或文档进行定位.可以实现绝对定位, 相对定位和固定定位等效果.以上是常用的网页布局方式, 开发者可以根据具体需求选择合适的布局方式来实现网页的排版效果.

2. 标准流排版

标准流排版方式 --> 水平排版/垂直排版两种.
在CSS中将元素分为三类, 块级元素/行内元素/行内块级元素.
元素是行内或行内块级元素就会水平排版.
元素是块级元素那么就会垂直排版.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>standard streams</title><style>div, h1, p {border: 1px solid black;}span, strong, b {border: 1px solid black;}</style>
</head>
<body><div>d1</div><h1>h1</h1><p>p1</p><br><span>span</span><strong>strong</strong><b>b</b>
</body>
</html>

image-20230903012850380

标准流排版换行现象: 两个行内块级标签, 在同一个行显示, 使用maring属性隔开.
在对网页拉伸收缩的时候, 如果第一行的页面没有可现实的位置会自动换行到第二行去显示.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>standard streams2</title><style>div {width: 100px;height: 100px;display: inline-block;}.box1 {background-color: red}.box2 {background-color: blue;margin-left: 1200px;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

GIF 2023-9-3 1-32-43

3. 浮动流排版

浮动流排版方式: 浮动流是一种半"脱离标准流"的排版方式, 只能水平排版, 设置某个属性的左对齐获取右对齐.
在浮动流中不区分块级元素/行内元素/行内块级元素, 并且都可以输入值宽高, 水平排版.
浮动流没有居中对齐, 不能使用margin: auto;

3.1 浮动元素

float属性: 是CSS中用于设置元素浮动的属性.
通过设置float属性, 可以让元素脱离文档流并按照指定的方向浮动.常用属性值:
- left: 元素向左浮动, 其他内容会围绕它右侧排列.
- right: 元素向右浮动, 其他内容会围绕它左侧排列.
- none: 元素不浮动, 恢复到默认文档流中的排列方式.注意事项:
- 浮动元素的宽度默认会收缩为其内容的宽度. 可以通过设置width属性来控制宽度.
- 浮动元素会脱离文档流, 可能会导致父元素的高度塌陷, 需要通过清除浮动或使用父元素的clearfix技巧来解决.
- 浮动元素之间也可能相互影响, 可以通过设置clear属性来清除浮动影响.浮动属性通常用于实现网页中的多列布局, 图文混排等需求.
然而, 由于浮动属性的一些复杂特性和对文档流的影响, 现代网页布局倾向于使用弹性布局(Flexbox)和网格布局(Grid)来替代浮动布局.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float</title><style>div {width: 100px;height: 100px;display: inline-block;}.box1 {background-color: red;float: left;}.box2 {background-color: black;float: right;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

GIF 2023-9-3 18-00-25

3.2 浮动元素的脱标现象

当元素浮动后, 它会脱离标准流.
这意味着其他非浮动元素会忽略浮动元素的存在, 而像它不存在一样布局.
浮动元素的脱标会对其他元素的位置和布局产生影响.如果一个浮动元素之前的元素是左对齐浮动, 而后面的元素没有浮动, 那么浮动元素会覆盖非浮动元素的部分.
如果被覆盖的区域包含文字, 文字会自动调整位置以显示出来, 这是所谓的'文字环绕'现象.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素脱标</title><style>.box1 {height: 100px;width: 100px;background-color: red;float: left;}.box2 {height: 150px;width: 150px;background-color: #62ff00;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div>
</body>
</html>

2023-09-03_00002

3.3 浮动元素排序规则

浮动元素排序规则:
* 1. 当相同方向上的浮动元素出现时, 先浮动的元素会在前面, 后浮动的元素会显示在它之后. 这意味着先浮动的元素会覆盖后浮动的元素.* 2. 如果浮动元素在不同方向上浮动, 比如一个元素向左浮动, 另一个元素向右浮动, 它们会沿着各自的方向浮动.左浮动的元素会尽可能地靠左浮动, 右浮动的元素会尽可能地靠右浮动.* 3. 浮动元素浮动后的位置是由它在标准流中的位置确定的.浮动元素会脱离标准流, 不再占据父元素的空间, 并根据浮动方向找到可容纳它的最近的父元素或祖先元素, 然后尽量靠近该容器的左侧或右侧.如果有多个浮动元素在同一行上浮动, 则它们会根据出现的顺序进行布局. 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float4</title><style>/* box1 box2 box13 按顺序依次向左浮动. */.box1 {width: 100px;height: 100px;background-color: red;float: left;}.box2 {width: 150px;height: 150px;background-color: blue;float: left;}.box3 {width: 200px;height: 200px;background-color: orange;float: left;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

image-20230903181742410

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float4</title><style>div {height: 100px;width: 100px;background: aqua;border: 1px solid;}.box1, .box2 {float: left}.box3, .box4 {float: right;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>

image-20230903182350489

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float5</title><style>div {border: 1px solid black;}.box1, .box3 {width: 100px;height: 100px;background-color: red;float: left;}.box2, .box4 {width: 150px;height: 150px;background-color: aqua;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>

image-20230903184827499

3.4 浮动元素帖靠现象

当父元素的宽度能够容纳所有浮动元素时. 它们会并排显示.
当父元素宽度不足以容纳所有浮动元素时, 浮动元素会从最后一个浮动元素开始往前贴边, 直到贴到父元素为止.
如果宽度还是不够, 浮动元素就会被强制换行, 不再往前排列.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float6</title><style>.father {width: 500px;height: 500px;border: 1px solid}.box1 {height: 300px;width: 100px;background-color: red;float: left;}.box2 {height: 100px;width: 100px;background-color: #00ff22;float: left;}.box3 {height: 100px;width: 300px;background-color: #fff200;float: left;}</style>
</head>
<body>
<div class="father"><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</div>
</body>
</html>

GIF 2023-9-4 2-56-04

3.5 浮动元素的字围现象

字围现象: 当浮动元素覆盖没有浮动的元素时, 浮动元素上方的文字会自动调整布局, 围绕浮动元素的边界显示, 以避免被覆盖.
这种文字围绕效果在网页设计中非常常见, 可以实现各种有趣的页面布局和视觉效果.
它使得文字可以自然地适应浮动元素的形状和位置, 增强了页面的美观性和可读性.需要注意的是, 文字围绕效果仅适用于浮动元素覆盖的区域.
如果浮动元素覆盖的区域超过文字的宽度, 文字可能被截断或部分隐藏.
在设计中, 需要合理设置浮动元素的大小和位置, 以确保文字能够适当地围绕显示.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float7</title><style>div {width: 100px;height: 100px;background-image: url("https://s2.loli.net/2022/02/16/dMpgZnxFSe93kL1.png");border: 1px solid black;float: left;}p {width: 500px;height: 300px;background-color: orange;border: 1px solid black;}</style>
</head>
<body>
<div></div>
<p> 阴阳 (中国古代哲学思想)阴阳是一个简朴而博大的中国古代哲学.阴阳哲理自身具有三个特点: 统一, 对立和互化.在思维上它是算筹(算数)和占卜(逻辑)不可分割的玄节点.自然界中生物的基因, 人工智能中的二进制都充分彰显了阴阳的生命力.阴阳是中国古代文明中对蕴藏在自然规律背后的, 推动自然规律发展变化的根本因素的描述,是各种事物孕育, 发展, 成熟, 衰退直至消亡的原动力, 是奠定中华文明逻辑思维基础的核心要素.概括而言, 按照易学思维理解, 其所描述的是宇宙间的最基本要素及其作用, 是伏羲易的基础概念之一.阴阳相冲化万物, 世间万物, 皆有阴阳之道. 即可从万物万事之间领悟到一丝阴阳之理.古人与后人都对其领悟, 拥有不同的见解, 因其万物存于阴阳之道, 所以古今在各个学术中都有其影.阴阳一词, 代表了很多的意思和道理, 简单笼统分为: 阴阳对立, 阴阳相冲, 阴阳转换. </p>
</body>
</html>

image-20230904030251251

3.6 浮动排版练习

从上至下, 垂直方向使用标准流, 水平方向使用浮动流.

2023-09-04_00007

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>float8</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}.header {width: 980px;height: 100px;margin: 0 auto;}.header .logo {width: 250px;height: 100px;background-color: pink;float: left;}.header .language {width: 150px;height: 50px;background-color: skyblue;float: right;}.header .nav {width: 650px;height: 50px;background-color: purple;float: right;}.content {width: 980px;height: 400px;margin: 10px auto;}.content .aside {width: 320px;height: 400px;background-color: yellow;float: left;}.content .article {width: 650px;height: 400px;float: right;}.content .article .articleTop {width: 650px;height: 350px;}.content .article .articleBottom {width: 650px;height: 40px;background-color: #c08413;margin-top: 10px;}.content .article .articleTopLeft {width: 400px;height: 350px;float: left;}.content .article .articleTopLeft .news1 {width: 400px;height: 200px;background-color: #f920a6;}.content .article .articleTopLeft .news2 {width: 400px;height: 140px;background-color: #00c0eb;margin-top: 10px;}.content .article .articleTopRight {width: 240px;height: 350px;background-color: #aaca32;float: right;}.footer {width: 980px;height: 40px;background-color: tomato;margin: 10px auto;}</style>
</head>
<body><!--头部-->
<div class="header"><!--logo的位置--><div class="logo"></div><!--语言选择--><div class="language"></div><!--    导航条--><div class="nav"></div>
</div><!--内容-->
<div class="content"><!--旁白, 内容左侧这一块--><div class="aside"></div><!--文章, 右边内容右侧这一大块--><div class="article"><!--文章, 右边内容的上面这块--><div class="articleTop"><!--文章, 右边内容的上面这块的左边--><div class="articleTopLeft"><div class="news1"></div><div class="news2"></div></div><!--文章, 右边内容的上面这块的右边--><div class="articleTopRight"></div></div><!--文章, 右边内容的下面这块--><div class="articleBottom"></div></div></div><!--尾部-->
<div class="footer"></div></body>
</html>

3.7 塌陷

在标准流中, 如果元素的内容超出了父元素的高度, 父元素会自动增加高度以适应子元素的内容.
而在浮动流中, 浮动的元素不会撑起父元素的高度, 导致父元素的高度塌陷, 这种现象称为"塌陷"或"高度塌陷".
高度塌陷会导致页面布局出错.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>prop up</title><style>* {padding: 0;margin: 0;}.box1 {background-color: red;}.box2 {background-color: aqua;}.box1 p {background-color: burlywood;width: 100px;}.box2 p {background-color: skyblue;width: 100px;}p {border: 1px inset black;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

div标签占一行, 高度由p标签撑.

image-20230906151607309

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>collapse</title><style>* {padding: 0;margin: 0;}.box1 {background-color: red;}.box2 {background-color: aqua;}.box1 p {background-color: burlywood;width: 100px;}.box2 p {background-color: skyblue;width: 100px;}p {border: 1px inset black;float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

p标签浮动之后脱离了标准流之后, 高度没有支持了, 就看不见了. 所有的p标签浮动到第一行中.
我们需要的布局是一个div的内容占用一行, 而不是全部挤在一行.

2023-09-06_00007

当子元素全部浮动后, 它的父元素将不再承载该浮动元素的高度, 所以父元素的高度会变为0.
当一个元素的高度为0时, 它的可见内容也将被隐藏.

3.8 margin折叠

CSS模型中规定: 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之.
毗邻的定义为: 同级或者嵌套的盒元素, 并且它们之间没有非空内容, Padding或Border分隔。
嵌套也属于毗邻, 所以在样式表中优先级更高, 子元素的margin会覆盖外层父元素定义的margin.如果父元素的第一个子元素设置了上边距(margin-top)但没有遇到有效的边框(border)或内边距(padding), 
那么上边距会不断向上传递, 影响到父元素的上边缘, 甚至影响到更高层的祖先元素.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>margin top</title><style>* {margin: 0;}.box1 {/* 当两个相邻的元素都设置了margin-top和/或margin-bottom时, 如果两个边距中的一个为正, 另一个为负, 则会进行抵消, 得到一个非零的边距. *//*margin-top: -20px;*/background-color: red;}.box2 {margin-top: 20px;background-color: aqua;}.box1 p {background-color: burlywood;}.box2 p {background-color: skyblue;}p {width: 100px;float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

第一个div没有高度, 没有边距与边框, box2向上级需找, 找打body, 与其发送margin折叠, 导致body向下塌20px.

image-20230906151806458

为了防止这种情况发生, 可以给父元素设置一个有效的边框或内边距, 以限制第一个子元素的上边距扩散.
通过给父元素添加边框或内边距, 可以有效地控制子元素的边距, 并防止其传递给更高层的祖先元素.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>margin top 2</title><style>* {padding: 0;margin: 0;}body {border-top-style: solid;/*padding-top: 1px;*/}.box1 {background-color: red;}.box2 {margin-top: 21px;background-color: aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color: skyblue;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

第二个div设置margin-top, 没有与body的margin发生折叠.

image-20230906152459537

3.9 清除塌陷

3.9.1 清除塌陷1

给父元素设置一个高度.
在开发中, 能不写高度就不写高度, 这个方式使用很少.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse</title><style>* {padding: 0;margin: 0;}.box1 {height: 21px; /* 设置div标签的行高 撑起div标签 */background-color: red;}.box2 {background-color: aqua;}.box1 p {background-color: burlywood;width: 100px;}.box2 p {background-color: skyblue;width: 100px;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

第一个div被撑起, 第二个div贴着第一个div标签的底部.
第二个div内的p标签浮动后贴近第二个div标签的顶部.

image-20230906154529917

3.9.2 清除塌陷2

clear属性: 用于指定一个元素是否允许其他元素浮动在它的左侧, 右侧或两侧.
它可以应用于非浮动元素, 用于清除前面元素的浮动影响.常用属性值:
- none: 默认值, 允许其他元素浮动在其旁边.
- left: 不允许左侧有浮动元素.
- right: 不允许右侧有浮动元素.
- both: 不允许左右两侧有浮动元素.注意事项: clear属性只对前面的浮动元素有效, 而不会影响后面的浮动元素.
通常在包含浮动元素的父元素中使用clear属性来解决浮动问题.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse 2</title><style>* {padding: 0;margin: 0;}.box1 {background-color: red;}.box2 {clear: both; /* 第二个div标签不允许左右两侧有浮动元素. */background-color: aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color: skyblue;}p {float: left;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

第一个div盒子内的p标签全部浮动后, 第一个盒子塌陷.
这时, 设置第二个盒子左右两侧不能有浮动元素, 它就出现在第一行p标签的下方.
第二的div标签内的p标签继续浮动, 则贴在第二个div标签下面.

image-20230906155216258

3.9.3 清除塌陷3

隔墙法: 是一种在前端开发中用于实现样式布局的技巧, 它主要通过在盒子之间添加额外的块级元素, 然后设置clear属性来产生隔离效果.
在隔墙法中, 有两种常见的方法: 外墙法和内墙法.外墙法: 是在两个盒子之间添加一个额外的块级元素, 并设置其clear属性为both, 这样可以阻止后面的盒子浮动到前面的盒子的旁边.在外墙法中, 第三个盒子通常会通过设置第二个盒子的高度来实现竖直的间隔效果, 而第一个盒子无法使用margin-bottom来实现间隔.内墙法: 是在第一个盒子的所有子元素中添加一个额外的块级元素, 并设置其clear属性为both, 这样可以阻止后面的盒子浮动到第一个盒子的旁边.在内墙法中, 可以在第二个盒子中使用margin-top来产生竖直的间隔效果, 并且可以在第一个盒子中使用margin-bottom来实现间隔.区别: 外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度.需要注意的是, 隔墙法直接通过修改HTML代码来实现样式布局, 而在前端开发中通常鼓励将结构和样式分离,
使用CSS来实现样式布局, 这样可以提高代码的维护性和可复用性.
3.9.3.1 外墙法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse 3</title><style>* {padding:0;margin:0;}.box1 {background-color: red;}.box2 {background-color:aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color:skyblue;}p {float:left;}.wall {clear:both;}.h20 {height: 20px;}</style>
</head>
<body><div class="box1"><p>p1</p><p>p2</p><p>p3</p></div><div class="wall h20"></div><div class="box2"><p>p4</p><p>p5</p><p>p6</p></div>
</body>
</html>

image-20230906160124711

3.9.3.2 内墙法
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse 4</title><style>* {padding: 0;margin: 0;}.box1 {background-color: red;}.box2 {background-color: aqua;}.box1 p {width: 100px;background-color: burlywood;}.box2 p {width: 100px;background-color: skyblue;}p {float: left;}.wall {clear: both;}.h20 {height: 20px;background-color: #9dff00;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p><div class="wall h20"></div>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>

image-20230906161635912

3.9.4 清除塌陷4

使用伪元素 ::after 创建一个看不见的块级元素, 并通过设置高度为0, 可见性为隐藏以及清除浮动来隐藏子元素.在'.box1'元素的内部后面生成一个看不见的块级元素, 它的高度是0, 不占用任何空间, 
并且对该元素设置了'visibility: hidden', 从而使其在页面上不可见.
同时, 通过设置'clear:both'可以清除盒子周围的浮动影响.这种方法常用于解决使用浮动元素时父元素无法包裹子元素的问题, 或者清除浮动影响的场景. 
需要注意的是, 设置'content:""'表示伪元素的内容为空, 但不能省略content属性, 否则伪元素可能不起作用.在IE6中会存在兼容性问题, 伪元素可能不起作用.
为了解决这个问题, 可以给第一个盒子添加 "*zoom:1;" 
/*兼容ie6*/
.box1 {
*zoom:1;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse 5</title><style>* {padding: 0;margin: 0;}.box1 {background-color: red;}.box2 {background-color: aqua;}.box1 p {background-color: burlywood;width: 100px;}.box2 p {background-color: skyblue;width: 100px;}p {float: left;}.box1::after {content: ""; /* content 不能省略, 值可以为空 */display: block; /* 设置为块级元素 */height: 0;visibility: hidden; /* 页面上不可见 */clear: both;}</style>
</head>
<body>
<div class="box1"><p>p1</p><p>p2</p><p>p3</p>
</div><div class="box2"><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>


清除塌式通用方式: 建立html页面时, 先提前写好处理浮动带来的影响的css代码.

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

之后只要标签出现了塌陷的问题就给该塌陷的标签加一个class="clearfix"属性即可.

4. overflow属性

overflow属性: 常用于盒子的样式设置.它的作用可以分为以下几点:* 1. 盒子的文本内容过长可以正常显示:当盒子中的文本内容超出了盒子的宽度或高度时, 设置'overflow: hidden;'可以将超出部分隐藏起来, 不显示在页面上.这样可以确保文本内容在盒子内部正常显示, 而不会溢出盒子. 这种用法经常用于实现文本截断效果.* 2. 清除浮动:通过在盒子中应用'overflow: hidden;'可以清除内部浮动元素对外部元素布局的影响.设置'overflow: hidden;'可以触发 BFC(块级格式化上下文), 从而使得盒子可以包裹浮动元素, 防止浮动溢出.此外, 在清除浮动时有时也需要添加额外的hack'*zoom: 1;', 以兼容 IE6.* 3. 防止父元素塌陷(不对body生效):当一个盒子嵌套了子元素并且子元素设置了'margin-top', 此时父元素的高度可能会坍塌, 导致父元素高度不包含子元素的'margin-top'部分, 从而导致布局问题.通过在父元素中设置'overflow: hidden;', 可以触发 BFC, 使得父元素的高度能够正常包含子元素的'margin-top', 解决父元素塌陷的问题.总结起来, 'overflow: hidden;'的作用包括隐藏盒子内容的溢出部分, 清除浮动以及防止父元素塌陷.
需要注意的是, 在使用'overflow: hidden;'时, 可能会影响到盒子的滚动和溢出内容的可见性.

4.1 清除浮动

设置'overflow: hidden;'可以触发 BFC(块级格式化上下文), 从而使得盒子可以包裹浮动元素, 防止浮动溢出.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clear the collapse 6</title><style>* {padding: 0;margin:0;}.box1 {background-color: red;overflow:hidden;}.box2 {background-color:aqua;}.box1 p {background-color:burlywood;width: 100px;}.box2 p {background-color:skyblue;width: 100px;}p {float: left;}</style>
</head>
<body><div class="box1"><p>p1</p><p>p2</p><p>p3</p></div><div class="box2"><p>p4</p><p>p5</p><p>p6</p></div>
</body>
</html>

元素浮动后没有脱离div.

image-20230907001716175

4.2 防止父标签塌陷

通过给.box1添加overflow: hidden;可以防止父元素.box1的塌陷问题.当子元素.box2设置了margin-top: 100px; 时, 由于普通流布局的特性, 子元素的margin-top会向上合并到父元素中,
导致父元素的高度不包含子元素的margin-top部分, 从而出现塌陷的现象.通过给父元素.box1添加overflow: hidden;可以触发BFC(块级格式化上下文)特性, 使父元素形成一个独立的布局上下文, 从而解决塌陷问题.
父元素的高度会正常包含子元素的margin-top部分, 确保布局的准确性.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>overflow</title><style>.box1 {width: 200px;height: 200px;background-color:red;overflow:hidden;  /*父标签塌陷*/}.box2 {width: 100px;height: 100px;background-color: #62ff00;margin-top:100px;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>
</html>

GIF 2023-9-6 18-05-36

4.3 显示溢出

一个块级标签没有设置固定大小，内容会将占多大, 标签也会对应的被撑多大.
如果固定了标签的大小, 内容过多会溢出属性范围.
overflow:hidden; 内容溢出, 超出部分不显示.
overflow:scroll; 上下滚动条形式查看内容.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS练习</title><style>.c1 {border: 1px solid red;}.c2 {height: 100px;width: 100px;border: 1px solid red;}.c3 {height: 50px;width: 50px;border: 1px solid red;overflow: hidden;}.c4 {height: 80px;width: 80px;border: 1px solid red;overflow: scroll;}</style></head><body>
<p class="c1">三更灯火五更鸡, 正是男儿读书时.黑发不知勤学早, 白首方悔读书迟.</p>
<br>
<p class="c2">三更灯火五更鸡, 正是男儿读书时.黑发不知勤学早, 白首方悔读书迟.</p>
<br>
<p class="c3">三更灯火五更鸡, 正是男儿读书时.黑发不知勤学早, 白首方悔读书迟.</p>
<br>
<p class="c4">三更灯火五更鸡, 正是男儿读书时.黑发不知勤学早, 白首方悔读书迟.</p>
</body>
</html>

image-20230907002237468

4.4 圆形头像练习

图片是正方形, 它的父标签是一个圆形的div标签. 
正方形在圆形中显示, 超出部分不显示. 
通过设置: overflow: hidden; 显示.

可爱2022年过年喜庆情侣头像卡通一对两张跨年春节最新版的

image-20230906191708260

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><style>body {margin: 0;background-color: #68eeb8;}.box1 {height: 150px;width: 150px;border-radius: 50%;border: 2px solid red;margin: 10px auto;overflow: hidden; /* 超出父元素部分不显示 */}.box1 img {width: 100%;}.box2 {height: 200px;width: 200px;margin: 0 auto;}input:focus { /* input框获取焦点(光标在输入框内)*/background-color: #ff8c00;}</style>
</head><body>
<div class="box1"><img src="https://s2.loli.net/2022/02/17/GocsZRTq67JiabX.jpg" alt="">
</div><div class="box2"><p><label for="d3">用户: </label><input type="text" id="d3" name="username"></p><p><label for="d4">密码: </label><input type="password" id="d4" name="password"></p><p><input type="submit" value="登录"></p>
</div>
</body>
</html>

5. 定位布局排版

定位布局排版是指通过position属性来控制网页元素在页面中的位置和尺寸.
常用的定位布局包括相对定位, 绝对定位和固定定位.

position属性: 用于表示一个元素相对于其父元素的位置.常用属性值:
* 1. "static"(默认): 元素按照正常的文档流进行布局, 并忽略top, bottom, left, right和z-index属性.
* 2. "relative": 元素相对于其正常位置进行定位, 可以使用top, bottom, left, right属性来指定其偏移量.
* 3. "absolute": 元素相对于其最近的定位祖先(如果没有则相对于文档的根元素_进行定位,可以使用top, bottom, left, right属性来指定其偏移量.
* 4. "fixed": 元素相对于视口进行定位, 即使页面滚动, 元素的位置也保持不变.
* 5. "sticky": 元素在滚动到特定位置时固定在屏幕上, 可以通过设置top, bottom, left, right属性来指定固定位置的偏移量.请注意, 某些position值(如absolute和fixed)会导致元素脱离正常的文档流, 可能会对其他元素的布局产生影响.
因此, 在使用"position"属性时, 请确保您理解其工作原理并正确设置其他相关属性.

5.1 偏移量属性

top, bottom, left, right是CSS中用于控制元素定位的属性.
它们通常与position属性配合使用, 用于指定元素相对于其定位父元素(或视口)的偏移量.- top属性: 指定元素上边缘相对于其定位父元素(或视口)顶部的偏移量.
- bottom属性: 指定元素下边缘相对于其定位父元素(或视口)底部的偏移量.
- left属性: 指定元素左边缘相对于其定位父元素(或视口)左侧的偏移量.
- right属性: 指定元素右边缘相对于其定位父元素(或视口)右侧的偏移量.这些属性的值可以是负值, 百分比, 像素等, 具体取决于您的需求和使用情况.

5.2 静态定位

静态定位: 是position属性的默认值, 用于定义元素在正常文档流中的位置.
具体来说, 静态定位的元素不会受到top, bottom, left, right和z-index属性的影响.当一个元素采用静态定位时, 它会按照HTML文档流的顺序在页面上进行布局.
这意味着它会出现在其在HTML代码中的位置, 并且其他元素会根据该元素的位置进行调整.静态定位的元素可以通过设置margin, padding和width等属性来影响其周围的元素, 但不会影响其他元素的布局.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>position</title><style>body {margin: 0;}.box {position: static;width: 200px;height: 100px;background-color: yellow;/* 指定div向下偏移100px, 失效的设置 */top: 100px;}</style>
</head>
<body><div class="box">此元素采用静态定位.
</div></body>
</html>

image-20230907022607741

5.3 相对定位

相对定位: 相对于标签原来的位置做移动.top: 50px;  从上往下(写负数方向相反).
left: 50px; 从左往右(写负数方向相反).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body {margin: 0;}.c1 {height: 100px;width: 100px;background-color: red;position: relative;/*相对定位标签从static变成relative它的性质从原来没有定位的标签变成已经定位过的标签*/left: 50px; top: 50px;}</style>
</head><body><div class="c1"></div>
</body>
</html>

image-20230907022923499

5.4 绝对定位

基于父标签定位, 一般在不知道页面其他标签位置和参数, 只给一个父标签的参数时使用.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>position 3</title><style>body {margin: 0;}.box1 {height: 50px;width: 100px;background-color: #6ee2a2;}.box2 {height: 50px;width: 100px;background-color: #86cfe5;position: absolute; /*相对于父标签做移动*/top: 50px;left: 100px;}</style></head><body>
<div class="box1">div<div class="box2">div>div</div>
</div>
</body>
</html>

2023-09-07_00007

5.5 固定定位

固定在浏览器的某一个位置, 页面动, 标签始终固定.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>position 4</title><style>body {margin: 0;}.c1 {width: 70px;height: 25px;background-color: #f3d92d;border: 3px solid orange;/* 以浏览器为参照点*/position: fixed;bottom: 500px;right: 10px;}</style>
</head>
<body>
<div style="height: 500px; background-color: red"></div>
<div style="height: 500px; background-color: aqua"></div>
<div style="height: 500px; background-color: greenyellow "></div><div class="c1">充值VIP</div>
</body>
</html>

GIF 2023-9-7 4-00-46

5.6 指定位置固定

当滚动到达指定阈值时, 元素位置固定.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>position 5</title><style>.box1 {background: #eee;width: 400px;height: 1000px;margin: 120px auto;}.box2 {position: sticky;background: green;/* 离上边距还有100px时固定 */top: 100px;}</style>
</head>
<body>
<div class="box1"><div class="box2">123</div>
</div></body>
</html>

GIF 2023-9-7 4-28-06

6. 脱离文档流

在传统的HTML文档中, 元素会按照文档流的方式从左到右, 从上到下进行排布.
这意味着元素会根据其在HTML结构中的位置来决定它们在页面上的布局.然而, 当使用浮动(float), 绝对定位(absolute)或固定定位(fixed)这三种定位方式时, 元素会脱离文档流, 导致对文档布局的影响.

6.1 浮动

浮动: 使用float属性可以使元素浮动到其容器的左侧或右侧.
浮动的元素会脱离文档流, 并且周围的内容会环绕在其周围.
如果移动一个浮动元素, 原来位置被占用, 则会产生文档流的变化.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document flow test</title><style>#d1 {height: 100px;width: 100px;background-color: greenyellow;float: right;}#d2 {background-color: red;height: 100px;width: 100px;}</style>
</head>
<body><div id="d1">div1</div><div id="d2">div2</div></body>
</html>

div1与div2是并排的关系, 在div1由左边浮动到右边后, div1的文档位置空出, div2占用原本属于div1的位置.

GIF 2023-9-7 16-10-11

6.2 相对定位

div1与div2是并排的关系, 在div1由左边浮动到右边后, div1的文档位置空出, div2没有占用原本属于div1的位置.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document flow test 2</title><style>body {margin: 0;}div {height: 200px;width: 400px;}.box1 {background-color: red;position: relative;left: 500px; /*向右移动500px*/}.box2 {background-color: #77ff00;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

image-20230907161443681

6.3 绝对定位

绝对定位: 使用'position: absolute'可以将元素相对于其最近的定位祖先进行定位.
绝对定位的元素会完全脱离文档流, 不再占据原来的空间, 并且不会影响其他元素的布局.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {margin: 0;}.c1 {height: 200px;width: 400px;background-color: #c5c5f1;}.c2 {height: 200px;width: 400px;background-color: red;position: absolute;left: 500px;}.c3 {height: 200px;width: 400px;background-color: salmon;}</style>
</head>
<body><div class="c1">div1</div><div class="c2">div2</div><div class="c3">div3</div>
</body>
</html>

div1与div2, div3是并排的关系, 在div2由左边浮动到右边后.
div2的文档位置空出, div3占用原本属于div2的位置.
绝对路径脱离文档流, 原来的位置被占用.

image-20230907162129189

6.4 固定定位

固定定位: 使用'position: fixed'可以将元素固定在视口的指定位置, 不会随页面滚动而移动.
固定定位的元素也会完全脱离文档流, 不影响其他元素的布局.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body{margin: 0;}#d1{height: 200px;width: 400px;background-color: #c5c5f1;}#d2{height: 200px;width: 400px;background-color: red;position:fixed;bottom: 10px;right: 20px}#d3{height: 200px;width: 400px;background-color: salmon;}</style>
</head>
<body><div id="d1">div1</div><div id="d2">div2</div><div id="d3">div3</div>
</body>
</html>

div1, div2, div3是并列的关系, 在div2由左边浮动到右边后, div2的文档位置空出, div3占用原本属于div2的位置.

image-20230907163009104

7. z-index模态框

模态框: 是一个相对常见的概念, 通常指的是在网页或应用程序中使用的模态框(Modal)作为页面的一部分, 用于显示特定内容或交互.

百度的帐户登入页面时三层模态框结构, 使用z-index: 0-100, 数值越高, 层级越高.
* 1. 最底部正常文本(z-index=0)   离用户最远.
* 2. 黑色透明区(z-index=99)      中间层.
* 3. 白色注册区域(z-index100)    离用户最近.

image-20230907163533223

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>body {margin: 0;}.cover {position: fixed;/* 铺满屏幕 */left: 0;top: 0;right: 0;bottom: 0;/* 设置颜色 */background-color: rgba(0, 0, 0, 0.4);/* 模态框等级 */z-index: 99;}.modal {height: 300px;width: 400px;background-color: white;text-align: center;position: fixed;/* 模态框等级 */z-index: 100;/* 顶点 水平 垂直 居中 */left: 50%;top: 50%;/* 中心居中 */margin-left: -200px;margin-top: -150px;}</style>
</head>
<body>
<div>底层页面内容</div>
<div class="cover"></div>
<div class="modal"><h1>登入页面</h1><p>username: <input type="text"></p><p>password: <input type="text"></p><button>登录</button>
</div>
</body>
</html>

image-20230907164926109

8. opacity透明度

opacity属性: 用于指定HTML元素的不透明度.
取值范围: 从0到1, 0表示完全透明, 1表示完全不透明.opacity和rgba都可以实现元素的透明效果, 但它们有一些区别:
* 1. 影响范围: opacity会同时影响元素以及其所有子元素的透明度, 而rgba只会影响元素的颜色透明度, 不会影响其它属性, 例如字体的透明度.
* 2. 透明度叠加: 对于具有嵌套元素的情况, opacity的透明度是相互叠加的, 子元素的透明度会继承父元素的透明度.而rgba颜色值可以根据需求单独设置不同元素的透明度, 不会相互叠加.综上所述, opacity主要用于控制整个元素及其子元素的透明度, 而rgba可以控制元素的任何属性的透明度, 如背景颜色, 文本颜色等.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>opacity</title><style>/* 设置字体透明度 */.c1 {color: rgba(0, 0, 0, 0.5);}.box1 {opacity: 0.5;color: rgb(0, 0, 0);}</style>
</head>
<body>
<p class="c1">111</p>
<div class="box1"><p>222</p><div><p>333</p></div>
</div></body>
</html>

image-20230907170747303

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/76136.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue echart详细使用说明

vue echart详细使用说明

vue ECharts 使用详细步骤&#xff1a; 安装ECharts&#xff1a; 在Vue项目中使用ECharts之前&#xff0c;你需要先安装ECharts库。可以使用npm或yarn来安装ECharts依赖&#xff1a; npm install echarts --save或者 yarn add echarts导入ECharts库&#xff1a; 在Vue组件中&am…
阅读更多...
qml嵌入到QWidget的两种方式介绍

qml嵌入到QWidget的两种方式介绍

本文介绍qml页面嵌入到QWidget的两种方式，以及这两种方式的区别。 方式1 在 Qt 中，可以使用 QQuickWidget 将 QML 内容嵌入到基于 QWidget 的应用程序中。这是在旧的 QWidget-based 应用程序中逐渐引入 QML UI 的一种常见方式。 以下是如何使用 QQuickWidget 将 QML 内容嵌…
阅读更多...
VSCode搭建Django开发环境

VSCode搭建Django开发环境

文章目录 一、Django二、搭建步骤1. 安装python和VSCode&#xff0c;安装插件2. VSCode打开项目文件夹3. 终端中键入命令&#xff1a;建立虚拟环境4. 选择Python的解释器路径为虚拟环境5. 在虚拟环境中安装Django6.创建Django项目7. 创建app应用8. 运行应用9. 修改配置中文显示…
阅读更多...
后端返回parentId，前端处理成children嵌套数据

后端返回parentId，前端处理成children嵌套数据

rouyi 的 vuetree函数结合elementui el-table组件使用 把有parentId和id结构的数据处理成children嵌套数据&#xff0c;字段名称不一致&#xff0c;可以设置。 vuetree函数&#xff1a; /*** 构造树型结构数据* param {*} data 数据源* param {*} id id字段 默认 id* param…
阅读更多...
Sharding-Jdbc（2）：Sharding-Jdbc入门案例

Sharding-Jdbc（2）：Sharding-Jdbc入门案例

1 前置条件 搭建读写分离的数据库环境，搭建方法如下文，目标数据库test Mysql性能优化（5）：主从同步原理与实现_mysql主从配置优化_不死鸟.亚历山大.狼崽子的博客-CSDN博客 2 新建maven项目 3 pom引入依赖 <?xml version="1.0" encoding="UTF-8"…
阅读更多...
微服务高可用容灾架构设计

微服务高可用容灾架构设计

导语 相对于过去单体或 SOA 架构&#xff0c;建设微服务架构所依赖的组件发生了改变&#xff0c;因此分析与设计高可用容灾架构方案的思路也随之改变&#xff0c;本文对微服务架构落地过程中的几种常见容灾高可用方案展开分析。 作者介绍 刘冠军 腾讯云中间件中心架构组负责…
阅读更多...
YOLO 物体检测 系列教程 总目录

YOLO 物体检测 系列教程 总目录

1、YOLO物体检测系列1&#xff1a;YOLOV1整体解读 YOLO物体检测系列1&#xff1a;YOLOV1整体解读 2、YOLO物体检测系列2&#xff1a;YOLOV2整体解读 YOLO物体检测系列2&#xff1a;YOLOV2整体解读
阅读更多...
[SM6225][Android13]user版本默认允许root和remount

[SM6225][Android13]user版本默认允许root和remount

开发平台基本信息 芯片: 高通SM6225版本: Android 13kernel: msm-5.15 问题描述 刚刚从Framework踏入性能的小殿堂&#xff0c;User版本默认是不会开启root权限的&#xff0c;而且一般调试需要设置一下CPU GPU DDR performance模式或者修改一些schedule util等调核调频节点去…
阅读更多...
一起学数据结构（6）——栈和队列

一起学数据结构（6）——栈和队列

上篇文章中&#xff0c;对栈的概念及特点进行了解释&#xff0c;并且给出了栈实现的具体代码。本篇文章将给出队列的基本概念及特点。并给出相应的代码。 1. 队列的概念及结构&#xff1a; 在给出队列的概念之前&#xff0c;先给出上篇文章中提到的栈的概念&#xff1a;一种只…
阅读更多...
如何将项目推送到GitHub中

如何将项目推送到GitHub中

将项目推送到 GitHub 仓库并管理相关操作&#xff0c;遵循以下步骤&#xff1a; 创建 GitHub 账户&#xff1a;如果您没有 GitHub 账户&#xff0c;首先需要在 GitHub 官网 上创建一个账户。 创建新仓库&#xff1a;在 GitHub 页面上&#xff0c;点击右上角的加号图标&#xf…
阅读更多...
一文读懂java变量类型

一文读懂java变量类型

前言 在学习和使用Java编程语言时&#xff0c;理解变量类型是至关重要的基础知识。Java是一种静态类型语言&#xff0c;强调变量必须先声明其类型&#xff0c;才能进行后续操作。因此&#xff0c;对于初学者来说&#xff0c;了解Java中不同的变量类型及其特性是迈向编程成功的…
阅读更多...
创建vue3项目并引用elementui

创建vue3项目并引用elementui

1.创建vu3项目&#xff1a; vue3官网&#xff1a;简介 | Vue.js 执行命令 npm create vuelatest 2.终端会出现如下选项&#xff0c;不确定的直接enter键进入下一步&#xff1b; 3.然后再执行下方命令&#xff1a; cd <your-project-name> npm install4.安装依赖成功…
阅读更多...
Java的XWPFTemplate工具类导出word.docx的使用

Java的XWPFTemplate工具类导出word.docx的使用

依赖 <!-- word导出 --><dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.7.3</version></dependency><!-- 上面需要的依赖--><dependency><groupId>org.ap…
阅读更多...
phpcmsV9.6.0sql注入漏洞分析

phpcmsV9.6.0sql注入漏洞分析

目录 前言 环境准备 漏洞点 看一看parse_str函数 看一看sys_auth函数 看一看get_one函数 全局搜索sys_auth($a_k, ENCODE) 查看哪里调用了 set_cookie 查看safe_replace函数 判断登录绕过 index的业务 加载modules/wap/index.php 加载modules/attachment/attachme…
阅读更多...
AI性能指标解析：误触率与错误率

AI性能指标解析：误触率与错误率

简介&#xff1a;随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;它越来越多地渗透到我们日常生活的各个方面。从个人助手到自动驾驶&#xff0c;从语音识别到图像识别&#xff0c;AI正不断地改变我们与世界的互动方式。但你有没有想过&#xff0c;如何准确…
阅读更多...
【漏洞复现】广联达办公OAsql+文件上传+弱口令

【漏洞复现】广联达办公OAsql+文件上传+弱口令

漏洞描述 广联达办公OA是一款综合办公自动化解决方案，旨在提高组织内部的工作效率和协作能力。它提供了一系列功能和工具，帮助企业管理和处理日常办公任务、流程和文档。默认弱口令admin password，后面就不提了。 免责声明 技术文章仅供参考，任何个人和组织使用网络应当…
阅读更多...
YOLOv5算法改进（16）— 增加小目标检测层

YOLOv5算法改进（16）— 增加小目标检测层

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。小目标检测层是指在目标检测任务中用于检测小尺寸目标的特定网络层。由于小目标具有较小的尺寸和低分辨率&#xff0c;它们往往更加难以检测和定位。YOLOv5算法的检测速度与精度较为平衡&#xff0c;但是对于小目标的检测效…
阅读更多...
使用qt5.6.3的注意事项：

使用qt5.6.3的注意事项：

1 当SQL模型(如QSqlTableModel)使用一个无效的索引时,应用程序有可能崩溃。 无效索引的原因有:1. 索引列包含NULL值:如果索引中的某列允许NULL,而查询使用此列进行过滤但未考虑NULL值,则索引变得无效。2. 索引失效:索引列的数据发生变化,但索引未及时更新,导致索引与数据不一致…
阅读更多...
如何进行机器学习

如何进行机器学习

进行机器学习主要包含以下步骤&#xff1a; 获取数据&#xff1a;首先需要获取用于学习的数据&#xff0c;数据的质量和数量都会影响机器学习的效果。如果自己的数据量较少&#xff0c;可以尝试在网上寻找公开数据集进行训练&#xff0c;然后使用自己的数据进行微调。另一种方…
阅读更多...
构建企业分支网络

构建企业分支网络

构建企业分支网络 目录 1.1 项目背景 1.2 项目拓扑 1.3 项目需求 1.4 设备选型 1.5 技术选型 1.6 地址规划 1.6.1 交换设备地址规划表 1.6.2 路由设备地址规划表 1.6.3 ISP设备地址规划表 1.6.4 终端地址规划表 1.6.4.1 VLAN 规划 1.7 VLAN 规划 1.8 项目实施 1.…
阅读更多...
最新文章

Copyright @ 2022~2023