CSS

Summary 设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。 ...

响应式设计的历史和思路： 媒介查询的入门 与或非等语句 传统的布局方法 尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。

Summary 这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。 ...

Summary 这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西 ...

Summary 表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性 ，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。 css table{ table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } 当为表格设置初始样式的时候，使用 layout 为 fixed 会使得表格的行为更好预测，避免由于内容产生的畸变导致难以设置或者出现一些奇怪对齐情况，使用 fixed 然后设置每一列的宽度，在对内容进行处理可能更好。 使用 nth-child 设置每一列的宽度，最终相加为 100%，使得在不同分辨率下比较好控制。 border-collapse: collapse; 原本两个格子之间会有两条边线，这样的话可以合并重叠的边线，让表格更符合我们的预期。 使用 text-align 设置对齐方式 使用 thead，tfoot，tbody 来分别设置样式，可以做出类似三线表之类的东西 为标题 caption 设置对应的样式 后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。 ...

Summary 该篇章主要收集一些常见的样式设置的参考页和一些需要记住的重要设置内容，由于不可能记住所有的属性和设置，善用查询可能才是唯一的王道。 CSS 中的值与单位 CSS 中的值与单位 这里介绍常见的一些值和单位，有一些新的可能会有所缺失，但是大部分都有了，这里可以列举几个常见但是之前不理解的。 ...

Summary HTML 和 CSS 中，所有的元素都是基于一个个的 Box 去渲染的，理解盒子模型的设计，才能知道如何进行布局，从而使的页面按照希望的样子呈现，该定义实际上和 HTML 的块级元素和内联元素使完全相对应的。需要注意两者之间的关联性。 ...

Summary 本章节是额外对于优先级的补充章节，在使用上可能会没有明显的感知，但是从概念上理解 CSS 的优先级和后续复杂项目的开发中还是起到了比较大的作用，该章节介绍层叠层的概念，在原先的优先级判定上添加了层的概念。 层叠概念回顾 该 Section 内容完全摘录自 MDN CSS 教程，也算是对于整体重要性和优先级的一个很好的总结。 ...

Note 你永远无法记住所有的 CSS 属性，善用参考资料：MDN CSS reference 和 GPT 善用浏览器的开发者面板在页面上及时编辑 CSS。 CSS 运行逻辑 前面在 LearnWeb00-Web入门 中简单提及了浏览器以及 CSS 起了什么作用，这里则是对于 CSS 是如何具体参与进页面的渲染的讲解，包括早该知道的 DOM 的定义也会在这里介绍，是 CSS 是如何运行 的读书笔记。 ...

Summary 在前文 web 入门中已经简单介绍了 CSS 是如何起作用，如何与 HTML 进行相互合作的，本篇主要简单介绍如何编写 CSS 文件中的各种样式。 ...