Basic concepts and tags commonly used in the process of making web pages using DIV CSS_html/css_WEB-ITnose

CSS is mainly used to supplement and extend the functions of HTML files. Its function is to set various layouts in HTML files to control fonts, colors, backgrounds, pictures, etc. in web pages. So that the web page can be displayed exactly according to the designer's ideas.

CSS can control the display of web pages, and the attributes in HTML tags can also control its display. Why do we need CSS? One of the reasons is: In the past, almost one person could complete the setting up of a website. It was very simple, but not anymore. A website requires many people to work together to complete it. If everyone makes web pages according to their own preferences, then the development The styles of the web pages that come out will be different, so it is difficult to put these web pages on the same website. CSS can easily set the style of all web pages, and then let people in different departments and different places create the web pages.

CSS is something independent of the tag attributes in HTML. Of course, CSS also has its own unique things. It independently forms the content display part of the HTML language into a whole (CSS), and then, When we write web pages, we use HTML language to set the structure of web page content, and use CSS language to set the display of web page content, so as to achieve the purpose of enhancing the flexibility and reusability of web page programming.

Note that the HTML language still has the function of displaying web page content, but when we make specific web pages, we usually only use its function of controlling the web content structure.

1. Box model

All elements in HTML, whether they are block-level elements or rowset elements, are considered a box in CSS. This is the box model.

What needs to be said here is that it is best to understand this "box" as a box with no height. This will help us understand the concept of the lower layer. Of course, you can also understand this "box" as a box with a height. height box, in this case, we need to understand the following "layer" as a layer with a certain height.

1. Internal structure of the box

The actual width of a box is composed of "content inner margin, border outer margin", and the width and height are set in CSS To control the box size.

2. Border

When multiple rules act on a border, conflicts will occur. The later settings override the previous settings. This is the same for any attribute. of.

3. Padding

When a box sets a background image, by default the range covered by the background is the range composed of "padding content", and ends with The upper left corner of padding is the reference point to tile the image.

4. Margins

The body is a special point, its background color will extend to the margin part, while the background color of other boxes only covers the "padding content" (IE browser) or "padding content border" (FF browser).

2. Floating and positioning of the box

Each attribute of the CSS box model includes four parts: top, right, bottom, left; these four parts can They can be set at the same time or separately; the border can be divided into sizes and colors. We can understand it as the thickness of the box we see in life and what color material the box is made of. The border is the box that needs to be preserved between the box and other things. What a distance.

1. The relationship between boxes

(1), standard flow

means not using other and permutations There are special CSS rules related to positioning, rules for various elements.

(2), block-level elements

They are always expressed in the form of a block, and are arranged vertically with their brothers at the same level, with full left and right.

(3). Inline elements

themselves do not occupy an independent area, but only point out a certain range based on other elements.

2. Positioning of the box in the standard flow

(1). The distance between inline elements: the margin-right of the first element and the margin-right of the second element The sum of the margin-left elements.

(2) The distance between block-level elements: It is the largest of margin-top or margin-bottom.

3. Floating and positioning

