CSS Basics (iii)

One, the weight problem in depth 1.1 the same tag, carrying multiple class names, there is a conflict:

1 <p class= "spec1 spec2" > What color am I? </p> 2 <p class= "spec2 spec1" > What color am I? </p>

It has nothing to do with the order of the names of the hanging classes in the tag, only the sequence of the CSS:

1. spec2{ 2 Color:blue; 9 · 4. spec1{ 5 color:red; 6} 7 </style>

Red ones. Because red in CSS is written in the back.

1.2!important Mark

1 <style type= "Text/css" > 2 p{ 3 color:red !important; 4} 5 #para1 { 6 color:blue; 7} 8. spec{ 9 Color:green; 10} </style>

Important is the meaning of "important" in English. We can pass the syntax:

1 k:v!important;

To give a property a weight increase. The weight of this property is infinity.

Be sure to note the syntax:

Correct:

1 font-size:60px !important;

The wrong:

1 font-size:60px;!important; → Can't write!important outside 1 font-size:60px important; → Do not forget the exclamation mark

!important need to emphasize 3 points:

1)!important Promotion is a property, not a selector

1 p{ 2 color:red !important; → Only This one!important is written, so the font color property increases the weight 3 font-size:100px; → This property does not write!important, so there is no lifting weight 4} 5 #para1 { 6 color:blue; 7 font-size:50px; 8} 9. spec{ Ten Color:green; One by one font-size:20px; 12}

So, in a comprehensive view, the font color is red (listen to important); The font size is 50px (listening ID);

2)!important can not increase the weight of the inheritance, whether it is 0 or 0

For example, HTML structure:

1 <div> 2 <p> haha haha haha </p> 3 </div>

There are CSS styles:

1 div{ 2 color:red !important; 9 · 4 p{ 5 Color:blue; 6}

Since the div is inherited to affect the text color, so!important can not increase its weight, the weight is still 0.

But P label, because the P tag is actually selected, so the word is blue (whichever is P).

3)!important does not affect the nearest principle

If we are all inherited, it should be said according to the "nearest principle", then important can affect the principle of the nearest?

The answer is: no effect. Far, forever is far. Can not give far to write a important, kill near.

! Important do not allow to use when standing. Because it makes the CSS very messy.

Now, we know that cascading performance is a lot more:

Selector weight, who is near, who wrote in the following. 1.3 Summary of weight calculation

And you know! The nature of the important.

Two, Box model 2.1 The area in the box

The main attributes in a box are 5: width, height, padding, border, margin.

Width is the meaning of "breadth", which is the width of the content in CSS, not the width of the box.

Height is a "high" meaning, the height of the CSS refers to the level of the content, not the height of the box

Padding is the meaning of "inner margin".

Border is the "border"

Margin is "margin"

Box model of:

Code Demo:

this box width:200px; height:200px; but the reality of the width of the high is 302*302 . This is because we have to add padding, border.

Width and true occupancy width, not a concept!! 2.2 recognize width, height

Be aware that in the eyes of front-end development engineers, everything in the world is different:

such as measuring how wide a bun? The front-end development engineer will only measure stuffed buns:

Measuring the manuscript, the front-end development engineer will only measure the content width:

Measure face, only measure the facial features:

The following two boxes, the true possession of the width of height, exactly the same, are 302*302:

1. box1{ 2 width:100px; 3 height:100px; 4 padding:100px; 5 border:1px solid red; 6} 7 8. box2{ 9 width:250px; Ten height:250px; One by one padding:25px; border:1px solid red; 13}

true occupancy width = left Border + Left padding + width + Right padding + Right Border

The box model of the two boxes is shown in the following table:

Little practice, everybody write three 402*402 boxes.

answer (there are infinitely many answers, we only write three of them):

1. box1{ 2 width:400px; 3 height:400px; 4 border:1px solid red; 5} 6. box2{ 7 width:200px; 8 height:200px; 9 border:6px solid red; Ten padding:95px; 11} box3{. width:0px; height:0px; padding:200px; border:1px solid red; 17}

Box Model diagram for these three boxes:

If you want to keep a box with a true possessive width, then add width will reduce padding. Adding padding will reduce the width. 2.3 Meet Padding

Padding is the inner margin. Padding area has background color, css2.1 premise, and background color must be the same as the content area.

That is, Background-color will populate all areas within the boder.

The padding is in 4 directions, so we can describe padding in 4 directions respectively.

There are two kinds of methods, the first write small property, the second write comprehensive property, separated by a space.

