myRoad--detailed explanation of a beautiful div css web page template (2)_html/css

The previous article seems to have no nutrition now, haha, I will work hard today. First let's talk about the "box model". In CSS, div is considered to be a box. . . Box? What's the meaning? Haha, look at the picture below:

We use several CSS properties here, which were introduced in the previous article. See, CSS has deceived me for a long time. I always thought that width and height were divs. The width and height, I didn't expect, I didn't expect that they are just the width and height of the content. This is all the size control of the div. However, it should be noted here that the body is also a large box. If margin is not set by default, there will be gaps around the window. . . . . Also pay attention to margin and padding. . . Their abbreviations: margin: 0px or margin 0px 0px. What does this mean? If you forgot, read the first article! At this point, some people will say that even if margin, padding, and border are not set, they still have their own default values, and they are not large. Why do we have to spend a long time setting them? It should be noted here that making a web page is a delicate job, and a 1px difference may also affect the beauty of your web page. After further understanding, it turns out that "everything is a box" in HTML! (Of course not all, that’s what I’m saying.) O(∩_∩)O Haha~ Everyone should almost know it by now. In fact, div css is just a box within a box, or a box juxtaposed with another box. Or one box is on top of another box. The main thing is to look at the position of the box. So how to control the position of the box? There are "inline elements" and "block elements" here. is an inline element, not a separate line;

is a block element, that is, a separate line to control the position of

in this web page. The float attribute is used, and then the absolute position of width and height is directly used to control it! I don’t know if everyone here has noticed it! There is a layer called

This layer is used to clear the effect of the floating above. The picture below is the effect after removing this layer:

You can see that the position of the bottom footer layer has been messed up! This is the role of the

layer to eliminate the influence of the floating layer above. The main layout of the web page is like this, and the rest is the menu: The menus shown in the above two pictures are all made of

which is an unordered list. Of course, the title of the picture below is Use the
tag to control the font size. The default display of
is vertical. If you want to make it horizontal, you mainly need to use CSS familiar display: inline; The rest of this website is pictures, and its pictures are very beautiful, so you need to use this Photoshop, I will introduce it later, haha! That’s it for today. . . . See you tomorrow!

Related labels：

myRoad--详解一个漂亮的div+css网页模版（二）

source：php.cn

Previous article：Div CSS layout example: use dl dt dd to make a list_html/css_WEB-ITnose Next article：DIV CSS defines scroll bar style to achieve inline effect_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

myRoad--detailed explanation of a beautiful div css web page template (2)_html/css_WEB-ITnose