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

HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

news 2026/3/31 20:18:46

自己复习前端基础，仅用于记忆，初学者不太适合

示例代码 - HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="base.css"><title>框架元素 装饰元素 弹性盒子</title>
</head>
<body><header><h1>frame、decoration element</h1><nav><ul class="navbar"><li><a href="#">首页</a></li><li><a href="#">框架元素</a></li><li><a href="#">装饰元素</a></li><li><a href="#">弹性盒子</a></li></ul></nav></header><main><div><pre><h2>赋得古原草送别</h2><abbr title="&lt;b&gt;"><b>离离原上草</b></abbr><abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr><abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr><abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr><abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr><abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr><abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr><abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr></pre></div><aside><pre>显然：b与strong、em与i、s与del的效果相同，只是含义不同；u是下划线的装饰作用，mark是标记的作用，不建议使用HTML的装饰标签，推荐CSS来做相关操作</pre></aside></main><footer>&copy; 2023 My Website. All rights reserved.</footer>
</body>
</html>

示例代码 - CSS

* {padding: 0;margin: 0;
}li, a {padding: 1rem;text-decoration: none;color: black;list-style-type: none;
}body {display: flex;flex-direction: column;justify-items: center;
}header {text-align: center;background-color: #8fb1c7;padding-top: 1.5rem;
}.navbar {display: flex;justify-content: space-around;
}main {display: flex;
}div {padding: 2rem;flex: 3;font-size: 18px;text-align: center;background-color: #72927e;
}aside {flex: 2;background-color: #735b73;padding: 2rem;font-size: 18px;
}footer {text-align: center;background-color: #727c48;
}h2 {margin: 2rem;
}

效果

 框架元素

<!DOCTYPE html>                                # 说明文档类型是HTML5
<html lang="en">                               # 项目根元素
<head>                                         # 头元素，存储元数据<meta charset="UTF-8">                       # 元数据，不为用户所看见<link rel="stylesheet" href="base.css">      # 链接元素，指向css、js<title> </title>                             # 标题元素 
</head>
<body>                                         # 用户可见元素的主体<header>                                     # 头部元素，如标题、导航等最上方内容<nav>  </nav>                              # 导航</header><main>                                       # 内容主体<div>  </div>                              # 块级容器，    <aside>   </aside>                         # 侧边栏内容 </main><footer></footer>                            # 页脚内容
</body>
</html>

装饰元素

<abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
<abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
<abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
<abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
<abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
<abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
<abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
<abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>

说明：

abbr：缩写元素，鼠标悬停显示title内容

&lt;、&gt; ：分别对应<、>

b、strong：效果是加粗

em、i：效果是斜体

s、del：效果是删除线

u：效果是下划线

mark：效果是标记

弹性盒子

详细介绍

        弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)

概念

        用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

用法

        设置父元素为flex，为一个容器，其直接子元素为项目（item）可控制排版。

基础介绍

        父元素属性

        flex-direction：row | row-reverse | column | column-reverse;

        flex-wrap：nowrap | wrap | wrap-reverse;

        flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

        justify-content：flex-start | flex-end | center | space-between | space-around | stretch

        align-items：flex-start | flex-end | center | baseline | stretch （单行）

        align-content：flex-start | flex-end | center | space-between | space-around | stretch

        子元素属性

        order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

        flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

        flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

        flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto

        flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

        该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

        align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值

        为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

        auto | flex-start | flex-end | center | baseline | stretch

 

相关文章：

HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

自己复习前端基础&#xff0c;仅用于记忆&#xff0c;初学者不太适合 示例代码 - HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...

编程日记 2024/7/12 21:11:48

C++：创建线程

在C中创建线程&#xff0c;最直接的方式是使用C11标准引入的<thread>库。这个库提供了std::thread类&#xff0c;使得线程的创建和管理变得简单直接。 以下是一个简单的示例&#xff0c;展示了如何在C中使用std::thread来创建和启动线程&#xff1a; 示例1&#xff1a;…...

编程日记 2024/7/12 21:10:47

python如何查看类的函数

Python非常方便&#xff0c;它不需要用户查询文档&#xff0c;只需掌握如下两个帮助函数&#xff0c;即可查看Python中的所有函数&#xff08;方法&#xff09;以及它们的用法和功能&#xff1a; dir()&#xff1a;列出指定类或模块包含的全部内容&#xff08;包括函数、方法、…...

编程日记 2024/7/12 21:09:46

P6. 对局列表和排行榜功能

P6. 对局列表和排行榜功能 0 概述1 对局列表功能1.1 分页配置1.2 后端按页获取对局列表接口1.3 前端展示传回来的对局列表1.4 录像回放功能1.4.1 录像回放的流程1.4.2 录像回放的实现 1.5 前端分页展示 2 排行榜功能2.1 排行榜的实现 0 概述 本节主要介绍了如何实现对局列表和…...

编程日记 2024/7/12 21:08:46

uniapp easycom组件冲突