The scope of a block-level element is determined by the standard stream content inside it and has nothing to do with the floating content inside it, that is, After the child element is floated, it no longer belongs to the parent block and no longer belongs to the standard flow (for details, please see the relevant introduction on Ma Haixiang's blog "Principles and Advantages and Disadvantages of Clearing CSS Floats").

Note: Among two block-level elements, when the first block-level element is floated, the content of the subsequent block-level elements will surround it, but if the second block-level element is floated, the first There is no change in the element, that is, it will not wrap around the second floating block-level element! The situation is similar for multiple blocks.

(1), Relative positioning conclusion

A box that uses relative positioning will reach a new position by offsetting the specified distance relative to its original position.

A box using relative positioning is still in the standard flow. It has no impact on the parent block and sibling boxes, and its original position will not be filled by other blocks.

(2), conclusion of absolute positioning

A box that uses absolute positioning will be offset based on its "nearest" "already positioned" "ancestor element". If there is no already positioned ancestor element, it will be positioned based on the browser window. .

Absolutely positioned boxes are taken out of the standard flow, which means they have no effect on the positioning of their following sibling, but their sibling box will fill its original position as if it did not exist.

4. Use of margin

When the height value of the block is less than the height of the sub-block plus the value of margin, IE will automatically expand at this time to keep the child elements The margin-bottom space and the padding-bottom of the parent element itself.

But FF will not, it will ensure that the height of the parent element completely matches, and at this time the child element will exceed the range of the parent element.

5. Use of z-index

The z-index attribute is used to adjust the upper and lower positions of the overlapping blocks during positioning. Pages with a large z-index are located at a location with a small value. above, the default value is 0. When the z-index values ​​of the two blocks are the same, the original high and low coverage relationship will be maintained.

6. Use of display

The display attribute changes whether an element is a block or inline element, or does not display the element (none) .

3. Block-level elements and rowset elements

Block-level elements occupy a separate line in the standard document flow, while rowset elements in the standard document flow They are part of the line, but when they completely break away from the standard document flow, they no longer have this characteristic.

Block-level elements and rowset elements can change each other. Through the display attribute, when the attribute value is block, it can be converted into a block-level element. When the attribute value is inline, it can be converted into a block-level element. Convert to rowset (inline) elements.

4. The concept of layers

The layout and display of HTML document content is not just on one plane, but can be laid out and displayed on multiple planes. Some of the layouts between the various planes (layers) are not completely disconnected, and some are completely disconnected. Of course, we can set the display effect through the z-index attribute. Finally, we start from the outermost one. The overlapping effect seen on the layer is the final displayed effect.

5. Text and images

We all know that using HTML to position text and images on a web page is a "heartbreaking" thing. We must use For table labels and implicit GIF images, even this cannot guarantee accurate positioning, because differences in browsers and operating platforms will cause the displayed results to change (for example, text and images cannot be displayed aligned on the same line. For specific solutions, see Relevant introduction from Ma Haixiang's blog "How to use CSS code to display and align images and text on the same line").

1. Text size (font-size)

The length represented by 1em is the standard width of the letter m in its parent element, and 1ex represents the letter x in the parent element When the parent element changes, the size of the child elements using these two units will change proportionally.

2. Line-height (line-height)

(1), represents the distance between the baselines between two lines of text, that is, the height of each line of text. If you add Underline, and the underline is the baseline.

(2). The value of line height can either use pixels as the line height unit, or you can not add any unit and just write numbers. In this case, the line height represents the ratio of line height to font size, such as font Size 12px, Line-height: 1.5.

The actual size is line-height:1.5*12px=18px;

3. Letter case conversion (text-transform)

text- Transform is mainly used to define the case status of text. However, this attribute is meaningless for Chinese.

The specific syntax is:

capitalize: capitalize the first letter

uppercase: capitalize

lowercase: lowercase

none: normal none Change

inherit: inherit

4. Text decoration effect (text-decoration)

text-decoration attribute specifies the decoration added to the text, this The attribute allows you to set certain effects on the text, such as underlining. If the descendant element does not have its own decoration, the decoration set on the ancestor element will "extend" to the descendant element.

The values ​​of text-decoration include underline, overline, line-height, blink, etc.

5. Text alignment and first paragraph indentation

(1), paragraph horizontal alignment: text-align

(2), beginning of paragraph Indent text-indent: For Chinese web pages, set it to "2em".

6. Paragraph vertical alignment (vertical-align)

In the current browser, you can only use the vertical alignment setting of objects in table cells. , but for general block-level elements, such as div, it does not work.

7. Image style

(1), background-position: attribute determines the position of the background image. If two values ​​are set, they are used to determine the horizontal position respectively. and vertical position. If only one value is set, the default value is center.

And it is related to tiling. It actually specifies the starting point of tiling. In addition to using top, left, bottom, right, center, it can also use relative values ​​​​and absolute values ​​​​as its attribute values, such as 5 %,18px etc.

The numerical values ​​represent the distance from the left and the distance from the top edge.

(2), background-attachment: fixed can fix the background image. When the scroll bar is pulled, only the text moves, but the image does not move.

(3) The horizontal alignment of the image (horizontal alignment): The text-align attribute of the image cannot be set directly, but is implemented by the attribute of its parent pixel, but the vertical alignment can be done through the image The vertical-align attribute is set, which is exactly the opposite of the alignment of text.

6. Links and Navigation

In the process of using div css to create web pages, there is another type that we often use, that is, links and navigation.

1. Pseudo-class

(1), Declaration order of pseudo-classes

a:link,a:visited{text-decoration:none ;}

a:hover{text-decoration:underline;}

Ma Haixiang reminds everyone: the order of the above declarations cannot be changed. If it is changed, it will have no effect.

(2), a:link and a are set the same. There is usually no difference between the two, but in actual work, a, a:visited｛｝;

are often used.

2. Button hyperlinks

The settings for ordinary hyperlinks and clicked links are the same, and the style of the border is used to simulate the button effect, and the hyperlink when the mouse pointer passes, Change the text color, background color, position and border accordingly to simulate a "press down" effect.

3. Height (width) and width (height) attributes

FF browser does not support the height (width) and width (height) attributes of the a element!

4. Bullets

(1), list-style-type: attribute sets the ull or ol mark symbol style.

(2), list-style-image: Attribute setting bullets are displayed as images, but due to differences between browsers, this attribute is generally not used, but the list-style-type attribute value is set to none, and then set the background implementation of the li tag.

5. Simple menu navigation

Although the link is set as a block-level element, the mouse-over effect can only be triggered when the mouse passes over the text (IE6). It is not triggered when the mouse enters the rectangular area.

IE7 has modified this error. The solution is: add a CSS rule in "#navigation li a": height: 1em;

7. CSS DIV layout

Using css div to layout a web page means to lay out the web page by inserting div tags into the web page and defining the corresponding css rules.

1. Fixed-width layout

(1), the first method

body{text-align:center;}
　# container{position:relative;margin:1 auto;widht:760px;text-align:left;}

(2) The second method

body{margin:0px;}
　#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}

2. Left-center-right layout

（ 1) The left and right blocks use absolute positioning and a fixed block width, while the middle block does not set a width and automatically adjusts the width, but its padding-left and padding-right must be set to the width of the left and right blocks respectively (for details, please check Ma Haixiang's blog " Relevant introduction to "Complete Collection of Commonly Used CSS Code Usage Skills").

(2) Block background color problem: Since the background color of the left and right blocks does not extend to the bottom of the page, the solution suggested by Ma Haixiang's blog is: when there is a footer, put an entire content block (left , middle and right blocks) into a block (it doesn’t matter whether you put it here or not, it’s mainly for easier management), then set the body background color to the same color as the right block, and then make a picture with the same width as left , use the block with the same color as the left background color as the background image of #container, and then set it to repeat downwards.

8. Document flow

Document flow means that the content in the document is continuously read into the program process, and then, after processing, is continuously read from the program process out, and output to the display. Of course, there is a certain order when reading and reading out. It should be noted here that the reason why the word "stream" is used is mainly because the data is read in and out. The transmission process of reading is very similar to the flow of water, so the word "flow" is used to describe the transmission process of data very vividly, but the word does not emphasize the order of reading in and out.

Here we don’t need to care too much about the input stream of the document. We should know more about the output stream of the document, because the order in which the program process outputs each layer is different, which will lead to the final view of the layer. Differences in overlapping effects.

According to the different controls of the document flow on the layer, we can divide the document flow into regular flow, absolute positioning flow and floating flow. Now we can regard this flow as the meaning of layer.

Regular flow: the most original layer. Initially, this layer contains all the elements. The elements of other layers are removed from this layer. Of course, if you take away other people’s things, you have to give them to them. An explanation;

Absolute positioning flow: When this layer takes away the original layer elements, it tells others that the thing I took away is completely mine, and nothing about it can exist in the future;

Floating flow: This layer is quite kind. Unlike the absolute positioning flow, which takes away other people's things, it won't even leave a cent for them. When the floating flow takes away other people's things, it will tell the regular layer that you can give them to others. It leaves a cemetery or keeps its original home. If it leaves a cemetery (which is enough for it to live in), I will decide the location of the cemetery. The "advantage" is that its true body will be above the cemetery. If it leaves its original home, I will decide the location of the cemetery. If it is a home, its true body can drift anywhere. I will tell you whether you want to keep it in the cemetery or leave it in the home.

9. Experience

DIV is a block tag in HTML, which is to treat some HTML tags as a block. CSS can use DIV tags to make the objects being manipulated The granularity can be flexibly changed. The span tag is an inline tag. The div can be set to achieve the effect of span. However, it is difficult for span to achieve some of the effects of div (for details, see Ma Haixiang's blog "How to Standardize the HTML Code of Large Websites" introduce).

1. In the item list, when the

tag is set to float: left attribute, and then the width is specified for

, then when the

tag exceeds the width of the parent tag It will automatically wrap.

2. In order to reduce the difference, generally try to set the margin and padding values ​​of attributes in layout blocks, such as

,
• ,
  ,

  , or as needed. Set to the corresponding value, or set to 0;

  3. Often use pictures to replace the title text in the block. First hide the title text, and then set the replacement picture as the background picture of the block. If you want to make it vertical Pictures in the straight direction are generally set like this.

  If it is a horizontal image, you can generally hide the text containing the title, then set the width and height of the corresponding parent element, as well as the outer and inner margins, and then set the background image of the parent element as a replacement image.

  Example:

  This is a test

  H3 span{display:none;}
  　H3{width: 170px;height:60px;margin:0px;padding:0px;}
  H3{bacground:url(1.jpg) no-repeat;}

  4. If there are two blocks, the first one After setting it to float, regardless of the direction, the content of the second block will surround the first block. However, if the two blocks are set to float, it will have no effect on the first block, that is, the content of the first block will not will wrap around the second block, keeping it in its original position.

  Ma Haixiang’s blog comments:

  When the rowset element is used as a box, its essence is still on the regular flow, but a protrusion will be formed above the element. In this way, there will be some covering phenomena when we look at it from above; when the block set element is used as a box, it acts on the whole, and there will be no protrusions or covering phenomena; the absolute positioning flow and the floating flow are in Appears when repositioning the element (float and position attributes are set).

  This article is an original article on Ma Haixiang’s blog. If you want to reprint it, please indicate that the original URL is taken from http://www.mahaixiang.cn/css/1160.html and indicate the source; otherwise, reprinting is prohibited; thank you Cooperate!

  Statement：

  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