前端上手小记

从高中做个人主页开始,就接触了些 HTML、JavaScript ,最早用 FrontPage 所见即所得制作页面,后来又是在开源框架或模版文件上修改,一直没正式上手前端开发。

有一些产品想法,迫于没有技术,实现不了。为了掌握一门硬技术,前不久开始正式专攻 Node.js,学习了一个叫 AdonisJS 的框架。做项目的过程中,发现前端知识还是跟不上,正好腾讯课堂给推了前端课程的广告,就完整地学了一遍。今天仿了一版百度的静态首页,用了2小时,基本算成功,暴露出来的问题是对于 CSS 定位和浮动还不太熟练。接下来准备仿淘宝的首屏。

在这之前,计划先看一遍 Bootstrap 源码。首先要记录的一个知识点是box-sizing

box-sizing

语法:box-sizing: content-box | border-box | inherit;

CSS 盒子模型默认总的宽度和高度需要加上 paddingborder 的值。设置为 box-sizing: border-box; 后,盒子总的宽高会固定为 widthheight 的值,实际的宽高则会随着 paddingborder 的值而自适应,这样更符合人类直觉。

在 Bootstrap 中,将伪元素设置为了这个值。

[code language=”plain”]*,
*::before,
*::after {
box-sizing: border-box;
}
[/code]

发表评论

电子邮件地址不会被公开。 必填项已用*标注