Small attributes:

1 padding-top:30px; 2 padding-right:20px; 3 padding-bottom:40px; 4 padding-left:100px;

Top, right, bottom, left.

This property is a composite attribute. For example, do not write padding-left so there is no left inner margin.

The shortcut keys are PDT, PDR, PDB, PDL, and then press TAB.

Comprehensive properties:

If 4 values are written:

1 padding:30px 20px 40px 100px;

Top, right, bottom, left

Spaces separated, four numbers are up, right, bottom, left.

In other words, the front-end development engineers in the eyes of the order is different.

Common people: up and down

Emphasis on development engineer: Top, right, bottom, left

If you write only 3 values:

1 padding:20px 30px 40px;

Top, right, bottom 、?? Just like the right.

If you write only 2 values:

1 padding:30px 40px;

Other words

1 padding:30px 40px;

Equivalent to:

1 padding-top:30px; 2 padding-bottom:30px; 3 padding-left:40px; 4 padding-right:40px;

To understand, cascade large attributes with small attributes:

1 padding:20px; 2 padding-left:30px;

corresponding box model diagram:

The following syntax error:

1 padding-left:30px; 2 padding:20px;

You cannot write a small attribute in front of a large property.

The following questions will be done, stating that you understand:

Title 1, say the box below the true possessive width, and draw a box model diagram:

1 div{ 2 width:200px; 3 height:200px; 4 padding:10px 20px 30px; 5 padding-right:40px; 6 border:1px solid #000; 7}

True occupancy width = + + + + 1 + 1 = 262px

Title 2, say the box below the true possessive width, and draw a box model diagram:

1 div{ 2 width:200px; 3 height:200px; 4 padding-left:10px; 5 padding-right:20px; 6 padding:40px 50px 60px; 7 padding-bottom:30px; 8 border:1px solid #000; 9}

padding-left:10px; and padding-right:20px; Useless, because behind the padding big attributes, cascading off them.

To emphasize, Padding-left is not padding-left-width.

1 padding-left:10px; √ 2 padding-left-width:30px; x

The 3rd question, I now give you box model diagram, please write code, try to write in the most simple way

width:123px;

height:123px;

padding:20px 40px;

border:1px solid red;

Question 4th:

width:123px;

height:123px;

padding:20px;

padding-right:40px;

border:1px solid red;

Some elements, default with padding, such as the UL tag.

So, we want to make the station, easy to control, always like to clear this default padding:

1 *{ 2 margin:0; 3 padding:0; 4}

* The efficiency is not high, so we use the set selector, listing all the labels (without the back, there are professional to clear the default style of the style sheet, learning in the future):

1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ 2 margin:0; 3 padding:0 4}

2.4 Border

is the border. The border has three elements: thickness, linetype, color.

If the color is not written, the default is black. The other two properties do not write, kill, show no border.

1 border:1px dashed red;

All linetypes:

For example, border:10px Ridge red; There are subtle differences in chrome and Firefox, ie:

If the company inside the designer, Virgo, the pursuit of extremely high page restore, then you can not use CSS to make borders.

You need to use the picture, you need to cut the map. So, a few more stable: solid, dashed, dotted

Border is a large comprehensive attribute,

1 border:1px solid red;

is to put 4 borders, all set to 1px width, line solid line, red color.

The border attribute can be disassembled in two different ways:

1) Press 3 elements: Border-width, Border-style, Border-color

2) by direction: Border-top, Border-right, Border-bottom, Border-left

To disassemble by 3 elements:

1 border-width: 10px; → Border width 2 Border-style: solid; → Linetype 3 border-color: red; → Color.

Equivalent to:

1 border:10px solid red;

Now mind to understand that the original border is composed of three small attributes:

border-width Border-style Border-color .

If a small feature is followed by a space-separated number of values, it is the upper-right-left order:

1 border-width:10px 20px; 2 Border-style:solid dashed dotted; 3 Border-color:Red Green blue yellow;

Split by direction.

1 border-top:10px solid red; 2 border-right:10px solid red; 3 border-bottom:10px solid red; 4 border-left:10px solid red;

Equivalent to

1 border:10px solid red;

In the direction can also be another layer, that is, each direction, each element apart, altogether 12 statements:

1 border-top-width:10px; 2 border-top-style:solid; 3 border-top-color:red; 4 border-right-width:10px; 5 Border-right-style:solid; 6 border-right-color:red; 7 border-bottom-width:10px; 8 Border-bottom-style:solid; 9 border-bottom-color:red; Ten border-left-width:10px; One by one border-left-style:solid; border-left-color:red;

