Home > Developer > Web Develop
HTML the hardest place to come! This I repeated many times, including now blogging, but also for me is a kind of review, I am afraid that I can not write a very understood, because I am not able to learn the accurate and easy to understand the expression of their own notes, and then to 1.1 points of change, novice can see, For beginners This piece of people should still be a little help.
CSS Layout modelThe following is a personal beginner of the HTML of a little understanding, where the wrong welcome to correct, I will change, because the whole study, can only stones, please the Great gods.
CSS layout model In my opinion is the same as the box model of the core concept, but the layout model is based on the box model, it is not the exact meaning of layout style or layout template, and then the popular point, the CSS layout model is external to see the appearance, and he is not you read reading can understand, but need a lot of practice,
There are three main types of layout models:
1, flowing model (flow)
2, floating model (float)
3, layer model (layers)
Flow model, is the default page layout mode. Web pages in the default state of HTML page elements are based on the flow model to distribute the content of the Web page.
Feature: The block element will spread vertically from top to bottom in the containing element, because, by default, the width of the block element is 100%, in fact the block elements occupy the position in the form of rows, and the inline elements are displayed horizontally from left to right within the containing element in which they are located. This is basically equivalent to a summary of the attributes of the preceding block-level elements and inline elements.
Floating modelFloating model in my understanding that is breaking all the rules of flow, it no longer follows all the rules of a mobile model, and re-layouts block-level elements and inline elements in a custom way. The default is non-floating, but can be defined as floating, just need to add float to the CSS style sheet property, code example:
div{
Float:left;
}
This means that the <div> block-level element is set to the left float, this time the block-level element also no longer have the block-level elements of the exclusive row, element width and so on, that is, when set to float the moment, block-level and embedded features are gone.
Layer model (This can be said one day)Layer layout model In my opinion is like multiple overlapping hierarchies, you through the code to the location of each level of precise control, CSS positioning a set of positioning properties to support the layout model, this I myself understand is not so thorough so simply say, we are interested to Baidu Baidu to see other people's blog, My personal understanding is necessarily inferior to others, can only say to write a study note to oneself.
Three types of layer models:
1, absolute positioning (Position:absolute)
2, relative positioning (position:relative)
3, fixed positioning (position:fixed)
1, absolute positioningThe following completely without the strict language of the book, with my own understanding to everyone said, the absolute meaning is that one level on the other level above, that is, a piece on another piece, sub-level in the parent level above the exact coordinates is absolute positioning, give it an absolute value so that he will not move, the same, the parent level moved, The sub-level will also follow, that is to say, the two relative levels with the absolute layout of the tethered, learning this you will be hard to knock on the line. At the same time give everyone a bit of the concept of hierarchy, <body> there are various blocks, such as <div>, then a piece of <div> can be understood as a level, you set the <div> properties, absolute positioning, then <div > and <body> Bolt dead, the same <div> there is a <p>, <p> also set absolute positioning, this time the <p> level is relative <div>, <div >, <p> will also be in the <div> obediently follow the walk, comprehensive, this is the absolute positioning!
code example under
div{
width:200px;
heigth:300px;
BORDER:2PX Red Solid;
Position:absolute;
left:100px;
top:50px;
}
p{
Position:absolute;
}
At this time <p> is the <div> internal tag, <p> relative <div> has been locked, so this time we modify the p style sheet, modify the position of P in the layout, such as the box model to modify the outer space, Modify the layout of P in the Div, and then modify the div layout, you will find that the level of P will also be on the div, tightly trapped together. Feel that this layout should be the most common.
2, relative positioningRelative positioning the first is to float this level, similar to float, and then by setting the left, right, top, bottom properties to determine the level compared to their original position, but this level is essentially there, it can be understood as a visual to see a projection, It's still there, so the relative positioning doesn't affect the layout of the other location elements, because it floats alone. This is not very good understanding, we need to write more practice. Feel like this layout should be the kind of animation or something very common, or pop-up window? I'm not sure, I don't dare to say it.
3, fixed positioningThis good explanation effect, usually look at the website those small ads, the right bottom corner what, you paddled the screen, he is there, flattening out, this effect is fixed positioning, its positioning is not follow the layout, but follow the relative browser to go. Strictly speaking, it is the relative movement of the coordinates of the page window itself. Because the view itself is fixed, it does not change with the scroll bars of the browser window, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so the anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document. This with background-attachment:fixed? (defines how the background picture moves with the scrolling axis) property is functionally the same. This is not a lot of introduction, and relative positioning, as much as writing better.
These three positioning methods can be mixed together, such as the parent element with absolute positioning, sub-elements with relative positioning and so on, it can be very flexible layout, learn the first time may be ignorant, the second time will be better, the third time the basic can understand, I learn things is this principle, a thing to learn three times can be considered a learning.
Familiarity with HTML CSS layout models
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
