css 曲线边框_学习CSS你需要知道的事！

首先声明！我目前也是css的学习者，写的博客并没有那么的完整。我只是将我所学习到的总结出来，分享给还没有开始学和准备开始学css的同学。有写得不对的地方欢迎帮我在评论区总结出来！文章仅供参考！

NO:1 浏览器渲染原理

在学习css之前首先我们需要大概的知道浏览器是如何渲染页面。了解了浏览器的渲染大致原理这样更有力与我们学习css。注意：这里并不是讲浏览器的底层原理或前端性能优化具体细节，而是浏览器对于页页面的渲染。

首先，当用户在浏览器输入一个URL（也就是网址）地址的时候，浏览器会先进行DNS查询，和进行TCP连接，并向所连接的服务器发出HTTP请求及响应。当服务器收到了来至浏览器的请求之后会将相关的文件发送给浏览器，列如“html、css、JavaScript”等相关的文件。

• 从耗时的角度上面来讲浏览器主要会吧时间花在以下五件事上：

1. DNS 查询
2. TCP 连接
3. HTTP 请求即响应
4. 服务器响应
5. 客户端渲染

当浏览器收到了来自服务器传输过来的文件时就已经开始了页面渲染等工作。

不同的浏览器渲染内核不一样，所以过程也略有不同！

• 通过上图我们可以基本的分析出浏览器的渲染过程：

1. HTML解析出DOM Tree
2. CSS解析出Style Rules
3. 将二者关联生成Render Tree
4. Layout 根据Render Tree计算每个节点的信息
5. Painting 根据计算好的信息绘制整个页面

通过以上 我们可以了解到浏览器大致工作渲染流程。浏览器渲染是一个非常繁琐的过程，里面每一步都有相对应的算法和公式，浏览器更深层的奥秘不是我一个初学者所能悟透的。

---

NO:2 盒子模型(Box Model)

盒模型是CSS的基础，同时也是我觉得相对于初学者较难的一点。从几个前辈口里得知，盒模型在面试过程中很容易被问到。所以盒模型也要列为重点。

在HTML当中所有的元素都可看做成一个Box(盒子)，在CSS当中“box mode”这一术语就是用来设计和布局使用的。

CSS盒模型本质看上去就是一个盒子，用来封装周围的HTML元素，它包括：边距、边框、填充、和实际内容。盒模型允许我们在其他的元素和周围元素边框之间放置其他的元素。

盒子模型(Box Model)布局

• 盒子模型主要组成：

1. Margin(外边距) - 清除边框外的区域，外边距是透明的。
2. Border(边框) - 围绕在内边距和内容外的边框。
3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4. Content(内容) - 盒子的内容，显示文本和图像。

以上即是盒子模型的介绍，想了解更深层的盒子模型的话可以查其他前辈专门针对盒子模型写的文章。

---

NO:3 CSS 动画属性

在CSS当中 可以创建动画来取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

• 在了解css动画之前我们要先知道什么是“css动画”。

css动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数。

css动画属性：transition

• 语法

Transition:属性名 时长 过渡方式 延迟;
列如：transition:left 200ms linear
属性名可以写宽和高，all可以代表所有属性名就是代表款和高。
可以以逗号分隔不同的属性。

• transition 属性设置元素当过渡效果，四个简写属性值为：

transition-property （指定CSS属性的name，transition效果）
transition-duration （transition效果需要指定多少秒或毫秒才能完成）
transition-timing-function （指定transition效果的转速曲线）
transition-delay （定义transition效果开始的时候）

css动画属性：animation

• 语法

animation:属性名 时长 过度方式 次数 方向 填充模式 是否暂停；

@

浏览器在识别到@keyframes里面的值后会执行0%的时候该做什么，66.6%的时候该做什么100%的时候该做什么，按照顺序依次执行。
时长：1s或者1000ms。
过度方式：跟transiion取值一样。
次数：循环3次或者infinite（无限次）。
方向：Reverse(反向)|alternate(交替，来回反复)|altrnate-reverse（从尾端开始来回反复）。
填充模式：forwards（到终点不回到起点）|backwards（把动画开始的第一帧复制到开始的位子）。
是否暂停：paused（是否暂停）|running（恢复）。

---

以上就是我列出来的学习CSS很多同学容易忽视的三点，写得不是很完整要是感兴趣的同学可以专门针对每一点去学习。

如果觉得本篇文章对你有帮助欢迎点击下方地址查看更多的前端学习笔记！

荏狸十三的GitHub主页​github.com 荏狸十三的知乎主页​www.zhihu.com