Equivalent to

1 border:10px solid red;

What do you use in your work? Very simple answer: what is easy to use?

Writing:

1 border:10px solid red; 2 Border-right-color:blue;

Writing:

1 border:10px solid red; 2 Border-style:solid dashed;

Border can not,

1 Border:none;

An edge does not have:

1 Border-left:none;

You can also adjust the width of the left border to 0:

1 border-left-width:0;

Iii. Standard Document Flow

Macro-speaking, our web page and Photoshop and other design software has the essential difference: the production of Web pages, is a "flow", must be from the top, like "Knit sweater." and design software, where you want to draw a thing, can draw.

We'll look at the microscopic phenomena of the standard flow:

1) Blank folding phenomenon:

For example, if we want to have no gaps between the IMG tags, we must connect tightly:

1

2) The height is not homogeneous, the bottom is aligned:

3) Automatic line-wrapping, a line of dissatisfaction, line-writing.

3.1 Block-level elements and inline elements

In the early stages of learning, you need to know that standard document streams are hierarchical. The labels are divided into two categories:

1) block-level elements

Occupy a line, cannot be tied to any other element

Can accept wide, high

If you do not set the width, the width will default to 100% of the father.

2) in-line elements

Parallel to other inline elements

Cannot set width, height. The default width is the width of the text.

In HTML, we have separated the tags from the class, which was divided into: text-level, container-level.

Text level: P, span, a, B, I, U, EM

Container level: Div, H Series, Li, DT, DD

CSS classification and the above is very similar to the P is not the same:

All text-level tags are inline elements, except that p,p is a text level, but is a block-level element.

All container-level labels are block-level elements.

3.2 Conversion between block-level elements and inline elements

Block-level elements can be set to inline elements

Inline elements can be set to block-level elements

1 div{ 2 Display:inline; 3 Background-color:pink; 4 width:500px; 5 height:500px; 6}

Display is the meaning of "show mode", which is used to change the inline and block-level properties of an element.

Inline is "in line".

Once, give a label setting

1 display:inline;

Then, the label will immediately become an inline element. At this point it is the same as a span:

At this point the div can not set width, height;

At this point, the div can be side-up with others

The same truth,

1 span{ 2 Display:block; 3 width:200px; 4 height:200px; 5 Background-color:pink; 6}

"Block" is the meaning of "blocks".

Make the tag a block-level element. At this point the tag is the same as a div:

At this point the span can be set to width, height

At this point the span must occupy a line, and no one else can side with him.

If the width is not set, the father will be full.

The standard flow inside limits very much, the nature of the label is disgusting. For example, we need to set the width and height of the side now.

So, immigration! Out of standard flow!

There are three ways to get an element out of the standard document flow in CSS:

1) Floating

2) Absolute Positioning

3) Fixed positioning

Four, floating

Floating is the most common property used in CSS layout.

1. box1{ 2 float:left; 3 width:300px; 4 height:400px; 5 Background-color:yellowgreen; 6} 7. box2{ 8 Float:left; 9 width:400px; Ten height:400px; One by one background-color:skyblue; 12}

Two elements are side-by, and two elements can be set to width, height (this is not possible in the standard flow just now).

Floating want to learn, must know three properties.

4.1 Floating element off-label

Proof 1:

Proof 2:

A span tag can be set to a width and height without having to turn it into a block-level element. So to prove one thing, is that all tags are not differentiated into the line, block. That is, once an element floats, it will be able to side-by, and can be set to a wide height. Whether it turns out to be a div or a span.

1 span{ 2 Float:left; 3 width:200px; 4 height:200px; 5 Background-color:orange; 6}

4.2 Floating elements Snap to each other

If there is enough space, then you will rely on 2 elder brother. If there is not enough space, then you will rely on Big Brother number 1th.

If there is not enough space against the number 1th brother, to stick to the left wall.

Right float: float:right;

4.3 Floating elements have a "surround" effect

Html:

1 <div> 2 3 </div> 4 <p> 123 literal text text text text text text text text text text text text text literal text text literal text text literal text literal text literal text literal text literal text literal text text literal text literal text text literal text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Word, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Word text 5 </p>

Let Div float, p does not float:

div blocks p, but the text in P is not blocked, creating a "word circumference" effect.

About floats we want to emphasize a little, floating this thing, we must follow a principle in the early days:

Is never a thing alone floating, floats are floating together, to float, we all float.

CSS Basics (iii)