My top “eureka” moments while learning CSS

栏目: IT技术 · 发布时间: 4年前

内容简介:There were defining moments in our evolution as a species. Like the moments when we discovered fire, or when we discovered electricity. Exactly like this, we have some breakthrough moments when we learn something new.In its essence CSS is simple. We have s

There were defining moments in our evolution as a species. Like the moments when we discovered fire, or when we discovered electricity. Exactly like this, we have some breakthrough moments when we learn something new.

In its essence CSS is simple. We have selectors and properties that we combine to style our HTML documents.

However, there are still moments when I've felt like I have discovered that missing piece of the puzzle that was explaining why things were not behaving as intended.

So, my main breakthrough moments:

1. The CSS box model:In the beginning, it was not clear to me that if you have an element with width: 100px and border: 5px solid that element will need in total 110px of space. Things like the border, margin, and padding are not included in the width of an element. And we can change this with thebox-sizing property .

2. How CSS deals with conflicting rules:What if we have:

html div p {color: blue}
body p {color: red}

What color our paragraphs will be? The two main principles that are used by CSS to decide the winning rule arespecificity andcascading. Of course initially I was getting frustrated and was using !important all over the place. But getting a grip on how these principles work made writing CSS a more enjoyable experience.

3. Using CSS grid and flexbox:layout is hard in CSS. Maybe the most complicated subject. However, with the addition ofCSS grid and flexbox things got way better. What took before a lot of math and "brainpower" become simpler with these two. You can see here also a way on how to decide when to use the CSS grid and when to use flexbox .

Of course, every learning experience is unique, but for me, these were the things I wished somebody told me when I've started making stuff with CSS.

Cheers and happy learning!

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

蚁群算法原理及其应用

蚁群算法原理及其应用

段海滨 / 科学出版社 / 2005年2月1日 / 48.0

《蚁群算法原理及其应用(精装)》系统、深入地介绍了蚁群算法的原理及其应用,力图概括国内外在这一学术领域的最新研究进展。全书共包括10章,主要内容包括蚁群算法的思想起源、研究现状及机制原理;蚁群算法的复杂度分析;蚁群算法的收敛性证明;蚁群算法参数对其性能的影响;蚁群算法的参数选择原则;离散域和连续域蚁群算法的若干改进策略;蚁群算法在多个优化领域的典型应用;蚁群算法的硬件实现技术;蚁群算法与其他仿生优......一起来看看 《蚁群算法原理及其应用》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具