css3 - 关于CSS核心技术关键字都有哪些？

Question

问题描述 本人整理了一部分关于CSS技术相关的关键字，希望能够得到更多的补充，现邀请大家一起来关注这个话题。 CSS 技术关键字 元素 替换元素 非替换元素 行内元素 块元素 行内块元素 嵌套规则 选择器 选择器权...

巴扎黑 · Answer

On September 1st, the classification of concepts was updated

I see that in your categories, there are properties and values in CSS2.1 and CSS3 standards, as well as basic concepts such as BFC, compatibility related content, performance and tuning, and code specifications and preprocessing. Listing all of these is a bit overwhelming.
The topic can be big, but the entry point must be small. (Otherwise it will only delay indefinitely, such as my "font typesetting on the front end"...

Let me sort out the standards for you first.
Specifically, borrow the skeleton of the CSS2.1 standard and fill in some new CSS3 standards. Otherwise, once the CSS3 modules are filled in, the tree will be too huge.

HINTS

The classification of replaced elements and non-replaced elements is within the scope of CSS, and other categories are not defined by CSS.
The definition of replaced elements and non-replaced elements is based on "I don't care about your content." "The style of the area" is considered.
Inline elements, block elements, and nesting rules belong to the semantic categories defined in HTML. Specifically, the distinction between inline elements (tags) and block elements (tags) only stays at the HTML4 stage, and HTML5 has long abandoned this classification method.
The separation of style and content is reflected in the fact that when we talk about elements, we refer to a specific tag or a type of element; and when we talk about "inline blocks", we refer to display: inline-block.
Don’t juxtapose inline block elements with inline elements and block elements (especially these two concepts are outdated), let alone inline block elements and replacement elements. They are not the same category.
Compatibility classification method, it is recommended that you refer to w3help
Before you have sufficient understanding of the standard, it is not recommended to try to organize compatibility issues. Compatibility issues themselves are the product of deviations from standards or the absence of standards. It is difficult to organize systematically.
As for the layout standard classification method, you can refer to kejunz’s arrangement.
Of course the article is from 2012 and is a bit out of date. You can take a look at which standards have reached a new stage (for example, flex has overhauled its grammar)
Don’t use too many CSS tricks.
There are actually a lot of CSS code specifications, not only the more extreme specifications such as oocss, but also the compromise usage in various projects.
It’s just that CSS is still introduced globally after so many years, and most code standards are inevitably being patched. It’s too early to sort this out.
Distinguish between layout mode and applications based on layout mode
For example, the grid system is not considered in the current CSS specification, but you can use CSS to make the grid system. Therefore, it is not recommended to classify "traditional layout" - "modern layout", which is not the same level.

天蓬老师 · Answer

First of all, thank you for the invitation...

I looked at a few things mentioned in the question, and then thought about it, what are the so-called CSS core technology keywords?

At first glance, I thought it was some things in CSS properties. Then when I looked at the questions involved, it seemed that many of them were derived things, and then many of them were the names or units of CSS properties, so I was a little bit I'm confused and don't know what the questioner wants.

Here are a few URLs, I hope they can give some reference to the subject:

http://www.w3.org/Style/CSS/current-work
http://www.chinaw3c.org/glossary-sc.html
https://docs.webplatform.org/wiki/css/zh
https://developer.mozilla.org/zh-CN/docs/Web/CSS

Before submitting the answer, I looked back a few times and felt that there was something wrong with the classification of the question.

Box Model

IE non-standard box model
W3C Standard Box Model

The box model here, if you consider the previous browsers, it seems to be called "weird mode" or another name, I forgot, and then standard mode. Then if we include the attribute box-sizing now, I don’t even know how to call it, border-box, content-box and padding-box which seems to be not very supported yet...

Sorry for the confusing answer...

阿神 · Answer

Thank you for your attention. This keyword classification I made on a whim at that time can be regarded as all the knowledge points I have encountered since I came into contact with CSS. However, I have never done the architecture of a large website, and the projects I have done have applied CSS. It only stays at the simple level of expression, so the way to understand CSS has always been how to use it and how to use it to solve current problems; it has never been understood according to the properties and characteristics of CSS itself.

At present, @Humphry has a new classification of this technical keyword, and has new thinking and understanding of CSS through reading. I recommend everyone to read - "Grammar and Concepts in CSS"

高洛峰 · Answer

This user has been blocked, reason: Posting a large amount of promotion (recruitment, advertising, SEO, etc.) content
The author can apply to unblock the account and all content will be displayed again.

伊谢尔伦 · Answer

People who are not majoring in science and don’t like reading said they like this kind of summary type, which is very good:)

PHP中文网 · Answer

I am learning CSS recently, thank you

天蓬老师 · Answer

There is a lot of css information, I think this can meet your requirements, you can take a look:
http://www.hubwiz.com/course/54d1cae088dba03f2cd1fec1/

PHPz · Answer

Mark it, it is very useful for novices to review the overall knowledge system and check for omissions.