＜电子幽灵＞前端第二件：CSS基础笔记下
CSDN 2024-09-06 15:33:03 阅读 92
CSS基础笔记下
介绍
费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。
CSS基础笔记下
CSS基础笔记下介绍简介CSS与盒子模型CSS元素排版设置元素尺寸尺寸修改常用属性表
设置元素显示方式设置元素位置元素重叠顺序
预防元素溢出设置浮动元素设置元素对齐
总结
本篇笔记主要来源于对 菜鸟教程：CSS教程的学习。
简介
之前，通过HTML和CSS基础的学习，语法、常用属性等等已经明晰了。现在，我们应当以更加结构化、专业化的视角，去看待CSS的"画板"——也就是各种(显示在网页上的)HTML标签。
CSS与盒子模型
实际上，每一个HTML元素都是一个"盒子"，盒子中的"礼物"是我们要展示的内容，外面套一层可以装饰的"盒子"，然后又有一层可以装饰的"盒子",总共有几层。CSS可以改变"礼物"(也就是文本、字体、图片等等)，也可以装饰外面的"盒子"。
盒子模型除了最里面的内容以外，从里到外分别是：padding、border、outline、margin
padding:
padding指的是文本、图片等内容和页面其他部分(如边框、浏览器边界)的距离。一般用定量的数值，单位有像素(px)、厘米(cm)等。可以设置元素在(可分别设置)四个方向上的内边距。border:
border在padding和内容之外，能够为它们绘制一个边框。具体在上一章已经讲过，主要可以分别渲染四个方向的color、style和width；这里再补充一个额外的属性border-radius:可以分别绘制四个角的圆角方框。outline:
outline在border之外，可以为元素绘制边框线。具体可以设置color、style、width三个属性。margin:
margin在outline之外，可以设置元素在(可分别设置)四个方向上的外边距。
outline属性介绍
outline:outline总属性。根据顺序可以(选择性)声明color、style、width。outline-color:声明线框颜色。可用值：
通用颜色表示方法invert：默认，是背景颜色的反色，保证在任何浏览器里都能显示。 outline-style:设置线框样式。可用值：
| 值 | 说明 |
|---|---|
| dotted | 点状边框 |
| dashed | 虚线边框 |
| solid | 实线轮廓 |
| double | 双实线轮廓(宽度由outline-width决定) |
| groove | 3D凹槽 |
| ridge | 3D凸槽 |
| inset | 3D凹边 |
| outset | 3D凸边 |
outline-width:设置轮廓宽度。可以定性设置为thin/medium/thick,或者定量设置成单位为px的数值。
CSS元素排版
CSS中可以改变元素的部分原本属性和默认的排列方式等等，运用技巧可以实现更加多样的网页实现。
设置元素尺寸
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style type = "text/css">
p.rectangle { -- -->
width: 200px;
height: 100px;
}
p.veryverylongword {
width: 2400px;
height: 100px;
}
p.max_height {
max-height: 50px;
background-color: yellow;
}
p.min_height {
min-height: 50px;
background-color: green;
}
p.max_width {
max-width: 100px;
background-color:aqua;
}
p.min_width {
min-width: 700px;
background-color: purple;
}
img {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<p>这个文件用来演示改变元素尺寸的效果</p>
<p class="rectangle">这是一个矩形形状的p元素，宽度为200px，高度为100px，如果一行放不下，就会自动换行。当固定了宽度和高度之后，文本有可能重叠，所以请小心。</p>code>
<p>也可以设置图片等元素的高度和宽度:</p>
<img src="https://picsum.photos/200/300" alt="随机图片" width="100" height="200"/>code>
<p class="veryverylongword">当设置了某个元素的长宽之后，它就不会自动适应浏览器的大小了。比如说这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>code>
<p class="max_height">设置了最大高度为50px的p元素，当内容超过这个高度时，会自动截断。<br>如果内容没有超过这个高度，则会保持原有的高度。<br/>如果内容超过了这个高度，就会导致溢出，可能会和其他文本发生重叠。</p>code>
<p class="min_height">设置了最小高度为50px的p元素，当内容小于这个高度时，会自动增加高度。</p>code>
<p class="max_width">设置了最大宽度为20px的p元素，当内容超过这个宽度时，会自动换行。</p>code>
<p class="min_width">设置了最小宽度为700px的p元素，当内容小于这个宽度时，会自动增加宽度。</p>code>
</body>
</html>
有一些属性可以设置元素的大小，当元素被设置这些属性之后，就会忽略可能出现的文本重叠等问题。
尺寸修改常用属性表
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| line-height | 设置行高 |
| width | 设置元素宽度 |
| max-height | 设置元素最大高度 |
| min-height | 设置元素最小高度 |
| max-width | 设置元素最大宽度 |
| min-width | 设置元素最小宽度 |
表格中的属性的值可能格式均一致。
对于具有max/min的属性来说，max会导致文本溢出，min会导致元素大小自动填充。
height、width通常用来指定图片等内容的大小。
设置元素显示方式
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style type = "text/css">
img.none{ -- -->
display: none;
}
img.hidden{
visibility: hidden;
}
li.inline { display: inline;}
</style>
</head>
<body>
<img class="none" src="https://picsum.photos/200/300" alt="Random Image"/>code>
<p>上面的一个图片就是连摆放都没有摆放</p>
<img class="hidden" src="https://picsum.photos/200/300" alt="Random Image"/>code>
<p>上面的图片就是列在页面上了，但是被藏起来了，所以会有一片空地。</p>
<img src="https://picsum.photos/200/300" alt="Random Image">code>
<p>上面的图片就是正常的显示</p>
<ol>这个列表中的前三个表项就是以内联元素的形式出现的。<br/>
<li class="inline">列表项1</li>code>
<li class="inline">列表项2</li>code>
<li class="inline">列表项3</li>code>
<li>列表项4</li>
<li>列表项5</li>
</ol>
</body>
</html>
隐藏元素：两种方式
visibility:hidden;display:none;
第一种方式具体而言是“不显示元素”，而第二种方式则是“不把元素展示在页面上”。也就是说，虽然两种方式都可以隐藏元素，但是第一种方式会让元素本来的位置变为空白。
visibility的另一个属性是collapse，用在表格中可以让一行或一列被折叠；用在其他元素当中则是和hidden相等。
改变元素显示方式：块级元素和内联元素互换
属性display中除了可以改变元素的显示方式，还可以改变元素的显示位置——即块级元素还是内联元素。
设置元素位置
<!--该段代码由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Position 示例</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}
.static {
background-color: red;
position: static;
}
.relative {
background-color: green;
position: relative;
top: 20px;
left: 20px;
}
.absolute {
background-color: blue;
position: absolute;
top: 20px;
right: 20px;
}
.fixed {
background-color: purple;
position: fixed;
bottom: 20px;
right: 20px;
}
.sticky {
background-color: orange;
position: sticky;
top: 20px;
}
</style>
</head>
<body>
<div class="box static">Static</div>code>
<div class="box relative">Relative</div>code>
<div class="box absolute">Absolute</div>code>
<div class="box fixed">Fixed</div>code>
<div class="box sticky">Sticky</div>code>
<p class = "sticky">滚动页面以查看 Sticky 效果。</p>
<div style="height: 1000px;"></div>code>
</body>
</html>
基础的设置元素位置用的属性是position。
position常用值：
static:默认值，没有特殊定位，元素出现在特殊的流中。fixed:相对于当前浏览器窗口固定位置的元素，用top/right/bottom/left进行定位。relative:是元素相对于他自身原本的位置进行偏移。absolute:相对于static以外的第一个父级元素进行偏移。sticky:粘性定位，阈值之内与relative相同，阈值之外与fixed相同。这个阈值可以用top/right/bottom/left或其中之一进行定位，否则永远与relative相同。
元素重叠顺序
<!--该段代码由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Z-Index 示例</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
position: relative;
width: 80%;
margin: 0 auto;
height: 300px;
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
position: absolute;
}
.box1 {
background-color: red;
top: 20px;
left: 20px;
z-index: 1;
}
.box2 {
background-color: green;
top: 50px;
left: 50px;
z-index: 2;
}
.box3 {
background-color: blue;
top: 80px;
left: 80px;
z-index: 3;
}
.box4 {
background-color: purple;
top: 110px;
left: 110px;
z-index: 4;
}
.box5 {
background-color: orange;
top: 140px;
left: 140px;
z-index: 5;
}
</style>
</head>
<body>
<div class="container">code>
<div class="box box1">Box 1</div>code>
<div class="box box2">Box 2</div>code>
<div class="box box3">Box 3</div>code>
<div class="box box4">Box 4</div>code>
<div class="box box5">Box 5</div>code>
</div>
<p>元素重叠顺序由 z-index 决定，数值越大，越在上面。</p>
</body>
</html>
由于设置元素尺寸、位置之后，元素的定位会与文档流无关，所以他们就可以互相重叠。重叠可以赋予页面更多的美化可能。
可以设置z-index属性，设置为正负整数，数字更大的元素会覆盖在数字更小的元素上。
预防元素溢出
<!--该段代码由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Overflow 示例</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
border: 2px solid #000;
padding: 20px;
}
.box {
width: 200px;
height: 100px;
border: 1px solid #000;
margin-bottom: 20px;
}
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="container">code>
<div class="box overflow-visible">code>
<p>这个盒子使用了 overflow: visible; 内容溢出时会显示在盒子外部。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box overflow-hidden">code>
<p>这个盒子使用了 overflow: hidden; 内容溢出时会被隐藏。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box overflow-scroll">code>
<p>这个盒子使用了 overflow: scroll; 内容溢出时会出现滚动条。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box overflow-auto">code>
<p>这个盒子使用了 overflow: auto; 内容溢出时会根据需要出现滚动条。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>
设置元素尺寸之后，我们很可能遇到"尺寸只有这么大，内容放不下"这样的问题，这时候可以用overflow属性来解决。
overflow常用值:
visible:默认值。内容不会被修剪，会显示在元素之外。hidden:内容会被修剪，元素之外的内容将不可见。scroll:内容不会被修剪，可以拖动滚动条查看剩余内容。auto:自动检测是否被修剪，来选择使用hidden还是scroll。
设置浮动元素
<!--该段代码由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Float 示例</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
border: 2px solid #000;
padding: 20px;
overflow: auto; /* 清除浮动 */
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
margin: 10px;
}
.float-left {
background-color: red;
float: left;
}
.float-right {
background-color: green;
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">code>
<div class="box float-left">左浮动</div>code>
<div class="box float-right">右浮动</div>code>
<div class="clear"></div>code>
</div>
<p class="clear">这段文字在浮动元素之后，使用了 clear: both; 来清除浮动。</p>code>
</body>
</html>
使用float属性，可以让元素浮动在页面
.center { -- -->
padding: 70px 0;
border:3px solid green ;
}的左/右边。这样可以让页面具有更加丰富的排布。
如果想要清除浮动元素，或者说，让某个元素两侧不再出现浮动元素，可以使用clear属性。
clear属性常用值：left(左边不出现浮动元素)/right(右边不出现浮动元素)/both(两边不出现浮动元素)
设置元素对齐
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>元素对齐示例</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
border: 2px solid #000;
padding: 20px;
height: 300px;
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
margin: 10px;
}
.box1 {
background-color: green;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.box2 {
background-color: purple;
display: grid;
place-items: center;
}
.box3 {
background-color: orange;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">code>
<div class="box box1">Box 1</div>code>
<div class="box box2">Box 2</div>code>
<div class="box box3">Box 3</div>code>
</div>
<p>多种方式实现元素对齐。</p>
</body>
</html>
CSS有多种方式可以实现元素的对齐。
| 代码 | 作用解释 |
|---|---|
| margin:auto; | 让元素水平居中 |
| text-align:center; | 让文本在元素当中水平居中 |
| img { -- --> margin:auto; display:block; } | 让图片水平居中 |
| .right{ -- --> position:absolute; right:0px;} | 用position让元素进行对齐 |
| .right{ -- --> float:right} | 用float让元素进行左右对齐 |
| .center{ -- --> padding:70px 0; border:3px solid green;} | 用padding实现垂直居中对齐 |
总结
CSS更加灵活，它可以在HTML的基础上创造一个更加多样、更加美观的页面。每个元素抽象成的盒子模型，也让我们能够以更加结构化的方式对元素和页面进行美化。但是CSS还有一些更加高级的功能，它们将会在下个笔记中展示出来；同时，CSS还有一些面向对象编程的思想，我们也会一并涉及。下个笔记结束后，就可以创造一个美观，而且看起来更加“现代化”的页面了。
在算力如此快速增长的今天，机器正在越来越善于代替人们完成曾经意想不到的
工作。人类本身是否也需要自身的创造力来完成进化呢？——替造物主完成祂未竟的事业？
上一篇：CSS基础笔记上
下一篇：CSS进阶笔记上
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。