很多时候，网页上的某些元素，是需要给它设定宽度和高度的，比如一张图片，一般情况下使需要给它给定一个具体的宽度和高度的，这样浏览器在解析你的网页代码时，看到你代码中设定的宽高，就会直接按你的宽高去"绘制"网页，否则，浏览器就会自己去计算你这个网页中的这个图片的宽高，计算完才会去"绘制"网页，这样多了一个计算宽高的步骤，就会影响网页的渲染(绘制)速度，作为一个开发者，不是说仅仅把产品开发出来就算大功告成，你的产品一定要追求极致体验，这样用户才会乐意去使用。假如用户访问你的网站时，网页打开速度很慢，他很可能就会失去耐心，很可能关闭你的网站，这样不就造成用户流失了吗？
当然这是产品层面的思维和意识，在这里我们不去多讲。
我们还是回到css的知识，css是用来修饰网页的，前面说到网页中的元素一般需要我们给定宽高，这个宽度和高度就需要在css里面去写。
无论是宽度还是高度，都属于长度，既然是长度，就有长度单位，比如公里、米、分米、厘米、毫米等。
css中的长度单位主要有3种：
px、em、rem
css中最常用的长度单位是px。
我们还是在my first html.html这个文件中的代码的基础上进行举例。
如上图所示，我们有一个p元素，这个p元素的内容是"你好！"。
我们之前并没有给它设定宽高，现在我们在css里面给它设定宽高。
在css中，宽度是英文width，高度是英文height，所以给这个p元素设定宽高的css这样写：
#hello{
width:100px;/*宽度、高度可以根据自己的需要进行设定*/
height:50px;
color:green /*这个color是之前写的*/
}
为了方便查看和调整html元素的样式，我们可以给一个html元素的css中加上边框属性，包括边框的颜色、边框的样式、边框的粗细。代码如下：
#hello{
width:100px; /*宽度、高度可以根据自己的需要进行设定*/
height:50px;
color:green ; /*这个color是之前写的*/
border-width:1px; /*边框的宽度，也就是粗细*/
border-style:solid; /*边框的风格，实线是solid，虚线是dottedd*/
border-color:red; /*边框的颜色，红色*/
}
我们在vscode中这样写一下，如图：
我们保存代码，在浏览器中看看这个网页的效果，如下图：
我们看到，红色边框和里面的"你好！"就是我们给id为hello的p元素写的css代码的效果。这个p元素就按我们设定的宽度为100px，高度为50px在浏览器中显示。
实际上，边框的属性可以简写成一行，即：
#hello{
width:100px
height:50px;
color:green；
border:1px solid red
}
大家可以自己试下，按上面的简写形式，在浏览器中的效果是一样的。
以上是关于css中的长度单位px的介绍，
关于px、em、rem，如果你要做前端工程师，就必须要清楚这三个长度单位的区别和用法。但是我们是学习Python，是用Python去解决相关问题，所以就对前端的东西有一些基本了解即可。
所以我们现在只需要知道，在给html元素设定宽高时，长度单位用px就行了。至于em和rem的用法以及它们和px的区别，就不具体展开了，这涉及到计算机和手机的屏幕分辨率知识、不同浏览器的兼容性知识、px和em、rem之间的换算等等，所以在这里不去深入这几个知识点，这几个知识点主要是前端工程师的工作必须要懂，我们不做前端工作的话，不懂也没什么影响。
庄子曰："吾生也有涯，而知也无涯。以有涯随无涯，殆已!"
人生是有限的，但知识是无限的(没有边界的)，用有限的人生追求无限的知识，是必然失败的。
连2000年前的古人都感叹知识无限、人生有限，何况今天的我们呢？我们今天的知识量比古代多几十万倍应该都不止。
前端的知识体系也是非常庞大的，所以我们要明确目标，有选择性的学习。
我们的目的是学习Python，至于前端，以后想往前端方向发展或者有机会去做前端领域的话，再去深入也不迟。
不管你是初中生、高中生、还是没毕业的大学生、或者是非it互联网行业的职场人士，其实都可以从Python入手，学一点编程以及计算机知识。
乔布斯就说过，每一个人都应该至少学一年的编程，这样会帮助你建立一种新的思考问题和认识世界的方式。
不是说学Python就一定是为了去当程序员，而是说，在如今的互联网+时代，编程已不再是程序员、工程师的专属技能，通过学习它，能给你的未来增加一种可能性和选择性以及个人竞争力，Python作为最贴近人工智能的编程语言，可能是你通往未来世界的工具，也可能会给你的人生带来新的机遇。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
