Baidu Web Front-End Technology Institute (abbreviated as IFE) is a front-end training organization jointly produced by the Baidu EFE team and the Baidu Human Resources Campus Recruitment Group, aimed at college students. With the help of Baidu's many excellent front-end engineers and rich front-end knowledge accumulation, it helps students learn web front-end technology more efficiently and systematically.
The Baidu Web Front-End Technology Institute has officially started, and I am fortunate to be a student in the first session of the beginner class, ready to have fun with my classmates!
If you want to learn together but weren't admitted, you can join the group: 438966405
TASK 0001 has been released, with the submission deadline for the beginner class on April 23 and for the intermediate class on April 16.
TASK 0001 content: https://github.com/baidu-ife/ife/tree/master/task/task0001 (Sections 1-6 are set up to accommodate beginners like me, great!)
What I did: https://github.com/DIYgod/ife-work/tree/master/task0001
Online Demo: https://www.anotherhome.net/file/ife/task0001/
This task took a total of 6 days (from April 13 to April 19).
Below are some records from my process of completing TASK 0001.
1. position property (Reference CSS Positioning - W3School, CSS+DIV Layout with absolute and relative)
The position property is quite important, but I didn't understand it well when I read it myself, so I overlooked it. As a result, I encountered inexplicable problems during the task, and it was only with the help of my classmates that I realized it was because I didn't understand the position property.
To summarize in my own words: The position property has four values: static, relative, absolute, and fixed. Static is the default, where the element box is generated normally and appears in the normal flow; relative offsets the element box by a certain distance, while the space it originally occupied is still retained and also appears in the normal flow; absolute removes the element box completely from the normal flow and positions it relative to its containing block, causing the space it originally occupied to disappear; fixed also removes the element box from the normal flow and positions it relative to the browser window.
2. Floating elements and their subsequent non-floating elements filling positions (Reference CSS Float Property)
The situation at that time was as follows: HTML part:
CSS part:
The result had issues:
The yellow C element moved to the next line.
I tried to first let the C element flow to the right and then fill in the B element, that is:
HTML part:
Achieving the expected result:
Reason: The space left by floating elements in the document flow is filled by subsequent (non-floating) elements: block-level elements fill directly, and if they overlap with floating elements, the floating elements cover the block-level elements; inline elements will insert themselves if there is space.
So when adding the C element and then the B element, the B element fills directly into the same line as A and C; when adding the B element and then the C element, since there is no space in the line for the B element, the C element floats to the next line.
3. Negative margin (Reference CSS Layout Tricks - Powerful Negative Margin)
Holy Grail Layout, Double Fly Wing Layout both use the principle of negative margin affecting floating elements, where an element can be displayed in front of another element in the browser even if it is written later, as detailed in the reference, which is very well written.
4. Clearing floats (Reference Those Years We Cleared Floats Together)
When doing the floating layout task, the red container holding the blue square always failed to display. Using F12, I saw that the height of the red container was inexplicably 0, so I referred to the Double Fly Wing Layout code and found that it set an overflow: hidden property on the parent element. I tried adding overflow: hidden to the red container, and the height miraculously adjusted automatically, which I found very confusing.
After guidance from my classmates, I learned that when all child elements have a flow property, it can cause the parent element to have no height, and overflow: hidden has the effect of clearing floats, so adding it allows the parent to regain height (the principle of overflow: hidden clearing floats can be seen in the reference).
At this point, after spending two days, I have completed the content of sections 1-6 of the practical exercises, and the results can be seen here: https://www.anotherhome.net/file/ife/task0001-16/task0001.html
Next is the comprehensive exercise, which looks quite difficult...
5. Positioning of absolute elements (Reference In CSS, why must the parent element of an absolutely positioned element be relatively positioned? - Zhihu)
When writing the navigation bar for question seven, I needed to use absolute positioning, but relative to whom is it positioned? I had never figured this out.
The positioning of an absolute element traces back to its parent element, looking for the first element that is not static, using it as the reference for absolute positioning. If all parent elements are set to static, then the absolute positioning is relative to the body.
So the general practice is to add position: relative to the parent element that you want to use as a reference.
6. The 4px whitespace gap of images (Reference Why does the container div insist on being slightly larger than its content? - StackOverflow)
When inserting the top image, I discovered a very strange issue, as seen in the image:
Image height 500px
Parent height 504px
An extra 4px...
After searching online, it was mostly due to the whitespace gap caused by inline-block elements, but I didn't have any inline-block elements. However, I could eliminate the 4px gap using a similar method, and I solved it by setting the font size of the parent element to 0.
I have simplified the code for the above issue and uploaded it to the server; if you're interested, you can take a look: https://www.anotherhome.net/file/ife/task0001-7_problem/
Update: Thanks to Natural Tsundere, I understand the reason now. The <img> is a default inline element, and when calculating height, the default line-height value (4px) is added.
From StackOverflow:
Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block-level elements, line-height specifies the minimal height of line boxes within the element.
7. CSS Control for Equal Height of Two Columns (Reference CSS Control for Equal Height of Two Columns)
The content is the parent element, with multiple posts as child elements, aiming to keep the height of posts consistent.
This is how I understand it: By using padding-bottom: 10000px, both the margin and padding are increased by 10000px, and then by using margin: -10000px, the padding is decreased by 10000px. Then, when the heights are not equal, the outer margin of the longer element decreases, while the outer margin of the shorter element remains unchanged, achieving equal height.
8. tr border (Reference How to Modify tr Border Properties in CSS)
Setting the border directly on tr in CSS does not work, but if you specify the border on td, there will be a discontinuity.
If you set the border-collapse property on the table at the same time, the border set on tr will appear.
The reason can be found in the reference.
TASK0001 Completed:
Demo for question seven: https://www.anotherhome.net/file/ife/task0001/
Demo for questions 1-6: https://www.anotherhome.net/file/ife/task0001-16/task0001.html
☆ﾐ(o*･ω･)ﾉ Conclusion and waiting for review
After the review, I made modifications and summaries based on the mentor's suggestions as follows:
9. Remove lang="zh-CN" (Reference Should the declaration in the webpage header use lang="zh" or lang="zh-cn"?)
Modification:
Both zh and zh-CN are considered deprecated usages.
I checked websites like Baidu, Taobao, and Weibo, and none of them included the lang attribute, so it can be safely removed.
10. Use h1 tag (Reference Knowledge and Experience of h1 h2 h3 h4 Tags in HTML - DIVCSS5)
Modification:
h1, h2, h3, and h4 tags are often used for unique titles, important sections, and significant headings on a webpage.
Among them, h1 should ideally be used only once on a webpage for the unique title.
It is appropriate to use h1, h2, h3, and h4 tags on a webpage to highlight key parts, which also benefits search engine ranking.
I noticed that Taobao does this as well, wrapping the logo code in an h1 tag.
11. Other modifications
I didn't expect to use a class on the a tag, adding an extra layer of div:
Naming:
Replacing <hr> with border:
"Do not recommend <hr>, use the borders of the upper and lower containers instead. When I don't need this line, I just need to change the style without modifying the HTML."
Using lists like ul li or dl for semantic DOM.