Box Model and position in CSS (1)

I have encountered several important knowledge points in css today. I remember these are all previously viewed: margin, padding, border, and position. However, there are still a lot of problems to use. I used to look at the past and I was always too reluctant to record it. When I used it, I didn't even know where I saw it. It was very troublesome to find it, write down your blog honestly! Since I plan to write a blog, it will take some time to write something that I think is of quality. If I am not sorry, I am more sorry to those who read my blog. I still want to tell myself some things, you don't have to take a short time, just like learning these technologies. It takes time to accumulate at least 1.1 points. I am about to graduate from my senior year. I always feel that there are many things to learn. So that I want to learn everything, but I cannot learn anything for a few days. I always think that this learning process is too slow. After a long time, I think it is too time-consuming to write a blog. In fact, I am just in a hurry. What technologies need is: Learning-> time-> Summary-> record-> forgetting-> View-> memories, this kind of progressive learning accumulation process is not just learning. we record the memories of previous learning that we can quickly find when we forget. Therefore, we must constantly warn ourselves that we have to spend time on anything we want to gain. Now, let's start my exploration of margin, padding, border, and position today! (The usage of these css styles is not recorded here. You can go http://www.w3school.com.cn/ Learning) margin: outer border padding: inner border: border 1, margin default (that is, if not defined) is margin: 0px; and margin is transparent. In my situation, there are three aspects to note: I. When we set a div, copy the code for this div with a css style <! -- Specify div --> <div class = "marg"> test the outer border of margin </div> <! -- A css style for this div -->. marg {width: 300px; height: 200px; background: red; margin: 20px;} copy the code. Note: The width and height we set indicate the length and height of the content area, therefore, our element box div is not 300px * 200px, but 340px * 240px. If we need to set a 300px * 200px element box with a margin of 20 PX, we need to set it like this. marg {width: 260px; height: 160px; background: red; margin: 20px; from the preceding example, we can see that when we set the width and height of the div css style, it actually refers to the length and height of the content area. The general rule is that width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the total size of the element box. According to W3C standards, the space occupied by element content is set by the width attribute, and the padding and border values around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard models in the weird mode. The width attribute of these browsers is not the width of the content, but the sum of the width of the content, padding, and border. (From w3school) II. The outer margin can be a negative value. In many cases, the outer margin of a negative value is used. Copy the Code