提示信息 ​easycom组件冲突&#xff1a;[/components/uni-icons/uni-icons.vue,/uni_modules/uni-icons/components/uni-icons/uni-icons.vue]​ 问题描述 老项目&#xff0c;在uniapp插件商城导入了一个新的uniapp官方开发的组件》uni-data-picker 数据驱动的picker选择器 …...

编程日记 2024/7/12 21:02:39

总结24个Python接单赚钱平台与详细教程，兼职月入5000+

如果说当下什么编程语言最靠谱或者比较适合搞副业&#xff1f; 答案肯定100%是&#xff1a;Python。 python是所有语法中最简单易上手的语言&#xff0c;不需要特别的的英语词汇量&#xff0c;逻辑思维也不需要很差就能上手。而且学会了之后就能编写代码爬取各种数据&#xf…...

编程日记 2024/7/12 20:58:34

macOS 的电源适配器设置

在 macOS 的电源适配器设置中&#xff0c;有四个选项&#xff0c;每个选项都有特定的功能&#xff1a; Prevent your Mac from automatically sleeping when the display is off&#xff08;当显示屏关闭时&#xff0c;防止你的 Mac 自动进入睡眠状态&#xff09;&#xff1a;…...

编程日记 2024/7/12 20:54:31

视觉SLAM与定位之一前端特征点及匹配

视觉SLAM中的特征点及匹配 参考文章或链接特征点性能的评估传统特征点和描述子&#xff08;仅特征点或者特征点描述子&#xff09;传统描述子 基于深度学习的特征点基于深度学习的描述子基于深度学习的特征点描述子特征匹配 参考文章或链接 Image Matching from Handcrafted t…...

编程日记 2024/7/12 20:49:25

开源项目的认识理解

目录 开源项目有哪些机遇与挑战&#xff1f; 1.开源项目的发展趋势 2.开源的经验分享&#xff08;向大佬请教与上网查询&#xff09; 3.开源项目的挑战 开源项目有哪些机遇与挑战&#xff1f; 1.开源项目的发展趋势 1. 持续增长与普及 - 开源项目将继续增长&#xff0c…...

编程日记 2024/7/12 20:48:24

37.哀家要长脑子了！--层序遍历

