Novice Build Station: The basic concept and difference of div tutorial

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

1. Inline and block-level elements

To be comfortable with the layout, you must understand the difference between the elements in the row and the block-level elements;

A block element means that the whole piece is started from a new line (without the CSS control) and that it can be inline (inline) elements and other block elements, common block elements such as "div,h1-h5,p". When we have the CSS control, we can change their default layout mode, put the block elements into the position you want;

In-line elements (inline Element), for the Chinese name of the inline element, there are several inline elements, inline elements, in-line elements, and inline elements. Basically there is no unified translation, love how to call it, ahuing like to call it in line elements, a name to know it is displayed on one line. Inline elements can only hold text or other inline elements, and common inline elements "a,span,i,b".

Block elements (blocks element) and inline elements (inline element) are concepts in the HTML specification. And when the CSS control, block elements and inline elements of this attribute difference is not a difference, that is, block-level elements can row within the elements, inline elements can also be block-level elements. For example, we can completely add a property such as the span of an inline element to display:block, so that he also has properties that start from the new line at a time. And the two UL plus display:inline properties, they can be displayed in a row, unfortunately IE6 not support, but can be solved with hack, after the introduction. They also have a difference is that the inline element is set wide and high is not used, but when it floats, he has a haslayout, you can set width and height.

2.CSS inheritance

Inheritance, as the name implies, is the element inherits the parent's CSS attribute, inherits the attribute to reduce the difficulty which the CSS repeats writes, may inherit the attribute to have "color,font,line-height", for example, will body{color:red}, then does not give the element in it to add the attribute again, The font inside the body shows red;

3. Box model

Box model, is the core of the XHTML+CSS layout page! For understanding the layout of the next ideal is very important for beginners, it is difficult to come out, but for the life of the box everyone familiar with it, haha, the box model mentioned here you can be understood as a real life box on it. So let's think about whether the box inside the life is empty to store things, and the area where the stuff is stored we give him the name "content", and the paper wall of the box gives him a name called "border", if something inside the box is a hard drive, But the hard drive is afraid of vibration, so we need to be in the hard disk around the inside of the box filled with some shockproof material, then the hard disk and box border has a certain distance, we call this part of the distance is called "padding (internal margin)", if we need to buy many pieces of hard disk Or because the hard drive is afraid of vibration, so need to between boxes and boxes also need some shockproof material to fill, so the distance between the box and the box is what we call "margin" ok~! the four elements of the box model come out: content (contents), Border (border), Padding (inner margin), margin (outer margin), understand the "box model"? That's a little bit of knowledge.

4. Note

Each language has its own annotation method, Html,css is no exception, usually write code to form a good habit of annotation, if not commented, perhaps you are very clear, but time is long, you must be vague, or let others see, it is difficult to understand, not only comments, but also note that the wrong annotation is worse than not comment. HTML annotations recommend the annotation method of the DEDECMS program, take annotations as a label, for example, the content has a beginning, there is an end; CSS annotation should note that if there are characters in the annotation IE6 will not be recognized, interested friends can go to test, the solution is to add a few "*", as follows

Correct:/*** annotation ***/

Incorrect:/* Comment * *

5.css Code Property Reset

The default style for labels in HTML has a default property value. Rendering the effect is not the same, we write the CSS page, in order to avoid the repeated definition in CSS, we need to reset the default style, so as to facilitate the unification, so as to improve development efficiency, improve the reuse of style code, reduce duplication of code, Reduce maintenance costs. When testing a piece of code, write directly *{margin:0;padding:0}. That's fine, but when you actually do the page, it's not recommended, so that all the tags have to be reset once, which can greatly affect rendering efficiency, the following is the ahuing commonly-written CSS reset code:

/*** Reset--------------------------------------------------------------****/body,html{color: #444; margin:0; Padding:0;font:12px/24px "\5b8b\4f53", San-serif div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,select,object{margin:0; padding:0; Ul,ol,li{list-style-type:none} h1,h2,h3,h4,h5,h6{font-size:12px font-weight:normal;} address,cite,code,em,th,i{ Font-weight:normal; Font-style:normal; img{Border:none} object,textarea,img{vertical-align:top/*** compatible with ***/A{text-decoration:none;color: #2C2C2C} A: Hover{text-decoration:underline;color: #F60;

Priority of the 6.CSS selector

Class is the type that sets the label, the ID is the identity of the label, and the class property is used to specify what style the element belongs to. If the style sheet can join. Content1 {color:red} use Method: Class= "Content1";

The id attribute is used to define the unique style of an element. such as a CSS rule #content2 {font-size:14px} use Method: Id= "Content2";

ID is a label that distinguishes between different structures and content, just like your name, if a room has 2 people with the same name, there will be confusion, so a page with the same ID can only have one;

Class is a style that can be set on any structure or content, just like a piece of clothing that can be reused;

Conceptually, it's different:

ID is the first to find the structure/content, and then define the style, class is first defined a style, and then set to multiple structures/content.

In practical applications, class may be more useful for text typesetting, while the ID on the macro layout and design to place a variety of elements more useful, ahuing in doing the page, the general CSS is not ID, only with class, and ID left to JS call.

ID priority is higher than class, the same label class with the nearest principle, from the label of the most recent level, the page CSS attributes higher than the CSS file, directly in the label attributes the highest, for example:

<style>.black{background: #000}</style> <div class= "Black" style= "background: #fff;" ></div>

The background will show white.

This article from http://www.ahuing.com, if need reprint, please indicate the source, thank you