Shulou(Shulou.com)06/02 Report--

What are the key points in the process of DIV CSS experiment? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Main points of DIV CSS

Engaged in page reconstruction work, from local details to the integration of the page, and then look at the structure of the overall system. In each step, there are different processing techniques and refactoring ways of thinking. This article is a tutorial of DIV CSS examples, as well as common errors in DIV CSS instances and common errors in the primary level of DIV CSS instances. I have originally summarized some of my own mistakes and detailed handling problems, so as to give you more flexibility to master this technology and improve production efficiency and usability.

◆ DIV CSS instance tutorial: the impact of document types (DOCTYPES) on browsers

Define the document type:

1. All unit attributes must indicate, for example: {font-size:3px; margin:5px;}; (no unit can be specified when the value is 0)

2. When you specify the width and height of the influence box model, subtract Padding. For example, if the display height of a DIV is 200and its Padding is: 10px, then the Height of the div cannot be defined as 200px, but should be: 180px.

No document type defined:

1. All units default to px, so it is equivalent to px when not specified, such as margin:5;. (no units can be specified when the value is 0)

2. When you specify width and height, Padding does not affect

3. All IE versions support unification.

◆ DIV CSS instance tutorial: floating points

Control the float in a more reasonable way.

1. When the floating direction under IE6 is the same as that of magrin, and the floating element is a block element. Will cause a double magin value ~ the value of floating driver margin can be solved by applying display:inline; at this time. It was unreasonable for me to use IE6 hack "_" before.

2. Clear clears and floats each adaptation code: .clear {clearbank Bowthport Font Font SizeParu 1pxvisibilityWidthParse 1pxvisibilityLigand 0pxvisibilityPortVince0pxImportantLapitaneLineLineLineLineLineFontLight Ligand 0} / * ie and firefox1.5*/

3. The box model is nested and floated to solve the automatic extension of height.

Bottom plus

IE:height:1%;FF:.runrunrun:after {/ * follows the element pelement * / content: "." / * write a dot * / display:block;/* block-level layout * / clear:both; / * clear left and right floats * / height:0;visibility:hidden;/* invisible * /}

◆ DIV CSS example tutorial: several ways to implement fillet style

The most common way to design rounded corners on a page is scalability and adaptability. Example biaoshi.rar (1.07 KB)

Biaoshi.rar (1.07 KB)

Get attachment: runner.web#gmail.com

1. Use position: relative; and position: absolute; for absolute positioning with fillet images, and apply negative margin values for positioning when setting border:1px solid # ccc;, such as margin:-1px

2. Apply div {border:0 solid # A5DA94 to Font Font, Font, etc., apply div {PX # A5DA94

◆ DIV CSS instance tutorial: playing with tables

Attachment: 10 examples of the application of the table web-table.rar (65.93 KB) web-table.rar (65.93 KB)

Get attachment: runner.web#gmail.com

1. Use the elements of the form according to the requirements: thead,tfoot,tbody,caption (description), col,th,summary (summary)

2. IE6 does not support CSS to control background discoloration. # box-table-a tr:hover td (IE6 does not support hvoer pseudo-classes other than A)

◆ DIV CSS example tutorial: Web page text settings

1. When all fonts are in E, font-family: Arial, Helvetica, sans-serif; otherwise special symbols show deformation. (you need to define the content as an English font)

2. In UTF-8 mode, Song style is easy to become garbled, because when the editor is used, you should pay attention to re-entering it.

3. When using "⋅" in the article list, font-family should be set to Song style ()

4. The definition of font size unit is px, which has some limitations. (use EM*** in terms of user experience)

◆ DIV CSS instance tutorial: common browsers HACK

Attachment: CSS hack browser compatibility list

1. "_ property:value" adapt to IE6

2. "* property:value" adapts to all IE

3. "* + html div" adapts to IE7 ie5

◆ DIV CSS instance tutorial: techniques for layout hiding

1. Use a negative value of text-indent, such as {text-indent:-9999px;} (do not set too large a value that will affect the rendering rate)

2. Use display:none to hide the model as a whole. Does not affect other styles.

3. Hide the excess part; you can set {overflow:hidden;}

4. Use font to set ultra-small fonts to hide content, for example {font-size:0;}.

◆ DIV CSS instance tutorial: DIV Adaptive layout method

1. Reasonable application of background to achieve self-adaptation from vision.

2. Auto-centering display skills: parent level setting: text-align:center; word model setting: width:*px; margin:0 auto

3. Min-height IE6 does not support it (in fact, the value of height in IE6 is the minimum height.), you need to set the height by hack. Example: _ height:*px; IE6 exceeds the height can be automatically extended.

The answers to the questions about the main points of the DIV CSS experiment are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.