当前位置：首页 > news >正文

CSS学习笔记之中级教程（一）

news 2025/11/7 1:22:06

1、`CSS` 布局 - `display` 属性

1.1 `display` 属性

display 属性是用于控制布局的最重要的 CSS 属性。
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

1.2 块级元素（`block element`）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
会占领页面的一行，其后多个block元素自动换行、可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

块级元素的一些例子：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

1.3 行内元素（`inline element`）

内联元素不从新行开始，仅占用所需的宽度。
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

行内元素的一些例子：

<span>
<a>
<img>

1.4 `Display: none`

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script> 元素使用 display: none;。

1.5 覆盖默认的 `Display` 值

display: inline; 将内容设置为行内元素
将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
display: block;将内容设置为块元素
将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

li {display: inline;
}
a {display: block;
}

1.6 隐藏元素

display:none 隐藏元素，不占位
visibility:hidden 隐藏元素，占位

（1）display:none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
h1.hidden{display: none;
}</style>
<body><h1>此标题可见</h1><h1 class="hidden">此标题不可见</h1><p>请注意， display: none; 的标题不会占用任何空间。</p>
</body>
</html>

运行效果：
在这里插入图片描述
（2）visibility:hidden

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
h1.hidden{display: none;
}
h1.hiddenvisibility{visibility: hidden;
}</style>
<body><h1>此标题可见</h1><!-- <h1 class="hidden">此标题不可见</h1> --><h1 class="hiddenvisibility">此标题不可见,占空间</h1><p>请注意， display: none; 的标题不会占用任何空间。</p>
</body>
</html>

运行效果：
在这里插入图片描述

2、`CSS` 布局 - `width` 和 `max-width`

外边距设置为 auto（ margin: auto），以将元素在其容器中水平居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
div.width{width: 500px;border: 3px solid #73AD21;margin: auto;
}
div.maxwidth{max-width: 500px;margin: auto;border:3px solid #73AD21;
}</style>
<body><div class="width">这个 div 元素的宽度是：500px;</div><br><div class="maxwidth">这个 div 元素的最大宽度是：500px;</div><p><b>提示：</b>将浏览器窗口拖动到小于500px的宽度，以查看这两个 div ！</p></body>
</html>

运行效果：
在这里插入图片描述

3、`CSS` 布局 - `position` 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

3.1 默认属性： `position: static`

HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
默认情况下，块级元素占据其父容器的整个宽度，并垂直堆叠。
内联元素则不会创建换行符，并与其他元素在同一行内显示。
具有position: static;的元素不受z-index属性影响。它们的堆叠顺序由它们在文档树中的位置决定，并且无法改变。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div.static {border: 3px solid #73AD21;position: static;}
</style><body><div class="static">这个 div 元素设置 position: static</div><p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p></body></html>

运行效果：
在这里插入图片描述

3.2 相对定位：`position: relative`;

具有position: relative;的元素仍然遵循文档流，并且不会脱离文档流。相对定位的元素仍然占据其原始位置，其他元素的布局不会受到影响。
可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。这些偏移量是相对于元素自身进行计算的。
当使用相对定位时，元素不会对其他相对定位或绝对定位的元素产生影响。其他元素的定位不会受到影响，它们仍会按照正常流程进行显示。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>*{margin: 0px;padding: 0px;}/* 默认属性 */div.static {border: 3px solid #73AD21;position: static;}div.relative{position: relative;left: 50px;top: 50px;border: 3px solid #73AD21;}</style><body><div class="static">这个 div 元素设置 position: static</div> <p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p><div class="relative">这个 div 元素设置 position: relative</div> 
</body></html>

运行效果：

在这里插入图片描述

3.3 固定定位：`position: fixed`;

固定定位，元素的位置相对于浏览器窗口进行定位，不会随页面滚动而改变。可以使用top、bottom、left、right属性来指定定位的偏移量。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>*{margin: 0px;padding: 0px;}/* 默认属性 */div.static {border: 3px solid #73AD21;position: static;}div.relative{position: relative;left: 50px;top: 50px;border: 3px solid #73AD21;}div.fixed{position: fixed;right: 0px;bottom: 50px;border: 3px solid #73AD21;}</style><body><div class="static">这个 div 元素设置 position: static</div> <p><b>提示：</b>设置 position: static; 的元素不会以任何特殊方式定位；它是始终根据页面的正常流进行定位！</p><div class="relative">这个 div 元素设置 position: relative</div> <div class="fixed">这个 div 元素设置 position: fixed</div> 
</body></html>

运行效果：
在这里插入图片描述

3.4 绝对定位：position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0px;padding: 0px;}div.relative {position: relative;left: 50px;top: 50px;width: 500px;height: 300px;border: 3px solid #73AD21;}div.absolute {position: absolute;border: 3px solid #73AD21;width: 100px;left: 20px;top: 80px;}
</style><body><div class="relative"><p> 这个 div 元素设置 position: relative</p><div class="absolute">这个 div 元素设置 position: absolute</div></div></body></html>

运行效果：
在这里插入图片描述

3.5 粘性定位：`position: sticky`;

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0px;padding: 0px;}div.sticky{position: -webkit-sticky;position: sticky;top: 0px;background-color:aquamarine;border: 3px solid #73AD21;}
</style><body><p>哈哈哈哈</p><div class="sticky">这个 div 元素设置 position: sticky</div><div style="padding-bottom: 1000px"><p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p><p>向上滚动以消除粘性。</p><p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p></div>
</body></html>

运行效果：
在这里插入图片描述
滚动后效果：

3.6 重叠元素：`z-index`

在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

（1） z-index: -1;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
img{position: absolute;z-index: -1;width: 200px;height: 200px;
}</style>
<body><div>
<img src="imgs/icon_mess_sellorder.png">
<p>你好呀哈哈哈</p></div></body>
</html>

运行效果：
在这里插入图片描述

（2） z-index: 1;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
img{position: absolute;z-index: 1;width: 200px;height: 200px;
}</style>
<body><div>
<img src="imgs/icon_mess_sellorder.png">
<p>你好呀哈哈哈</p></div></body>
</html>

运行效果：
在这里插入图片描述

3.7 定位图像中的文本

Top + Left
Top +Right
Bottom +Left
Bottom +Right
Centered

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div.relative {position: relative;}img {width: 200px;height: 200px;opacity: 0.7;z-index: -1;}p.topleft {position: absolute;top: 0px;left: 0px;font-size: 25px;}p.topright {position: absolute;top: 0px;right: 0px;font-size: 25px;}p.bottomleft {position: absolute;bottom: 0px;left: 0px;font-size: 25px;}p.bottomright {position: absolute;bottom: 0px;right: 0px;font-size: 25px;}p.centered {position: absolute;text-align: center;font-size: 25px;width: 100%;}
</style><body><div><img src="imgs/icon_mess_sellorder.png"><p class="topleft">左上</p><p class="topright">右上</p><p class="bottomleft">左下</p><p class="bottomright">右下</p><p class="centered">居中</p></div></body></html>

运行效果：
在这里插入图片描述

4、`CSS` 布局 - 溢出：`overflow`

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性仅适用于具有指定高度的块元素。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

4.1 `overflow: visible`

默认。溢出没有被剪裁。内容在元素框外渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
div.visible{width: 100px;height: 100px;overflow: visible;border:  1px solid #777;background-color: aquamarine;
}</style>
<body><div class="visible" ><p>overflow: visible 默认情况下，溢出是可见的，这意味着它不会被裁剪，，超出部分在元素外渲染</p></div></body>
</html>

运行效果：
在这里插入图片描述

4.2 `overflow: hidden;`

使用 hidden 值，溢出会被裁剪，其余内容被隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div.hidden{margin-top: 100px;width: 100px;height: 100px;overflow: hidden;border:  1px solid #777;background-color: aquamarine;
}</style>
<body><div class="hidden" ><p>overflow: hidden  会剪裁溢出，并隐藏内容的其余部分</p></div></body>
</html>

运行效果：

在这里插入图片描述

4.3 `overflow: scroll;`

scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div.scroll{margin-top: 20px;width: 100px;height: 100px;overflow: scroll;border:  1px solid #777;background-color: aquamarine;
}</style>
<body><div class="scroll" ><p>overflow: scroll 溢出部分会被裁剪，并自动添加滚动条，滚动可见其余部分</p></div></body>
</html>

运行效果：
在这里插入图片描述

4.4 `overflow: auto;`

auto 值类似于 scroll，但是它仅在必要时添加滚动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
div.auto{margin-top: 20px;width: 100px;height: 100px;overflow: auto;border:  1px solid #777;background-color: aquamarine;
}</style>
<body><div class="auto" ><p>overflow: auto 溢出部分会被裁剪，但只会在必要时候增加滚动条（内容超出元素高度时候自动增加滚动条），滚动可见其余部分</p></div><div class="auto" ><p>overflow: auto 哈哈哈</p></div>
</body>
</html>

运行效果：
在这里插入图片描述

4.5 overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div.overflow-xy{margin-top: 20px;width: 100px;height: 100px;overflow-x: hidden;overflow-y: scroll;border:  1px solid #777;background-color: aquamarine;
}</style>
<body><div class="overflow-xy" ><p>overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出</p></div>
</body>
</html>

运行效果：
在这里插入图片描述

5、`CSS` 布局 - 浮动和清除：`float`、`clear`

CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

5.1 浮动：`float` 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

5.1.1 `float: right;`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0px;padding: 0px;}div.block{display: block;}img.right {width: 100px;height: 100px;float: right;margin-left: 20px;}img.left {width: 100px;height: 100px;float: left;margin-right: 20px;}
</style><body><div class="block"><p><img class="right" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字右边</p></div></body></html>

运行效果：
在这里插入图片描述

5.1.2 `float: left;`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0px;padding: 0px;}div.block{display: block;}img.right {width: 50px;height: 50px;float: right;margin-left: 20px;}img.left {width: 50px;height: 50px;float: left;margin-right: 20px;}
</style><body><!-- <div class="block"><p><img class="right" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字右边</p></div> --><div class="block"><p><img class="left" alt="pic" src="imgs/icon_mess_sellorder.png">图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边</p>
</div>
</body></html>

运行效果：
在这里插入图片描述

5.1.3 `float: none;`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0px;padding: 0px;}div.block{display: block;}img.none{width: 50px;height: 50px;float: none;}
</style><body><div class="block"><p><img class="none" alt="pic" src="imgs/icon_mess_sellorder.png">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body></html>

