05_CSS introductory and advanced skills (3)

The lesson review

!importantNot affect the principle of proximity, plus the far-label if! Important too dry, but close tag!

!importantNot affect the right of inheritance weight is 0, by inherited labels plus! Important dry, but also directly selected tab!

Box Model

All pages are box label, is rectangular, has a width, height, padding, border, margin properties.
The most important knowledge point, is the relationship between width and true width .

1. FIG box model will understand

div{
    width: 200px;
    background-color: greenyellow;
    padding: 20px;
    border:30px solid red;
}

Also said, padding, border is external expansion.

Margins in the 2.padding

padding is padding, refers to the distance to the border of the inner content.
There are many ways padding is provided
padding:50px;disposed in four directions are padding 50px;

Four values:
padding:10px 20px 30px 40px;equivalent to a single set on the right, bottom, left padding respectively equivalent to points 10, 20,

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

Three values:
padding:10px 20px 30px;
equivalent to

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;   /*左边的值没有指定，所以和右边相同*/

Two values:
padding:10px 20px;
equivalent to

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;   

Note that some elements with the default padding : such as ul , etc.,
in order to prevent these default padding, margin impact we create the page, we want to write in the beginning of the page:

<style type="text/css">
*{
    padding:0;
    margin:0;
}
</style>

All labels will be able to default padding, margin are removed .
Of course, so write efficient problem, do not worry, project lesson will tell you the most correct clear the default padding, the margin method.

3.border border

Borders have three elements: thickness, line style, color.
border:1px solid red;
px is the width of the border, Solid is linear border, Red is the color of the border.

Linear:

Solid work can only use (solid line) and Dashed (dashed line) , all other compatibility issues are linear, if you want to create other types of borders, must cut FIG!

Compatibility issues, IE browser and the Chrome browser frame, obviously look different.

Note that the three elements respectively correspond to the small three properties:
border:10px solid red;
equivalent to

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

We called border "Composite property."

In particular, if we want to one side, a separate set of three elements , it can split into 12 small properties:

border:10px solid red;
Equivalent to:

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

More specifically, boder-color can be written in the order on the lower right-left:
border-color:red yellow green;
top is red, the left, the right is yellow, green below.

Small Exercise 1:

border:10px solid black;
border-left-color:red;

Small Exercise 2:

border:10px solid black; 
border-color:black red;

Small Exercise 3:

border:10px solid red;
border-width:20px 10px;
border-color:black red blue green;

If one of the border we do not want, then write none
border-bottom:none;
at the border is not.

4.margin Margin

Outside the box of their own borders, the other from the outside of the box frame

margin there are four directions, namely, margin-top, margin-right, margin-bottom, margin-left.

Collapse phenomenon:

Remove ul dots, plus give ul

ul{
     list-style:none;
}

Centered strategy

1. The text is centered horizontally

If you want the text box in the middle level, then give the box to set
text-align:center;
this property inheritance.
It also has two possible values:

text-align:left;
text-align:right;

This method can only be the middle of things (text, images, form elements) text flow. Always remember, you want to set this property to the box can not be set to the text, images, form elements.

2. The box is centered horizontally

Let the box set:margin:0 auto;

margin: 0 auto;It is used to box, to add to the box itself. It is centered within their parent element.

3. The vertical center line of text

line-height:盒子的高度;
行高=盒子高， 此时单行文本就将在盒子中居中。注意，这个方法只能适用于单行文本，多行不适用。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            width: 400px; 
            background-color: yellow;
            border: 1px solid #ABCDEF;
            line-height: 60px;
            text-align: center;
            height: 60px;
        }
    </style>
</head>
<body>
    <p class="tip">点击查看更多</p>
</body>
</html>

标准文档流

1.什么是标准文档流

我们发现，Fireworks作图，可以在任何一个地方落笔；word这个软件则不一样，有一个“光标”位置，你必须在当前光标位置去书写文字。

第二行文字的位置，仰赖于第一行文字，比如第一行文字多，第二行文字就下移了；比如第一行文字大，第二行文字又下移了。

网页也是这样，从左至右、从上到下，有一个“光标”的概念。 标准文档流中，内置了很多性质。

2.标准文档流有什么性质

1.空白折叠现象

标签内的文字，不管有多少个空格、换行、tab，都会缩减为同一个空格。

2.高矮不齐，底边对齐

最最重要的性质来了，就是标准文档流中，把元素分为“块级元素”和“行内级元素”两种。

3.块级元素和行内级元素

块级元素是能单独在一行的，行内元素是不能单独在一行的。
我们把HTML标签分为两大类：

• 块级元素(block level)：div、h系列、p、ul、li、dl、dt、dd
• 行内级元素(inline level)：span、a、b、u、i、em、strong

块级元素：

• 能够设置宽度、高度；
• 不能并排；
• 不设置宽度，那么宽度将默认变为父亲的width

行内级元素：

• 不能设置宽度、高度；(但是可以设置行高)
• 可以并排；

4.行内元素和块级元素可以自由转换

给任何一个元素，设置
display:block;
它将转为块级元素，拥有块级元素的所有性质；

相仿的，给任何一个元素，设置
display:inline;
它将转为行内元素，拥有行内元素的所有性质；

有什么用？
把一个块 → 行内 丝毫无用，工作10年都遇不见。
但是行内 → 块 非常有用！

我们发现标准文档流是做不出网页的，因为它太迂腐：能设置宽高的不能并排，能并排的不能设置宽高。

So from the standard flow! There are three standard streams departing methods: floating, absolute positioning, relative positioning.

float

Floating a lot of theoretical knowledge, clearly and logically. But we have to consider the absorption, we ignore science today, we look at some fur "floating." We delve into the next class float.

Today only, not research.

1. Floating - do side by side with

English float is "floating" means, left is left floating. To float is two to be floating.
float:left;
right floating right.
float:right;

Floating elements will be affixed to the parent box side welt process, if it was blocked brothers, they will be attached to the side of his brother.

If you want to ensure his son's side by side, father have enough width.

Our next lesson will examine in detail float, remember one conclusion: floating elements can not support high father.