css理解

网页样式和布局：CSS（层叠样式表）是一种用于描述HTML元素在网页上呈现的样式和布局的语言。通过学习CSS，我们可以使网页看起来更加美观、易于使用，为用户提供更好的体验。
1. 设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能帮助我们针对不同的设备（如桌面电脑、平板电脑、手机等）和浏览器（如Chrome、Firefox、Safari等）优化网页样式，确保在各种环境下都能提供一致的用户体验。
2. 网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。这对于用户体验和搜索引擎优化（SEO）都非常重要。
3. 动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。这样可以减少对JavaScript的依赖，提高网站性能。
4. 响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。这对于提高网站在移动设备上的用户体验和适应性至关重要。
5. 提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。通过组织良好的样式表，我们可以在多个页面之间重用样式，减少重复劳动，提高开发效率。
6. 前端开发的基本技能：CSS是前端开发的三大基石之一（HTML、CSS和JavaScript），掌握CSS是成为一名合格的前端开发人员的基本要求。学习CSS可以为我们打开Web开发领域的大门，为我们的职业发展提供更多机会。

难点笔记：

改变屏幕尺寸时调整字体大小

/* 默认字体大小 */
body {
  font-size: 16px;
}

/* 当屏幕宽度大于等于768像素时，字体大小增加到18px */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

针对不同的屏幕尺寸更改布局：

/* 默认布局：单列布局 */
.container {
  width: 100%;
}
.column {
  width: 100%;
  margin-bottom: 20px;
}

/* 当屏幕宽度大于等于600像素时，改为双列布局 */
@media screen and (min-width: 600px) {
  .column {
    width: calc(50% - 20px);
    margin-right: 20px;
    float: left;
  }
}

/* 当屏幕宽度大于等于900像素时，改为三列布局 */
@media screen and (min-width: 900px) {
  .column {
    width: calc(33.333% - 20px);
  }
}

/* 清除浮动 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

针对高分辨率设备（如 Retina 屏幕）提供高清图像：

/* 默认情况下使用低分辨率图像 */
.logo {
  background-image: url('logo-lowres.png');
}

/* 当设备像素比大于等于2时（例如 Retina 屏幕），使用高分辨率图像 */
@media screen and (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo-highres.png');
  }
}

使用媒体查询的一些Tips
1. 媒体查询同样遵循cascading层叠覆盖原则，min-和max选择一个
2. 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
3. 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

cascading层叠覆盖原则

Cascading 层叠是 CSS (Cascading Style Sheets) 中的一个核心概念。层叠规则定义了当一个 HTML 元素的样式从多个来源（如内联样式、外部样式表、浏览器默认样式等）发生冲突时，如何确定哪个样式应该优先应用。

层叠规则主要遵循以下原则：

重要性（Importance）：!important 标记的样式规则具有更高的优先级，会覆盖其他没有标记 !important 的样式规则。如果有多个 !important 规则冲突，将按照下面的规则进行判断。

选择器优先级（Specificity）：选择器优先级是根据选择器的复杂程度计算出的一个权重值。具有更高优先级的选择器定义的样式将覆盖具有较低优先级的选择器定义的样式。优先级的计算规则如下：

内联样式（style 属性）优先级最高，计为 1000。

每个 ID 选择器（如 #example）计为 100。

每个类选择器（如 .example）、属性选择器（如 [type="text"]）或伪类（如 :hover）计为 10。

每个元素选择器（如 h1）或伪元素（如 ::before）计为 1。

通配符选择器（*）、关系选择器（如 +, >）和否定伪类（如 :not()）不增加优先级。

如果优先级相同，则遵循下面的源顺序规则。

源顺序（Source order）：在样式表或文档中后定义的样式规则会覆盖先前定义的相同优先级的样式规则。换句话说，越靠后的规则会覆盖越靠前的规则，前提是它们具有相同的优先级。

CSS相关知识理解 ｜ 青训营

css理解

难点笔记：

CSS相关知识理解｜青训营