CSS from getting started to forgetting

CSS is cascading style sheets abbreviation, Chinese called Cascading style sheet, used to control the performance of Web page data, can make the performance of the Web page and data content separation.

• First, three ways to introduce CSS
• Second, the CSS selector (Selector)
• Third, the common properties of CSS
• Four, Box model
• V. Document FLOW and floating
  • 1 Document Flow
  • 2 Add float (float)
  • 3 clearing floating (clear)
  • 4 Positioning (position)

First, three ways to introduce CSS

1. In-line
Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

2. Embedded
Embedded is the CSS style set in the Web page of the label pair

The label pair. The format is as follows:

3. Link-type
Introduce a. css file into an HTML file

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

Attention:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.

Second, the CSS selector (Selector)

The selector indicates the object of the style in {}, which elements in the Web page the style acts on

1 Base selector:

*: Universal element Selector, matches any element * {margin:0; padding:0;}

E: Tag Selector, matching all elements using the E tag p {color:green;}

. Info and E.info:
Class selector that matches all elements of the class attribute that contain info

.info { background:#ff0; }    p.info { background:blue; }

#info和E #info
ID selector that matches all elements of the id attribute equal to footer

 #info { background:#ff0; }   p#info { background:#ff0; }

2 Combo Selector

E,f
A multi-element selector that matches all E or F elements, separated by commas between E and F
div,p {color: #f00;}

B!
A descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F
#nav li {display:inline;} li a {font-weight:bold;}

E > F
child element Selector, matching all elements of e element F div > Strong {color: #f00;}

E + F
Adjacent element selector, matching all sibling elements immediately following the E element f
p + P {color: #f00;}

Note Nested rules:
Block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
Block-level elements cannot be placed inside p.
There are several special block-level elements that can contain only inline elements and cannot contain block-level elements. Div can be included in H1,h2,h3,h4,h5,h6,p,dt,li
Block-level elements are tied to block-level elements, inline elements, and inline elements.

/*错误的*/<div>

3 Property Selector

E[att] 匹配所有具有att属性的E元素，不考虑它的值。 （注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性， 比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

4 Pseudo-Class selectors:

Pseudo-Class selector: Designed to control the display effect of links

a:link（没有接触过的链接）,用于定义了链接的常规状态。a:hover（鼠标放在链接上的状态）,用于产生视觉效果。a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。/*伪类选择器 : 伪类指的是标签的不同状态:a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态*/a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

Third, the common properties of CSS

1 Color Properties:

<div style="color:blueviolet">ppppp</div><div style="color:#ffee33">ppppp</div><div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>

2 Font properties:

font-family:‘Helvetica,Arial,"Courier New"‘font-size: 20px/em/largerdefault size = 16pxem = pixels/16font-style:ilatlic/normal/obliquefont-weight: lighter/bold/border/100-900

3 Background properties:

background-color: cornflowerbluebackground-image: url(‘1.jpg‘);background-repeat: no-repeat;(repeat:平铺满)background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)简写：<body style="background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)"><div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">

Note: If the background attribute is added to the body, remember to add a height to the body, otherwise the result is abnormal, this is because the body is empty, unable to prop up the background image, in addition, if you want to set a width=100px at this time, you can not see the effect, unless you set the HTML.

4 Text properties:

font-size: 10px;text-align: center;横向排列line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比p { width: 200px;height: 200px;text-align: center;background-color: aquamarine;line-height: 200px; }vertical-align:top,middle,bottom/baseline,sub,super,-10pxtext-decoration:none/inherit/underline/overline/line-thoughtext-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比text-shadow:阴影letter-spacing: 10px;word-spacing: 20px;direction: rtl;text-transform: capitalize;

5 Border Properties:

border-style: solid;border-color: chartreuse;border-width: 20px;简写border: 30px rebeccapurple solid;

6 List Properties

ul,ol{ list-style: decimal-leading-zero; list-style: none; list-style: circle; list-style: upper-alpha; list-style: disc; }

7 Dispaly Properties

noneblockinline

Four, Box model

?

Note that 1:body is also a box
The border is positioned by default in the upper-left corner of the browser window, but does not have a border to the browser's window, because the body itself is also a box (with the outer HTML).
By default, the body will have a margin of several pixels from the HTML, because the individual browsers are different, so the box in the body will not close to the border of the browser window.
>>> Workaround:

body{    border: 1px solid;    background-color: cadetblue;}body{    margin: 0;}

Note 2:margin collapse (boundary collapse or boundary overlap)

The overlap of the margins is only generated between the upper and lower margins of the normal flow document, and this seemingly odd rule has its practical significance.
When we arrange the block-level elements of a series of rules (such as paragraph p) up and down, there is no double distance between the blocks because of the margin overlap.

Brother Div: above div margin-bottom and below Div's margin-top will collapse, that is, will take the upper and lower margin of the maximum value as a display value

Parent-Child Div: If there is no border,padding,inline content in the parent Div, the margin of the child div will be searched upward until a label is found that includes one of the border,padding,inline content, Then press this div for margin
>>> Workaround:

V. Document Flow vs. floating 1 document Flow

Document flow is exactly the mechanism of the document flow model, the layout mechanism of HTML is to use the document Flow model, that is, block elements (blocks) in the page exclusive line, top-down arrangement, inline element (inline) is not exclusive line.

?

As you can see, even if the width of the div1 is very small, the line in the page can tolerate Div1 and div2,div2 and will not be ranked behind Div1, because the DIV element is exclusive. Note that these theories refer to the div in the standard flow.

The document flow can also be understood as the output order of the document, the standard flow is the left-to-right, top-down output form that we usually see, and each element in the page is sorted and displayed in this order. float and position two attributes to detach an element from the document stream.

2 Add float (float)

No matter how complex the layout, the basic starting point is: "How to display multiple div elements on one line." Floating can be understood as leaving a DIV element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows.

1 floating a DIV element

For example, assuming that the div2 floats, then it will be out of the standard flow, but Div1, Div3, Div4 are still in the standard flow, so Div3 will automatically move up, occupy the div2 position, and re-form a stream.
?

As can be seen, because of the div2 set floating, so it no longer belongs to the standard flow, Div3 automatically up the displacement div2 position, Div1, Div3, div4 in order to become a new stream. And because the float is floating on the standard flow, so the DIV2 block a part of the Div3,div3 looks "short"

The div2 here is left-floating (float:left;), which can be understood as floating up, left-aligned, right-floating (float:right;) and, of course, on the right. Left and right are the left and right edges of the page.

If we use the div2 to float right, it will be as follows:
?

At this time div2 by the right edge of the page arrangement, no longer obscure div3, the reader can clearly see the above-mentioned Div1, Div3, div4 composition of the flow.

2 Floating multiple DIV elements

Add Div2 and Div3 to the left float, effect
?

Similarly, because Div2, div3 float, they no longer belong to the standard flow, so div4 will automatically move up, and Div1 form a "new" standard flow, and the float is floating on the standard flow, so div2 block div4.

Cough, to the point, when the Div2, Div3 set floating, Div3 will follow Div2, do not know if the reader has found, until now, div2 in each case is floating, but did not follow the DIV1. Therefore, we can draw an important conclusion:

If a DIV element A is floating, if the previous element of a element is also floating, then a element will follow the previous element (if one row cannot fit the two elements, the a element will be squeezed to the next line);
If the previous element of the A element is an element in the standard flow, the relative vertical position of a is not changed, meaning that the top of a is always aligned with the bottom of the previous element.

The order of the div is determined by the order of the div in the HTML code.
Near the edge of the page is the front, away from the edge of the page after the end.

3 to cite a few more examples

If we set Div2, Div3, div4 to the left float, the effect is as follows:

?

According to the above conclusion: starting from DIV4 analysis, it found that the upper element div3 is floating, so div4 will follow Div3, DIV3 found the upper element div2 is also floating, so Div3 will follow the Div2 While Div2 found that the upper element div1 is an element in the standard flow, the relative vertical position of the div2 is unchanged, and the top is still aligned with the bottom of the DIV1 element. Because it is left floating, the left side is near the edge of the page, so the left side is front, so Div2 is on the left.

If the Div2, Div3, Div4 are set to the right floating, the effect is as follows:
?

The truth and left floating basically the same, just need to pay attention to the corresponding relationship. Because it is floating right, so the right side is near the edge of the page, so the right side is front, so div2 on the far right.

If we float the div2 and the div4 to the left, the following:
?

Still according to the conclusion, Div2, Div4 floating, out of the standard flow, so Div3 will automatically move up, and div1 constitute a standard flow. Div2 found that the previous element div1 is an element in the standard flow, so the div2 is not changed relative to the vertical position, aligned with the bottom of the div1. Div4 found that the previous element div3 is the element in the standard flow, so the top of the DIV4 is aligned with the bottom of the div3, and is always true, as it can be seen that div3 moves up after the div4, Div4 always guarantees its top and last element Div3 (elements in the standard flow) The bottom of the alignment.

At this point, it has been mastered to add floats, but there are also clear floats that have the top of the base clear float very easy to understand.

3 clearing floating (clear)

Before the element floats, that is, in the standard flow, it is vertically arranged, and floating can be understood as a horizontal arrangement.

Clear float can be understood as breaking the horizontal arrangement.

The clear floating keyword is clear and is defined as follows:

None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed

According to the above basis, if there are only two elements in the page div1, Div2, they are left floating, the scene is as follows:
?

At this time div1, div2 are floating, according to the rules, DIV2 will follow the div1 behind, but we still hope that div2 can be arranged under the div1, like Div1 no float, div2 left floating.

This is the time to use clear float, and if it's purely official, the reader might try to write: Add Clear:right to the Div1 CSS style, and understand that floating elements are not allowed on the right side of the DIV1, because Div2 is a floating element, Therefore, a row is automatically moved down to satisfy the rule.
This understanding is not correct, and doing so has no effect.

For CSS Clear floating (clear), be sure to keep in mind that this rule only affects the elements that use the purge itself, and cannot affect other elements.

We're trying to get div2 to move, but we're using clear float in the CSS style of the div1 element, trying to force the div2 down by clearing the floating element (clear:right;) on the right side of the DIV1, which is not possible because this clear float is called in Div1, It can only affect DIV1, can not affect div2.

According to the conclusion, in order for Div2 to move down, it is necessary to use floating in the Div2 CSS style. In this example, the left side of Div2 has a floating element div1, so as long as the clear:left is used in the Div2 CSS style, to specify that the DIV2 element is not allowed floating elements to the left, so Div2 is forced to move down one line.

So if there are only two elements in the page DIV1, Div2, are they all floating right? Readers should now be able to speculate on their own scenarios, as follows:
?

At this point, if you want to move div2 down to Div1, and we want the DIV2 to be moved, you must call float in the div2 CSS style, because the float affects only the elements that call it.

You can see that there is a floating element on the right side of the Div2 Div1, then we can use Clear:right in the Div2 CSS style, to specify that the right side of DIV2 does not allow floating elements, so div2 is forced to move down one line to the bottom of div1.

4 Positioning (position)

1 static, default static: No special positioning, objects follow normal document flow.
Attributes such as top,right,bottom,left are not applied.

2 position:relative

Relative: Objects follow normal document flow, but will be offset in normal document flow based on attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.

Absolute: objects are out of normal document flow and are absolutely positioned using attributes such as Top,right,bottom,left. And its cascade is defined by the Z-index property.

If you set position:relative, you can use Top,bottom,left and right to move this element relative to where the element should appear in the document. that is, the element actually still occupies the original position in the document, but is visually moved relative to its original position in the document.

When Position:absolute is specified, the element is detached from the document and is not occupied in the document, and can be positioned exactly as set top,bottom,left and right .

If an element is absolutely positioned, the reference is based on whether the nearest element is set relative to its position, and if there is a setting that will be positioned near its nearest element, the HTML will always be found if there is no relative positioning element for its ancestor element.

3 position:fixed

In theory, the element that is set to fixed is placed in a specified coordinate in the browser window, which is fixed in this position, regardless of whether the window is scrolled or not.

Fixed: object is out of normal document flow, use attributes such as top,right,bottom,left to position the window as a reference point, and when scroll bars appear, the object does not scroll. And its cascade is defined by the Z-index property.

Note: If an element is set to Position:absolute | Fixed Then the element cannot set float. This is a common-sense point of knowledge because it is two different streams, one is a floating stream and the other is "location flow". But relative can. Because the space it originally occupies still occupies the document stream.

CSS from getting started to forgetting