运行效果：在这里插入代码片
在这里插入图片描述

5.2 清除: `clear` 和 `clearfix`

5.2.1 `clear`

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外部引入css --><link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>div.ex1 {float: left;border: 1px solid #777;}div.ex2{clear: left;}img.left {width: 50px;height: 50px;float: left;}
</style><body><h1>不使用clear</h1><div class="ex1">内容1</div><div >内容2内容2内容2内容2内容2内容2内容2</div><h1>使用clear</h1> <div class="ex1">内容1</div><div class="ex2">内容2内容2内容2内容2内容2内容2内容2</div></body></html>

运行效果：
在这里插入图片描述

5.2.2 `clearfix`

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外,然后我们可以向包含元素添加 overflow: auto;，来解决此问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外部引入css --><link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>div.ex1 {clear: both;border: 1px solid #777;}div.clearfix{clear: both;overflow: auto;border: 1px solid #777;}img.float {width: 50px;height: 50px;float: left;}
</style><body><h1>沒有使用clearfix </h1><div class="ex1"><img class="float" src="imgs/icon_mess_sellorder.png"><p>内容内容内容内容内容内容内容</p></div><h1 style="padding-top: 50px">使用clearfix </h1><div class="clearfix"><img class="float" src="imgs/icon_mess_sellorder.png"><p>内容内容内容内容内容内容内容</p></div></body></html>

运行效果：
在这里插入图片描述

5.3 补充

CSS 布局 - 浮动实例

5.3.1 `box-sizing: border-box;`(添加边距后会破坏排版的解决方法)

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

（1）未使用

<!DOCTYPE html>
<html>
<head>
<style>.box {float: left;width: 33.33%;padding: 50px;
}.clearfix::after {content: "";clear: both;display: table;
}
</style>
</head>
<body><h1>网格框</h1><p>并排浮动的框：</p><div class="clearfix"><div class="box" style="background-color:#bbb"><p>框中的一些文本。</p></div><div class="box" style="background-color:#ccc"><p>框中的一些文本。</p></div><div class="box" style="background-color:#ddd"><p>框中的一些文本。</p></div>
</div></body>
</html>

运行效果：
在这里插入图片描述
（2）使用后：

<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;
}.box {float: left;width: 33.33%;padding: 50px;
}.clearfix::after {content: "";clear: both;display: table;
}
</style>
</head>
<body><h1>网格框</h1><p>并排浮动的框：</p><div class="clearfix"><div class="box" style="background-color:#bbb"><p>框中的一些文本。</p></div><div class="box" style="background-color:#ccc"><p>框中的一些文本。</p></div><div class="box" style="background-color:#ddd"><p>框中的一些文本。</p></div>
</div><p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p></body>
</html>

运行效果：
在这里插入图片描述

5.3.2 水平多个框的时候，保证高度一致（高度为最高的那个框）

display: flex;将对象作为弹性伸缩盒显示
（1）未使用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>* {/* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */box-sizing: border-box;}.clearfix::after{content: '';clear: both;display: table;}/* div.flex {display: flex;} */div.ex1 {float: left;width: 33%;background-color: aquamarine;padding: 50px;}div.ex2 {float: left;width: 33%;background-color: bisque;padding: 50px;}div.ex3 {float: left;width: 33%;background-color: cadetblue;padding: 50px;}/* p{text-align: center;} */
</style><body><!-- <div class="flex"> --><div class="ex1"><p>文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1</p></div><div class="ex2"><p>文本内容2</p></div><div class="ex3"><p>文本内容3</p></div><!-- </div> -->
</body></html>

运行效果：
在这里插入图片描述

（2）使用后：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<style>* {/* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */box-sizing: border-box;}.clearfix::after{content: '';clear: both;display: table;}div.flex {display: flex;}div.ex1 {float: left;width: 33%;background-color: aquamarine;padding: 50px;}div.ex2 {float: left;width: 33%;background-color: bisque;padding: 50px;}div.ex3 {float: left;width: 33%;background-color: cadetblue;padding: 50px;}/* p{text-align: center;} */
</style><body><div class="flex"><div class="ex1"><p>文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1</p></div><div class="ex2"><p>文本内容2</p></div><div class="ex3"><p>文本内容3</p></div></div>
</body></html>

运行效果：
在这里插入图片描述

5.3.3 导航栏练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>ul {width: 100%;background-color: black;margin: 0;padding: 0;overflow: hidden;}li  a{float: left;padding: 10px 15px;font-size: 15px;color: white;display: inline-block;}a.choose {background-color: brown;}a {color: white;/* 取消下划线 */text-decoration: none;/* 文字居中 */text-align: center;}/* 鼠标放置效果 */a:hover {background-color: aquamarine;}</style>
</head><body><ul><li ><a  class="choose" href="html_jump_page.html">首页</a></li><li ><a class="unchoose" href="html_jump_page.html">控制台</a></li><li ><a class="unchoose" href="html_jump_page.html">个人中心</a></li></ul>
</body></html>

运行效果：
在这里插入图片描述

5.3.4 简单布局练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单布局</title><!-- 引用外部css样式 --><!-- <link rel="stylesheet" href="css/baseStyle.css"> --><style>/* padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里 */* {box-sizing: border-box;}/* 防止溢出 */.clearfix::after {content: "";clear: both;display: table;}div.header {background-color: grey;padding: 20px 10px;margin: 10px;}h1.header {color: white;font-size: 20px;}div.footer {background-color: grey;padding: 20px 10px;}ul {list-style-type: none;padding: 0;margin: 0;}li {background-color: #33b5e5;color: white;padding: 10px 20px;margin-bottom: 10px;}.column {float: left;padding: 15px;}.menu {width: 25%;}.content {width: 75%;}</style>
</head><body><!-- 顶部标题 --><div class="header"><h1 class="header">Shang Hai</h1></div><!-- 中间 --><div class="clearfix"><div class="column menu"><!-- 左侧导航栏 --><ul><li>The Fight</li><li>The City</li><li>The IsIand</li><li>The Food</li></ul></div><!-- 右侧内容 --><div class="column content"><h1>The City</h1><p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome toShanghai!</p><p>You will learn more about web layout and responsive web pages in a later chapter.</p></div></div><!-- Footer --><div class="header"><h1 class="header">Footer Text</h1></div></body></html>

CSS学习笔记之中级教程（一）

1、CSS 布局 - display 属性 1.1 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 …...

编程日记 2024/5/11 6:40:41

Spring Cloud Alibaba 网关 Gateway 集成（7）

项目的源码地址 Spring Cloud Alibaba 工程搭建（1） Spring Cloud Alibaba 工程搭建连接数据库（2） Spring Cloud Alibaba 集成 nacos 以及整合 Ribbon 与 Feign 实现负载调用（3） Spring Cloud Alibaba Ribbo…...

编程日记 2024/5/11 6:39:40

低代码技术赋能未来乡村建设：创新与实践

引言随着我国新型城镇化进程的推进，乡村建设正面临着前所未有的挑战。如何在有限的人力、物力、财力资源下，高效推动乡村建设，实现城乡一体化发展，成为当下亟待解决的问题。低代码技术作为一种创新性的解决方案，为未来…...

编程日记 2024/5/11 6:38:39

基于Springboot的房屋租赁管理系统（有报告）。Javaee项目，springboot项目。

演示视频： 基于Springboot的房屋租赁管理系统（有报告）。Javaee项目，springboot项目。项目介绍： 采用M（model）V（view）C（controller）三层体系结构…...

编程日记 2024/5/11 6:37:37

跨平台移动应用开发指南：打造跨越iOS和Android的移动应用

跨平台移动应用开发已经成为许多开发者的首选，因为它可以节省时间、成本和精力，同时使得应用能够覆盖更广泛的用户群体。本指南将介绍跨平台移动应用开发的基本概念、流行的跨平台框架以及一些最佳实践，帮助您快速入门并打造出高质量的跨平台…...

编程日记 2024/5/11 6:36:36

QT+多线程编程

QT的多线程编程有两种 1、自定义类继承QThread 第一种是自定义一个类继承于QThread，重写run()方法来实现。然后当需要使用线程的时候你就新建一个自定义对象，然后调用start方法开始运行。下面的例子是widget里面创建一个线程，然后调用sta…...

编程日记 2024/5/11 6:35:34

设计模式——迭代器模式（Iterator）

迭代器模式（Iterator Pattern）是一种行为设计模式，它使得我们能够顺序地访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式为遍历不同的聚合结构提供了一个统一的接口，使得客户端代码可以独立…...

编程日记 2024/5/11 6:34:32

在k8s中安装Grafana并对接Prometheus，实现k8s集群监控数据的展示

🐇明明跟你说过：个人主页 🏅个人专栏：《Grafana：让数据说话的魔术师》 🏅 🔖行路有良友，便是天堂🔖 目录一、引言 1、Grafana简介 2、Grafana的重要性与影响力 …...

编程日记 2024/5/11 6:33:30

【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )

文章目录一、数组排序1、翻转数组元素 - reverse()2、数组元素排序 - sort() 默认从小到大排序3、数组元素排序 - sort() 自定义排序规则4、数组元素排序 - sort() 自定义降序排序简化写法 Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript…...

编程日记 2024/5/11 6:32:29

ctfshow web入门 php反序列化 web267--web270

web267 查看源代码发现这三个页面然后发现登录页面直接admin/admin登录成功然后看到了 ///backdoor/shell unserialize(base64_decode($_GET[code]))EXP <?php namespace yii\rest{class IndexAction{public $checkAccess;public $id;public function __construct(){…...

编程日记 2024/5/11 6:31:27

智慧公厕解决什么问题？实现了什么样的价值？

公共厕所一直是城市管理的难题，常常面临着卫生条件不佳、管理不善以及使用体验差等问题。为了解决这些困扰城市的难题，智慧公厕应运而生。智慧公厕不仅应用了信息化和数字化技术，还通过全方位的智能化应用，彻底改变了传统公厕的面…...

编程日记 2024/5/11 6:29:25

IATF16949认证是什么？

IATF16949认证是一项国际质量管理体系的认证标准，由国际汽车行业联合会（IATF）开发，旨在提高汽车行业的质量管理水平，满足客户对汽车部件和零部件的要求。该标准是在ISO/TS 16949标准的基础上，专门为汽车行业…...

编程日记 2024/5/11 6:28:24

【Vue2】关于response返回数据的错误小记

关于Vue2中response返回数据的一个错误小记如图，在这里返回的时候，后端是通过List< String >返回的，response接收到的实际上是一个Array数组，但是赋值给searchedTaskList的时候，需要在.then包括的范围里面赋值给…...

编程日记 2024/5/11 6:27:23

深入理解C++构造函数和析构函数

目录标题 1. 构造函数默认构造函数参数化构造函数拷贝构造函数 2. 析构函数3. 构造函数和析构函数的使用场景自动资源管理防止资源泄露深拷贝和浅拷贝 4. C的类中必定有个构造函数吗？5. 总结 C中的构造函数和析构函数是类对象生命周期管理的重要组成部分。构造函数用…...

编程日记 2024/5/11 6:25:21

CMakeLists.txt语法规则：数学运算 math

一. 简介前面几篇文章学习了 CMakeLists.txt语法中的一些常用变量，常用命令，双引号的作用。条件判断语句，循环语句等等。本文简单学习一下 CMakeLists.txt语法中数学运算 match。二. CMakeLists.txt语法规则：数学运算 math 在…...

编程日记 2024/5/11 6:24:19

图片无损压缩工具-VIKY

一、前言 Viky v3.4是一款功能强大的图片压缩工具，它能够提供高效的图片无损压缩服务。通过使用独特的压缩算法，该软件在显著减小图片文件大小的同时，还保持了图像的清晰度和色彩饱和度，确保了图像质量的优异表现。二、软件特点…...

编程日记 2024/5/11 6:23:18

【Linux操作系统】:文件操作

目录前言一、C语言中文件IO操作 1.文件的打开方式 2.fopen：打开文件 3.fread：读文件 4.fwrite:写文件二、系统文件I/O 1.系统调用open、read、write 2.文件描述符fd 3.文件描述符的分配规则 4.重定向 5.缓冲区 6.理解文件系统磁盘磁盘…...

编程日记 2024/5/11 6:22:16

渗透之sql注入----二次注入

目录二次注入的原理： 实战： 第一步：找注入点找漏洞： 注入大概过程： 第二步：开始注入二次注入的原理： 二次注入是由于对用户输入的数据过滤不严谨，导致存在异常的数据被出入…...

编程日记 2024/5/11 6:19:13

LeetCode 每日一题 ---- 【2105. 给植物浇水 II】

LeetCode 每日一题 ---- 【2105. 给植物浇水 II】 2105.给植物浇水II方法：模拟双指针 2105.给植物浇水II 方法：模拟双指针今天是给植物浇水II，昨天是I，本质上和昨天的没有区别，都是模拟，今天额外需要注意…...

编程日记 2024/5/11 6:17:09

【刷题】代码随想录算法训练营第三十五天|435、无重叠区间，763、划分字母区间，56、合并区间

目录 435、无重叠区间763、划分字母区间56、合并区间 435、无重叠区间讲解：https://programmercarl.com/0435.%E6%97%A0%E9%87%8D%E5%8F%A0%E5%8C%BA%E9%97%B4.html 左边界和有边界排序，注意sort的排序规则函数编写。 class Solution { public:// 按照…...

编程日记 2024/5/11 6:15:06

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/11/3 10:32:07

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

DiscuzX3.5发帖json api

参考文章：PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客简单改造了一下，适配我自己的需求有一个站点存在多个采集站，我想通过主站拿标题，采集站拿内容使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/10/21 19:08:18

实战设计模式之模板方法模式

概述模板方法模式定义了一个操作中的算法骨架，并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下，重新定义算法中的某些步骤。简单来说，就是在一个方法中定义了要执行的步骤顺序或算法框架，但允许子类…...

编程新知 2025/10/29 4:04:40

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览研究背景研究问题：这篇文章要解决的问题是当前大型语言模型（LLMs）在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色，但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成（RA…...

编程新知 2025/11/3 4:31:22

【QT控件】显示类控件

目录一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏：QT_uyeonashi的博客-CSDN博客一、Label QLabel 可以用来显示文本和图片. 核心属性如下代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2025/10/29 23:44:47

基于 Transformer robert的情感分类任务实践总结之二——R-Drop

基于 Transformer robert的情感分类任务实践总结之一核心改进点 1. R-Drop正则化原理：通过在同一个输入上两次前向传播（利用Dropout的随机性），强制模型对相同输入生成相似的输出分布，避免过拟合。实现&#xff1a…...

编程新知 2025/10/28 22:17:23

跨域请求解决方案全解析

跨域请求可以通过多种技术方案实现，核心是绕过浏览器的同源策略限制。以下是主流解决方案及具体实现方式： 一、CORS（跨域资源共享） 最常用的标准化方案，通过服务器设置HTTP响应头实现： Access-Control-Al…...

编程新知 2025/9/12 14:12:34

1、CSS 布局 - display 属性

1.1 display 属性

1.2 块级元素（block element）

1.3 行内元素（inline element）

1.4 Display: none

1.5 覆盖默认的 Display 值

1.6 隐藏元素

2、CSS 布局 - width 和 max-width

3、CSS 布局 - position 属性

3.1 默认属性： position: static

3.2 相对定位：position: relative;

3.3 固定定位：position: fixed;

3.4 绝对定位：position: absolute;

3.5 粘性定位：position: sticky;

3.6 重叠元素：z-index

3.7 定位图像中的文本

4、CSS 布局 - 溢出：overflow

4.1 overflow: visible

4.2 overflow: hidden;

4.3 overflow: scroll;

4.4 overflow: auto;

4.5 overflow-x 和 overflow-y

5、CSS 布局 - 浮动和清除：float、clear

5.1 浮动：float 属性

5.1.1 float: right;

5.1.2 float: left;

5.1.3 float: none;

5.2 清除: clear 和 clearfix

5.2.1 clear

5.2.2 clearfix

5.3 补充

5.3.1 box-sizing: border-box;(添加边距后会破坏排版的解决方法)

5.3.2 水平多个框的时候，保证高度一致（高度为最高的那个框）

5.3.3 导航栏 练习

5.3.4 简单布局练习

相关文章：

1、`CSS` 布局 - `display` 属性

1.1 `display` 属性

1.2 块级元素（`block element`）

1.3 行内元素（`inline element`）

1.4 `Display: none`

1.5 覆盖默认的 `Display` 值

2、`CSS` 布局 - `width` 和 `max-width`

3、`CSS` 布局 - `position` 属性

3.1 默认属性： `position: static`

3.2 相对定位：`position: relative`;

3.3 固定定位：`position: fixed`;

3.5 粘性定位：`position: sticky`;

3.6 重叠元素：`z-index`

4、`CSS` 布局 - 溢出：`overflow`

4.1 `overflow: visible`

4.2 `overflow: hidden;`

4.3 `overflow: scroll;`

4.4 `overflow: auto;`

5、`CSS` 布局 - 浮动和清除：`float`、`clear`

5.1 浮动：`float` 属性

5.1.1 `float: right;`

5.1.2 `float: left;`

5.1.3 `float: none;`

5.2 清除: `clear` 和 `clearfix`

5.2.1 `clear`

5.2.2 `clearfix`

5.3.1 `box-sizing: border-box;`(添加边距后会破坏排版的解决方法)

5.3.3 导航栏练习