06_CSS introductory and advanced skills (4)

review

• CSS: responsible for style layers, Cascading Style Sheets cascading style sheet. CSS2.1, the latest version of CSS3.

• CSS selectors: which elements plus style selection. Three kinds of basic choices: label p, id selector # id, class selector; Advanced Selector four kinds: descendant selectors div p, the intersection selector div.haha, and set the selector div, p, wildcard *

id selector: full-page id unique;

class selector: a plurality of the same class label can take:
<p class=”para1 spec”></p>

class selectors do not require unique page
<p class=”para1 spec”></p>
<h3 class=”spec”></h3>

• Inherited:
  which properties can be inherited: font-, text-, the beginning of the color, line- of.
  Not inherited: background-colorattribute box model, float, positioning

body{
   font-size:12px;
}

• Laminating properties:
  meet conflict, who to listen to. There is a very tight map. ! important lifting weights, you know! What is important can improve, can not promote what? For example, it can not affect the principle of proximity: be closer is near, far to write important useless; can not inherited lifting weights:! Selected is selected, the inherited important can not get rid checked in!.

• Text attributes:

font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:”Consolas”,”Microsoft Yahei”,”SimSun”;
font:12px/24px ”Consolas”,”Microsoft Yahei”,”SimSun”;

• Box Model

width:200px;   /*盒子内容的宽度*/
height:200px;  /*盒子内容的高度*/
padding:10px;  /*内边距*/
border:1px solid red; 
margin:40px;

We add here emphasize: padding area background color; and the current level of knowledge, you can not give padding
locales color alone;
padding: 10px 20px 30px 40px;
on the right, down, left

padding:10px 20px 30px;
On the left, under

Three elements of the border:

border-width:1px;
border-style:solid;
border-color:red;

We can continue to split:
border-top-style:dashed;

The wording of the three elements can be left on the bottom right:
border-width:1px 2px 3px 4px;

• Float: We have no scientific reports, some properties still do not know, it does not matter the job we have to do. Floating is doing because we already know: the production side by side.

Standard document flow is divided into two elements:
block-level: width and height can be provided, not side by side, such as div, H, P, Li, dt, dd
inline-level: width can not be set high, can be parallel, such as span, a, b, u, i
floating, you can let the elements but also side by side, but also set the width and height.

In-depth understanding of the nature of floating

1. The floating element flow out of the standard, the standard does not block the flow of the divided row

Standard flow out of a total of three methods:
Floating:
float:left;
Absolute positioning:
position:absolute;
fixed positioning:
position:fixed;

Floating element has flow out of the standard, there is no inline, block the points.

In the span of a classic standard stream inline elements, but the floating, can not be transferred directly setting block width and height.

<span class="no1">1</span>

    .no1{
        float: left;
        width: 300px;
        height: 50px;
        background-color: orange;
    }

div stream is a standard classical block-level element, the flow is not provided in the standard width is the father automatically stays full width. However float, and do not automatically support full, but automatically shrink, and shrink to the size of the text inside:

2. turn welt

Left float:
left internal border of the old parent box. 1 ← 2 ← ← Old Old Old. 3 ← 4

If before the brothers had enough to hold their own, such as the old 4 there is not enough space for side by side, then turn to find the old 3, 2 old, old one, the father of the border to paste:

2.2 welt turn
left float:

Inside the left border of the parent box old. 1 ← 2 ← ← Old Old Old. 3 ← 4

If before the brothers had enough to hold their own, such as the old 4 there is not enough space for side by side, then turn to find the old 3, 2 old, old one, the father of the border to paste:

But do not drill:

3. The margin collapse phenomenon disappear vertical direction

collapse margin is the standard flow properties, because the standard floating off, do not have this fix.

4. let out a standard flow

<div class="box1"></div>  → 浮动
<div class="box2"></div> → 没有浮动

Note that this futile nature, work in the production of "gland" use location, instead of the floating tips .

Orange box float, and let out a stream of location criteria, the standard cursor still in the top left of the stream, so rendering blue box on the upper left corner, is to suppress the orange box.

5. Word Wai

Clear float

1. The father can not be high floating support son

The following code, no1, no2 are floated, box can not be highly son support:

<div class="box">
    <p class="no1"></p>
    <p class="no2"></p>
</div>

Because the father can only be elements hold high the standard flow.

2. a recipe cure this disease

There is a property called
overflow:hidden;
able to resolve the matter.
Its time to learn overflow:hidden;what was meant

English overflow "overflow" means; hidden meaning is hidden.

This property means, is to let the content overflow borders hidden.

Like orange peel is orange peel, but we found that can cure a cold, that is, there are many such things in the world, eight pole could not beat the thing, actually linked.
overflow:hidden;Is used to hide the contents spill out of the border, it is used in magic. However, we found that overflow:hidden;there are other use magic, is able to let his father know themselves off the subject of his son, his father was able to make his own son off the subject of a high degree of support.

<div class="box">  →不能被撑出高了，解决办法：  overflow:hidden;
    <p class="no1"></p>  → 脱标了
    <p class="no2"></p> → 脱标了
</div>

3. The box can be highly float inside Guanzhuziji

A high degree of boxes, can resist the temptation of internal floated elements will not affect the others inside the float, it is not affected by others.

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Clear float 4. Method 1: clear: both;

We found that the height of the box can hold his son, but if the parent is not the height of the box, then the sequence is messed up, went to the second sequence following the first sequence of:

Very simple solution is to add to the back of the box
clear:both;

clear meaning is clear, its value can be:
clear:left;clear the impact left floating brought
clear:right;clears affect the right to bring a floating
clear:both；clears affect all floating brought

This thing does not work well, because:

• box or not high
• margin failure

5. Clear float Method 2: partition wall

Partition method is very commonly used in Web pages two very large part, we always want the interval a wall, the interior of the two parts are floating in there, do not affect each other, tips margin is still failure, you can with the height of the wall to simulate the interval.

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Although the margin failure, but you can use tips to make up the high wall can be used as an interval.
But the case is still not high.

Clear float 6. Method 3: Method interior

cl is clear: both;

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div class="cl"></div>
</div>

<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <div class="cl"></div>
</div>

Now margin easy to use, and the box also has high, all things are solved! But there are problems:

HTML tags are placed a little too much. These tabs do not semantic, it looks uncomfortable.

7. Clear float Method 4: overflow: hidden;

<div class="box1">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

<div class="box2">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

Summary: Remember, there are many ways to clear float, but many are meaningful in an interview. Work:

• We always like to have an internal floating the parent box plus overflow: hidden;
• We always like two of the most facades interval

<div class="header">
    
</div>
<div class="cl h18"></div>
<div class="content">
    
</div>
<div class="cl h18"></div>
<div class="footer">
    
</div>