Home > Developer > JavaScript
Familiar with html css layout models and htmlcss layout models
The most difficult part of HTML is coming! I have repeated this many times, including writing a blog now. It is also a kind of review for myself. I am afraid I can't understand it very well, because I still cannot express what I have learned in an accurate and easy-to-understand way, so I can take a note of it for myself. I will try another 1.1-point change later. You can check it out for new users, it should be helpful for beginners.
CSS layout modelAll of the following are some of my understanding of HTML. If you have any mistakes, please correct them. I will also change it. Because I learned it all by myself, I can only cross the river by feeling the stones. Thank you.
In my opinion, the CSS layout model is the same core concept as the box model, but the layout model relies on the box model. It is not an accurate layout style or layout template, in other words, the CSS layout model is what you see externally, and you can understand it without reading a book, but you need a lot of exercises,
There are three main layout models:
1. Flow Model)
2. Float Model)
3. Layer Model)
The flow model is the default webpage Layout mode. By default, HTML webpage elements in a webpage are distributed based on the flow model.
Features: block elements are vertically distributed from top to bottom in the contained element, because by default, block elements are 100% in width, in fact, block elements occupy positions in the form of rows, while inline elements are displayed horizontally from left to right in the contained elements, this is basically equivalent to a summary of the features of the previous block-level elements and inline elements.
Floating ModelIn my understanding, the floating model breaks all the rules of Flow. It no longer follows all the rules of the Flow model, and re-layout block-level elements and embedded elements in a custom way. by default, they are not floating, but can be defined as floating. You only need to add the float attribute to the CSS style sheet. Sample Code:
Div {
Float: left;
}
This statement sets the <div> block-level element to the left floating. At this time, the block-level element does not have the exclusive row of block-level elements, the element width and so on. That is, when it is set to float, the block-level and embedded features will disappear.
Layer Model (one day)In my opinion, the layer layout model is like multiple overlapping layers. You can use code to precisely control the positions of each level. css positions a set of positioning attributes to support the layout model, I have not fully understood this, so I just want to give a brief description. If you are interested in Baidu and Baidu, you may go to view others' blogs. My personal understanding is not as good as that of others, you can only write a learning note for yourself.
Three Forms of Layer Model:
1. absolute position (position: absolute)
2. position: relative)
3. fixed position (position: fixed)
1. Absolute PositioningIn the following example, we don't need to use the rigorous language in books. I will give you my own understanding. The absolute meaning is that one level is placed on another level, that is, one layer is placed on the other, the precise coordinates of the Child level above the parent level are absolute positioning. give it an absolute value so that it will not be moved. Similarly, the parent level will move, and the child level will also move, that is to say, these two relative levels are pinned down with absolute layout, and you can just tap it. at the same time, let's give you a level of concept. The <body> contains various blocks, such as <div>, so a <div> can be understood as a level, if you set and absolutely locate the <div> attribute, <div> and <body> are pinned down, and <div> has a <p>, <p> also sets absolute positioning. At this time, the <p> level is relative to <div>, <div> dynamic, <p> it will also follow in <div>. In summary, this is the absolute positioning!
Sample Code
Div {
Width: 200px;
Heigth: 300px;
Border: 2px red solid;
Position: absolute;
Left: 100px;
Top: 50px;
}
P {
Position: absolute;
}
In this case, if <p> is an <div> internal tag, <p> relative <div> is locked. At this time, we modify the p style sheet, modify the position of p in the layout. For example, you can use the box model to modify the outer spacing, modify the layout of p in the div, and then modify the layout of the div. You will find that the level of p is still on the div, it's stuck together. this layout should be the most commonly used.
2. Relative positioningRelative positioning is to first float this level, similar to the float mode, and then determine the level of this level by setting the left, right, top, and bottom attributes compared to their original location, however, this layer is essentially still there, so it can be understood that the visual view is a projection, and it is still there, therefore, relative positioning does not affect the layout of other position elements, because it is floating independently. this is not easy to understand. You need to write and practice more on your own. I think this layout should be a very common animation or a pop-up window? I'm not sure.
3. Fixed PositioningThis is a good explanatory effect. I usually look at the small advertisements on the website. What's in the lower-right corner? If you move the screen, he will be there. If not, the effect will be fixed, its positioning does not follow the layout, but follows the relative browser. strictly speaking, its relative moving coordinates are the webpage window itself. because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen, or change the display size of the browser window, therefore, the fixed positioning element will always be located at a certain position in the browser window and will not be affected by the flow of documents, which is consistent with the background-attachment: fixed orientation (defining the way the background image moves along the scroll axis) the property functions are the same. this is not much to mention. Just like the relative positioning, just write more.
These three positioning methods can be used together. For example, the parent element can be used for absolute positioning, and the child element can be used for relative positioning. The layout can be very flexible, the second time will be better, and the third time will basically be able to understand. It is also the principle that I have learned things. It can be learned only when I have to learn things three times.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
