细说Web前端之“二维场景搭建”

前端在没有引入html、css和js之前就是一张空白的浏览器界面白纸。而也正因为引入了html、css和js，这张白纸逐渐发生变化，发生质变。

从白纸变成为五颜六色的水彩画，再从水彩画变为形态各异的动画，再从动画变为在时间上可以感知变化的场景。是的此时的白纸已经不再是一尘不染的白纸而是一个场景，一个可以和人进行复杂交互的场景，这个场景产生了各种事件。

而前端攻城师就是实现这个场景的人。学习前端，就是学会搭建从简单到复杂，从静态道动态，从二维到四维的各种页面场景。

学习新知识最重要的是搞清楚知识的原理。什么是原理？深藏在学科或者知识中央始终不变的逻辑单元就是原理。正所谓道可道非常道，能够说出来的道都是表象的道，是让别人能够理解的道的形态，从根本上讲道没有一个具象的形态。但人要想识别原理是需要人为构建一个表象的道的。不扯太远了，赶紧言归正传。

html、css和js就是在装扮开始说的那张白纸，之后浏览器通过解释器呈现特定属性的网页，那么仅就html和css来讲，二者是怎么去装扮这张白纸的？

要学习html和css关键要掌握以下几点（先不说css的动画内容）：

1，分清楚什么是内联元素，什么是块元素；

2，css盒子模型是怎么回事

3，css有几种选择器以及如何改变样式

4，定位有几种方法

html叫做超文本标记语言，是通过各种标签实现对白纸的装扮。

1，html一共有两种元素：内联元素和块元素；前者在一行显示；后者自动换行；而当内联元素和块元素写在一行时候，则分行显示。内联元素默认情况下不可以通过css设置改变其高度和宽度，默认随着内容的改变而改变，除非改变其display属性才可以通过css改变其宽度和高度。

知道了内联元素和块元素之后，就可以写不管是换行还是不换行的内容了。

2，关于css盒子模型，css盒子模型让标签/元素有了统一的结构，盒子模型不仅适用于内联元素也适用块元素。盒子模型是让元素拥有统一结构。让前端更加精彩，让定位更加科学。

盒子模型

3，css有5种独立选择器：标签、id、类（class）、属性、伪类；之后就是派生选择器，派生顾名思义是独立选择器衍生；比如后代选择器、子选择器和兄弟选择器。具体楼主就不展开说了，可以直接到w3cschool参考。

4，前三条本质上依然再说元素，而只有有了定位，才可以通过改变标签属性或者元素的位置来构建二维场景。那么定位有几种方法呢？

定位主要有以下三种：

（1）、利用元素的position属性直接进行定位。简单高效。

（2）、利用元素自身的属性，比如margin、padding、width、height、display等进行定位。

（3）、利用float进行定位。

总结一下：html和css在没有引入动画之前做的是通过定位将页面元素布局成为想要的二维场景。希望对亲们有帮助。

作者：投稿文章

欢迎加入Web前端学习交流群： 202629850。