Most common techniques for CSS development

CSS (cascading style sheets) is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language). CSS can not only statically modify the Web page, but also with a variety of scripting language dynamically to the elements of the page format. CSS enables precise pixel-level control of the placement of elements in a Web page, supports almost all font-size styles, and has the ability to edit Web page objects and model styles.

Benefits of using CSS abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read.

Explicitly define units, unless the value is 0, and the PX and EM differences.

Forgetting to define the size of the unit is a common mistake for CSS beginners. In HTML you can write only width= "100", but in CSS you have to give an exact unit, for example: width:100px width:100em. Only two exceptions can be undefined units: Row heights and 0 values. In addition, the other values must be followed by the unit, note, do not add a space between the value and the unit. PX units are suitable for fixed layouts such as 960Grid. EM is suitable for fluid layout.

Use Line-height to center vertically, as well as line-height and height differences Experiment Show

LINE-HEIGHT:24PX, using a fixed-width container and needing a vertical center line, use Line-height (the height is consistent with the parent container.)

Grammar:

Line-height:normal | Length

Parameters:

Normal: Default row height

Length: Percent number | A length value consisting of a floating-point number and a unit identifier that is allowed to be negative. The percentage value is based on the height size of the font. See Length Units
Description
Retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font. If the row contains more than one object, the maximum row height is applied. The row height cannot be negative at this time.

<div style= "LINE-HEIGHT:24PX; border:2px; border-style:dashed; Margin: "> Use line-height Vertical center <br/> Use line-height vertical center <br/> Use line-height vertical center <br/> Use line-height sag Straight Center <br/></div>

Clear container float, and overflow:hidden; Clear:both's Association

#main {overflow:hidden;},clear:both;clear:left;clear:right; Overflow for purging as body. Similar to a whole container can choose to use it. And clear clears the DIV and it's more flexible. Can be used according to the actual selection. It is also a very common two attribute.

Syntax: Clear:none | Left |right | Both

Parameters:
None: Allow floating objects on both sides

Both: Floating objects are not allowed

Left: does not allow floating objects

Right: It is not allowed to have floating object description: The value of this property indicates that the edge of the floating object is not allowed.

div {Clear:left} img {float:right}

Syntax: overflow:visible | Auto | Hidden | Scroll

Parameters:

Visible: Do not cut content or add scroll bars. If this default value is explicitly declared, the object is clipped to the size of the window or frame that contains the object. And the >clip property setting will expire

Auto: This is the default value for the body object and textarea. Cut content and add scroll bars when needed
Hidden: Do not display content beyond the object size

Scroll: Always show scroll bars

Description
Retrieves or sets how content is managed when the object's content exceeds its specified height and width. Setting the TextArea object to a hidden value hides its scroll bar. For table, if the Table-layout property is set to fixed, the TD object supports a overflow property with a default value of hidden. If set to Hidden,scroll or auto, then the content beyond the TD size will be clipped. If set to visible, causes additional text to overflow to the right or left (depending on the direction property setting) of the cell. This property is available on the Mac platform from IE5 onwards.

Do not leave a link wrapped

a {white-space:nowrap;} p {white-space:nowrap;} The above settings will prevent the link from wrapping.

Syntax: White-space:normal | Pre | NoWrap

Parameters:

Normal: Default processing mode

Pre: Displays preformatted text in equal-width font. Do not combine whitespace distances between words and justify them. See Pre objects

NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object. See NoWrap Properties (attributes) for objects such as Td,div
Description: Sets or retrieves how spaces within an object are handled.

Always let Firefox show scroll bars

1 HTML {overflow:-moz-scrollbars-vertical;}

2 body, HTML {min-height:101%;} greater than 100% will inevitably appear with scroll bars.

Center The Block element horizontally

margin:0 Auto; in fact, it is margin-left:auto; Margin-right:auto; (upper right Bottom left), remember a rule. Turn clockwise.

Body{text-align:center;}

Then define the inner layer container text-align:left;

Hide Exploer textarea scroll bar

textarea {Overflow:auto;}

Exploer By default textarea will have a vertical scroll bar (don't ask me why).

Set up print paging (the experiment did not succeed see the effect can be exchanged)

The H2 {page-break-before:always;} Page-break-before property can set pagination when the page is printed.

Grammar:

Page-break-before:auto | Always | Avoid | Left | Right | Null

Parameters:

Auto: If you need to insert a page separator before the object

Always: Insert a page separator before an object

Avoid: Avoid inserting page separators before objects

Left: Inserts a page break before the object until it reaches a blank page edge

Right: Insert a page break before the object until it reaches a blank left side null: null value. IE5 used to cancel page break settings

Description
Retrieves or sets the page delimiter that appears before the object. IE5 supports only always values and white space values (NULL). This property is not used in IE4 for BR objects, but is IE5 action.

Delete a dashed box on a link

A:active, A:focus {outline:none;}

Firefox defaults to a dotted box when the link gets focus (or when clicked), and can be deleted using the properties above.

The simplest CSS reset

* {margin:0; padding:0} If you want to "complex detailed", refer to Yui's approach (and here).

http://developer.yahoo.com/yui/2/

/*CSS Reset Example */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0;} Table{border-collapse:collapse; border-spacing:0;} fieldset,img{border:0} Address,caption,cite,code,dfn,em,strong , th,var{Font-style:normal;font-weight:normal;} ol,ul{list-style:none} Caption,th{text-align:left} H1,h2,h3,h4,h5, h6{font-size:100%; Font-weight:normal} q:before,q:after{content: '} abbr,acronym{border:0}

CSS box model and the difference between IE and Firefox box model

CSS box model-what is a CSS box model.

recognize the box in everyday life:

Often we come across boxes that are used to put things in rectangular, square boxes. This is a more specific box, such as a shoe box and a TV box.

CSS Box:
Literally we can understand that the CSS box is also loaded, such as we want to text content, picture layout page, it needs to be like a box loaded. At this point, we can set the height (height), width, border (border), margin (margin), padding (padding) of the object to achieve a box-like rectangle, a square flat box.

Usually we do:
A group of <div></div>, <span></span> and other similar grammatical tag groups called 1 boxes. Because we have properties such as height (height), width, border (border), margin (margin), padding (padding), we can render a box-like rectangle or square. So we got the CSS box model.

Daily use of CSS boxes:
We say what is put into a box, we have to think of is put into the <div></div>, mind this concept.
If we say set a width of 100px box, we need to know the following concept:

CSS style code:

. yangshi{width:100px;}

Corresponding HTML code:

<div class= "Yangshi" > Content </div>

This time we can <div class= "Yangshi" > Content </div> look as a box.

The

CSS simplifies the formatting of the Web page, and the external stylesheet is saved in the cache by the browser, speeding up the download display and reducing the amount of code that needs to be uploaded (because the formatting of the repeating settings will be saved only once). As long as you modify the CSS style sheet file that holds the Web site format to change the style of the entire site, it is especially useful when modifying a site with a large number of pages. This avoids the modification of a webpage, greatly reducing the workload. The above is commonly used in CSS development skills Summary, I hope in the development can help everyone.