gongmi层序遍历模板 vector<vector<int>> levelOrder(TreeNode *root){queue<TreeNode*> que;vector<vector<int>> res;if(root ! nullptr)que.push(root);while(!que.empty()){int size que.size();vector<int> storey;for(int i 0; i …...

编程日记 2024/7/12 20:46:23

【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展

这里写自定义目录标题 拓展Extention安装方法&#xff08;以双语对照插件为例&#xff09;1、WebUI内置的下载方式&#xff08;推荐&#xff09;2、git clone安装&#xff08;更推荐&#xff09;3、github下载安装包后解压&#xff08;不推荐&#xff09; 强力推荐安装的几个插…...

编程日记 2024/7/12 20:44:20

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…...

编程日记 2024/7/12 20:36:10

SpringMVC系列九: 数据格式化与验证及国际化

SpringMVC 数据格式化基本介绍基本数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 特殊数据类型和字符串自动转换应用实例-页面演示方式Postman完成测试 验证及国际化概述应用实例代码实现注意事项和使用细节 注解的结合使用先看一个问题解决问题 数据类型转换…...

编程日记 2024/7/12 20:35:09

判断链表中是否有环（力扣141.环形链表）

这道题要用到快慢指针。 先解释一下什么是快慢指针。 快慢指针有两个指针&#xff0c;走得慢的是慢指针&#xff0c;走得快的是快指针。 在这道题&#xff0c;我们规定慢指针一次走一步&#xff0c;快指针一次走2步。 如果该链表有环&#xff0c;快慢指针最终会在环中相遇&a…...

编程日记 2024/7/12 20:31:04

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes&#xff0c;jenkins可以实现工作节点的动态调用伸缩&#xff0c;更好的提高资源利用率。通过…...

编程日记 2024/7/12 20:29:02

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…...

编程日记 2024/7/12 20:23:58

Android11 mtk 第二次设置壁纸，锁屏壁纸不变的问题

1、情景：近日测试人员发现第一次更换壁纸后，主屏幕壁纸和锁屏壁纸均会改变；但第二次更换壁纸后，主屏幕壁纸会改变而锁屏壁纸不会改变。 2、要求：主屏幕壁纸和锁屏壁纸军改变 3、解决 路径：****\frameworks\base\services\core\java\com\android\server\wallpaper\Wallp…...

编程日记 2024/7/12 20:22:57

Java学习路线

目录 友情提醒第一章、Java基础1.1&#xff09;第一部分&#xff1a;Java 入门1.2&#xff09;第二部分&#xff1a;Java数组1.3&#xff09;第三部分&#xff1a;Java面向对象1.4&#xff09;第四部分&#xff1a;常用工具类1.5&#xff09;第五部分&#xff1a;集合体系1.6&a…...

编程日记 2024/7/12 20:20:55

java 实现人脸检测

1. 安装必要的库 确保你已经安装了JPEG库、BLAS和LAPACK库。在Ubuntu或Debian系统上&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-get update sudo apt-get install libjpeg-dev libblas-dev liblapack-dev 在CentOS或Fedora系统上&#xff0c;可以使用以下命令安…...

编程日记 2024/7/12 20:14:50

VSCode神仙插件——Codeium (AI编程助手)

1、安装&登录插件 安装过程中会让你登录Codeium账户&#xff0c;可以通过Google账户登录&#xff0c;或者可以注册一个Codeium账户&#xff08;如果没有弹出让你登录账户的界面&#xff0c;可以等安装结束后在右下角找到登录的地方&#xff09; 右下角显示如下图所示&#…...

编程日记 2024/7/12 20:09:47

前端开发者的Rust入门实战：手把手教你用Tauri为现有Vite项目添加桌面端能力

前端开发者的Rust入门实战&#xff1a;手把手教你用Tauri为现有Vite项目添加桌面端能力 当你的Vite项目需要突破浏览器沙箱限制时&#xff0c;Tauri提供了最优雅的解决方案。作为Electron的现代替代品&#xff0c;它允许前端开发者用熟悉的Web技术栈开发桌面应用&#xff0c;同…...

编程新知 2026/3/31 19:33:12

React-Grid-Layout外部拖拽：从零构建可视化编辑体验

React-Grid-Layout外部拖拽&#xff1a;从零构建可视化编辑体验 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout 在构建现代Web应…...

编程新知 2026/3/31 18:46:17

CBF文件：统一刷写流程的密钥与工程实践

1. CBF文件&#xff1a;汽车电子刷写的"万能钥匙" 第一次接触CBF文件是在2018年参与某新能源车厂的项目时。当时产线上几十种ECU&#xff08;电子控制单元&#xff09;需要刷写&#xff0c;每个供应商提供的刷写包格式五花八门——有的用HEX文件&#xff0c;有的用S1…...

编程新知 2026/3/31 18:09:45

kin-openapi版本迁移指南：从v0.x到v1.0的平滑升级

kin-openapi版本迁移指南&#xff1a;从v0.x到v1.0的平滑升级 【免费下载链接】kin-openapi OpenAPI 3.0 (and Swagger v2) implementation for Go (parsing, converting, validation, and more) 项目地址: https://gitcode.com/gh_mirrors/ki/kin-openapi kin-openapi是…...

编程新知 2026/3/31 18:05:37

Zotero中文文献管理终极指南：茉莉花插件一键解决三大痛点

Zotero中文文献管理终极指南&#xff1a;茉莉花插件一键解决三大痛点 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 如果你正在使…...

编程新知 2026/3/31 16:46:23

图解Linux内核DRM框架：从用户态ioctl到plane更新的完整数据流（以4.14版本为例）

图解Linux内核DRM框架&#xff1a;从用户态ioctl到plane更新的完整数据流&#xff08;以4.14版本为例&#xff09; 在图形显示技术领域&#xff0c;Linux内核的DRM&#xff08;Direct Rendering Manager&#xff09;框架扮演着核心角色。本文将聚焦于DRM_IOCTL_MODE_SETPLANE这…...

编程新知 2026/3/31 16:36:19

Android 离线语音合成技术选型指南：从MaryTTS到TensorFlowTTS

1. 为什么需要离线语音合成技术&#xff1f; 最近几年&#xff0c;越来越多的应用开始集成语音合成功能。你可能见过导航软件里实时播报路况的电子女声&#xff0c;或者听书App里流畅朗读小说的AI配音。这些场景背后&#xff0c;都离不开TTS&#xff08;Text-To-Speech&#x…...

编程新知 2026/3/31 15:31:15

Alpamayo-R1-10B实战案例：自动驾驶算法工程师日常调试VLA模型工作流

Alpamayo-R1-10B实战案例&#xff1a;自动驾驶算法工程师日常调试VLA模型工作流 1. 项目概述 Alpamayo-R1-10B是专为自动驾驶研发设计的开源视觉-语言-动作(VLA)模型&#xff0c;基于100亿参数架构构建。这套工具链包含AlpaSim模拟器和Physical AI AV数据集&#xff0c;旨在通…...

编程新知 2026/3/31 15:29:14

跨平台终端与进程控制：从原理到实践

跨平台终端与进程控制&#xff1a;从原理到实践 【免费下载链接】node-pty Fork pseudoterminals in Node.JS 项目地址: https://gitcode.com/gh_mirrors/no/node-pty 在现代软件开发中&#xff0c;终端交互和进程管理是不可或缺的核心能力。无论是构建IDE、开发自动化工…...

编程新知 2026/3/31 15:25:03

终极B站界面美化指南：如何用BewlyBewly插件快速打造个性化体验

终极B站界面美化指南&#xff1a;如何用BewlyBewly插件快速打造个性化体验 【免费下载链接】BewlyBewly Just make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話) 项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly …...

编程新知 2026/3/31 13:51:10