CSS学习


CSS学习

引言

参见

https://mp.weixin.qq.com/s/U8oI7n1xch89QvERdQMjUA

内容一

一、CSS是什么, 它从哪来?

想象一下, HTML就像是一个人的骨架, 它决定了网页的结构——哪里是头, 哪里是身体, 哪里放按钮. 但光有骨架可不行, 看起来太吓人了! 这时候就需要CSS来当”化妆师”, 给网页穿上漂亮的衣服.

CSS全称是Cascading Style Sheets(层叠样式表), 简单说就是一套给网页”化妆”的规则. 比如: 

<!--这是HTML -->
<p>我是普通文字</p>
<p class="fancy">我是fancy文字</p>

<!--这是CSS -->
<style>
  .fancy {
    color: pink;
    font-size: 20px;
    text-shadow: 2px 2px 4px #000;
  }
</style>

二、CSS的核心概念

2.1 选择器

选择器就像化妆时的”定位工具”, 告诉浏览器你要给谁化妆. 常见的有:

1）标签选择器:

p { color: blue; } /*所有<p>变蓝色*/

2）类选择器:

.warning { color: red; } /*class="warning"的元素变红色*/

3）ID选择器:

#header { height: 60px; } /*id="header"的元素高度60px*/

4）后代选择器:

nav a { text-decoration: none; } /*nav里的所有<a>去掉下划线*/

5）伪类选择器:

a:hover { color: orange; } /*鼠标悬停时<a>变橙色*/

2.2 盒模型

在CSS眼里, 每个元素都是一个盒子, 由内到外分别是:

内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)

用代码表示:

.box {
  width: 200px;         /*内容宽度 */
  padding: 20px;        /*内边距 */
  border: 5px solid;    /*边框 */
  margin: 10px;         /*外边距 */

  /*实际占用宽度 = width + padding*2 + border*2 + margin*2 
                 = 200 + 40 + 10 + 20 = 270px */
}

用box-sizing: border-box可以让width包含padding和border, 计算更直观:

.box {
  box-sizing: border-box;
  width: 200px;  /*现在200px包含content+padding+border */
  padding: 20px;
  border: 5px solid;
  /*实际内容宽度 = 200 - 40 - 10 = 150px */
}

2.3 层叠与继承

当多个样式规则作用于同一个元素时, 浏览器会根据以下规则决定用哪个:

1、来源优先级(从高到低)

用户标记为!important的样式.

开发者标记为!important的样式.

开发者写的普通样式.

用户设置的普通样式.

浏览器默认样式.

2、选择器权重:

行内样式(style属性) : 1000.

ID选择器: 100.

类/伪类/属性选择器: 10.

标签/伪元素选择器: 1.

通配符(*): 0.

3、书写顺序: 后写的覆盖先写的

/*权重计算示例 */
#nav .item { color: red; }   /*100 + 10 = 110 */
div#nav .item { color: blue; } /*1 + 100 + 10 = 111 (胜出) */

继承则是指某些样式会从父元素传递给子元素, 比如font-family、color等.但不是所有属性都能继承, 比如border、margin就不会.

三、现在CSS核心特性

1）Flexbox弹性布局:

.container {
  display: flex;
  justify-content: center; /*水平居中 */
  align-items: center;    /*垂直居中 */
  gap: 10px;              /*子项间距 */
}

.item {
  flex: 1;  /*自动伸缩 */
}

2）Grid网格布局:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /*三列，中间列是两倍宽 */
  grid-template-rows: 100px auto;
  gap: 15px;
}

.header {
  grid-column: 1 / 4; /*跨3列 */
}

3）CSS变量:

:root {
  --main-color: #4CAF50;
  --padding: 15px;
}

.button {
  background: var(--main-color);
  padding: var(--padding);
}

4）动画:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: bounce 1s infinite;
}

四、浏览器如何渲染CSS

4.1 关键渲染路径

当浏览器加载网页时, 会经历以下步骤:

解析HTML -> 构建DOM树.

解析CSS ->构建CSSOM树.

合并DOM和CSSOM -> 形成渲染树(Render Tree).

计算布局(重排/回流) -> 确定每个节点的位置和大小.

绘制(重绘)->把元素画到屏幕上.

4.2 重排(reflow)与重绘(repaint)

重排: 当元素几何属性改变(宽度、位置等), 浏览器需要重新计算布局

重绘: 当元素外观改变但不影响布局(颜色、阴影等), 只需重新绘制

4.3 浏览器引擎差异

不同浏览器使用不同的渲染引擎:

Chrome/Safari/Edge: Blink（Chrome）、WebKit（Safari）

Firefox: Gecko

IE: Trident

这导致了著名的”浏览器兼容性”问题. 解决方法:

/*原始代码 */
.box {
  display: flex;
}

/*处理后 */
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}






参考资料

CSS基础入门 https://mp.weixin.qq.com/s/U8oI7n1xch89QvERdQMjUA

返回