Summary of common skills in CSS Development

Summary of common skills in CSS Development

Benefits of using CSS abbreviations

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

Specify the unit unless the value is 0 and the difference between PX and em.

Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = "100", but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. In addition, other values must follow the unit. Note that do not add spaces between values and units.The PX Unit is suitable for fixed la S such as 960 grid. Em is suitable for Fluid layout.

Use line-height vertical center, and line-height and height to differentiate experiment display

Line-Height: 24px. Use line-height when a fixed-width container is needed and a line is vertical (the height is the same as that of the parent container.

Syntax:Line-Height:Normal|Length

Parameters:

Normal:Default Row Height

Length:Percent number | length value composed of floating-point numbers and unit identifiers, which can be negative values. The percentage value is based on the font height. See length unit
Note:
Retrieves or sets the Row Height of an object. That is, the distance between the bottom of the font and the top of the font. If the row contains multiple objects, the maximum row of the application is high. The Row Height cannot be a negative value.

<Div style = "line-Height: 24px; Border: 2px; border-style: dashed; margin:">

Vertical center using line-height <br/>

Vertical center using line-height <br/>

Vertical center using line-height <br/>

Vertical center using line-height <br/>

</Div>

Clear the container float and the Association of overflow: hidden; clear: Both

# Main {overflow: hidden;}, clear: Both; clear: Left; clear: Right; overflow clears objects such as body. You can choose to use a container similar to the overall container. Clear clears the DIV and is more flexible. You can choose to use it based on your needs. It is also very common to have two attributes.

Syntax:Clear:None|Left|Right|Both

Parameters:
None:Allow floating objects on both sides 

BOTH:Floating objects are not allowed.

Left:Float objects on the left are not allowed 

Right:Float objects on the right are not allowed. Description: the value of this attribute indicates that float objects are not allowed.

Div {Clear: Left} IMG {float: right}

Syntax:Overflow:Visible|Auto|Hidden|Scroll

Parameters:

Visible:Do not cut the content or add a scroll bar. If this default value is explicitly declared, the object is cut to the size of the window or frame containing the object. And the clip attribute settings will be invalid.

Auto:This is the default value for the body object and textarea. Cut the content and add a scroll bar as needed
Hidden:Content beyond the object size is not displayed

Scroll:Always display the scroll bar

Note:
Retrieves or sets how to manage content when the content of an object exceeds its specified height and width. Setting the textarea object to a den value will hide its scroll bar. For a table, if the table-layout attribute is set to fixed, the TD object supports the overflow attribute with the default value of hidden. If it is set to hidden, scroll, or Auto, the content beyond the TD size will be cut. If it is set to visible, additional text overflows to the right or left (depending on the setting of the direction attribute) cells. This attribute is available on Mac platform since ie5.

Do not fold links

A {white-space: nowrap;} p {white-space:Nowrap ;}The above settings can avoid link folding.

Syntax:White-space:Normal|Pre| Nowrap

Parameters:

Normal:Default Processing Method

Pre:Display pre-formatted text in an equal-width font. Do not merge the blank distance between words and align the two ends. See pre object

Nowrap: Force all texts to be displayed in the same row until the text ends or BR objects are encountered.For more information, seeNowrapAttribute (feature)
Description: sets or retrieves the processing method of spaces in an object.

Always display the scroll bar in Firefox

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

2 body, HTML {Min-Height: 101%;} greater than 100%, a scroll bar will inevitably appear.

Horizontally center block elements

Margin: 0 auto; in fact, it is margin-left: auto; margin-Right: auto; (upper right bottom left ),Remember a rule. Clockwise.

Body {text-align: center ;}

Then define the inner container text-align: left;

Hide the scroll bar of exploer textarea

Textarea {overflow: auto ;}

By default, exploer has a vertical scroll bar in textarea (don't ask me why ).

Set the print page (if the experiment fails to see the effect, you can contact us)

H2 {page-break-before: Always;} the page-break-before attribute can be used to set the page when the page is printed.

Syntax:Page-break-before:Auto|Always|Avoid|Left|Right|Null

Parameters:

Auto:If you want to insert a page delimiter before the object

Always:Always insert a page delimiter before the object

Avoid:Avoid inserting page delimiters before objects

Left:Insert a page delimiter in front of the object until it reaches the left edge of a blank page.

Right:Insert a page delimiter before the object until it reaches a blank right page.Null:Null Value. Ie5 is used to Cancel Page delimiter settings

Note:
Retrieves or sets the page delimiter that appears before an object. Ie5 only supports the always and blank values (Null). In ie4, this attribute does not act on the BR object, but ie5 does.

Delete the dotted box on the Link

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

By default, Firefox adds a dotted box to the link to get the focus (or click it). The above attributes can be deleted.

Simplest CSS Reset

* {Margin: 0; padding: 0} if you want to "complex details", refer to the Yui practice (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}

Difference between CSS box model and IE and Firefox Box Model

 

 

 CSS Box Model-What isCSSBox Model.

 

Understanding box in daily life:

 

The box is often used to hold rectangular and square boxes. Such as leather box and TV box. This is a specific box.

 

CSS box:
Literally, we can understand that CSS boxes are also loaded. For example, if we want to deploy text content and images on a webpage, it needs to be packed like a box. In this case, we set the height, width, border, margin, and padding for the object ), you can implement a rectangular and square plane box like a box.

 

We usually do this.:
A group of syntax tag groups such as <div> </div> and <span> </span> are called one box. Because we have set the height, width, border, margin, and padding for it) and then the box is displayed as long square or square. Therefore, the CSS box model is derived from this.

 

Daily use of CSS boxes:
When we put what content into a box, we need to think of putting it in <div> </div>. This concept is needed in our mind.
If we set a box with a width of PX, we need to know the following concept:

 

CSS styleCode:
. Yangshi {width: 100px ;}

 

CorrespondingHTML code:
<Div class = "yangshi"> content </div>

 

In this case, you can view the <Div class = "yangshi"> content </div> as a box.

Http://www.w3cn.org/article/translate/2005/104.html

Http://blog.imbolo.com/10-css-snippets-to-save-time/

Http://www.divcss5.com/jiqiao/