Boolean Education_Yan Shiba_HTML video resource courseware

"Boolean Education_Yan Shiba_HTML Tutorial" starts from the most basic concepts and goes deeper step by step, leading everyone to learn the basic knowledge of HTML and CSS styles, and understand the meaning and basic usage of various commonly used tags. The second half Part of the tutorial explains how to add CSS style code, laying the foundation for subsequent case courses.

Course playback address: //m.sbmmt.com/course/222.html

The teacher’s teaching style:

The teacher’s lectures are simple, clear, layer-by-layer analysis, interlocking, rigorous argumentation, rigorous structure, and use the logical power of thinking to attract students’ attention Strength, use reason to control the classroom teaching process. By listening to the teacher's lectures, students not only learn knowledge, but also receive thinking training, and are also influenced and infected by the teacher's rigorous academic attitude

The more difficult point in this video is the overflow overflow processing ：

Question raised:
The simplest case is that we include a small, fixed-width p element (such as navigation, reference, etc.) together with other element content A big p. For example, the following code:

<p id="outer">     
  <p id="inner"> <h2>A Column</h2> </p>     
  <h1>Main Content</h1>     
  <p>Lorem ipsum</p>     
</p>

We can set a width value (for example, 20%) for "#inner", but since p is a block-level element, even if we set the width, The content behind it can only be displayed in the next line, unless we set a floating attribute for it (whether it floats to the left or to the right). Then the problem we mentioned above will arise at this time.

This won't be a problem if "#inner" has a smaller width and height than "#outer".

However, if the height of "#inner" exceeds "#outer", then the bottom of will exceed the bottom of "#outer". This is because after we set the float attribute for "#inner", it will break away from the text flow, and no matter how its width and height change, "#outer" will not follow the changes.

Example 1: Layout performance when floats are not cleared
In this example, because the height of "#inner" is smaller than "#outer" at first, there will be no problem, but when you click "Extend" "After that, you will find that the bottom edge of "#inner" has exceeded the range of "#outer", but "#outer" has not changed. This is the "clear float (closed float element)" or "close float" problem we mentioned

Solution:
1) Additional tag method
The first one is also recommended by W3C The best way is to use additional tags. This method is to add an empty tag at the end of the content. The typical method is to use something like

<br style="clear:both;" />

or use

<p style="clear:both;"></p>

to add an HTML element. Forcing the outer container to open. However, this method will add additional tags and make the HTML structure look less concise.

Here we also recommend downloading materials: //m.sbmmt.com/xiazai/learn/1857

1. lionhit

2. minilionhit

3. ##xhtml

The above is the detailed content of Boolean Education_Yan Shiba_HTML video resource courseware. For more information, please follow other related articles on the PHP Chinese website!