CSS Getting Started FAQs

1, three characteristics

1) Cascading: With the label with the weight, style conflicts, the following style will overwrite the previous.

2) Inheritance: When styling a parent element, the child element is affected by the style of the parent element without a style by default . Note that wide heights cannot be inherited.

Inheritable Properties:
◇ text color can be inherited color
◇ text-related attributes can be inherited
Row heights (Line-height) can be inherited
Text-align

Special cases:

a label is not affected by the color of the parent element by default

Common in the production nav to set the color a tag Li does not work, because the browser default style affects color: -webkit-link.

H1-h6 default unit is EM specific size to product operation

3) Priority level:

Tag Selector < class selector <id selector < inline style <! Important

features of 2,margin:

1) Vertical margin merge (Large)

2) Vertical margin collapse?

Workaround:

Sets the border for the parent element.
Set Overflow:hidden (trigger BFC) for parent element

3,padding value particularity

In block-level elements, if the default child element does not have a width set, setting the padding value for the current child element does not affect the width of the current child box. ("Inherited" box padding value does not affect)

4, floating

Why use floating?

Start is as picture text wrapping effect design Now more used in layout and navigation making

When does the float be cleared?
1, the parent container does not have a height set
2, all child elements of the parent container are set to float

How do I clean up floats? (Here are the 4 common types)
1,clear:both;
2, set Overflow:hidden for parent element (parent element not positioned)
3, using pseudo-elements

123456789101112

.clearfix:after{content: "";height: 0;display: block;visibility: hidden;clear: both;}.clearfix{  zoom: 1;  /*兼容ie6*/}

4,display:table;

12345678910

.clearfix:before,.clearfix:after{clear: both;display: table;/*表格模式*/}.clearfix{  zoom: 1;  /*兼容ie6*/}

　　

Positioning:

1, static standard flow display mode, can be converted to other positioning methods
2, Absolute (absolute):
1) Standard flow box, set absolute positioning to body as reference
2) In addition to the parent box set static, other positioning method, the child box with the parent box as the reference
3) Absolute positioning of the element off-label
4) Achieve the effect of mode conversion
Use scene: 1, Box press box 2, absolute positioning can use margin padding
3, relative (relative): relative to their own as a reference, will not be off the mark
Using the sub-absolute parent phase
4, fixed:
1) Use the Body label visible area as the reference
2) off-label
3) Achieve the effect of mode conversion
Level:
1) The element of the positioning has a hierarchical relationship
2) Only the elements of the positioning can be set Z-index
Characteristics:
1) The element setting has a default Z-index:auto after positioning (remove static)
2) Z-index value same element from behind
3) The larger the Z-index value, the higher the current element level
4) The larger the Z-index value of the parent element the higher the current element level is, the simpler

How is absolute positioning centered?

by setting the left:50%; Half of the width of the parent element
Set Margin-left:-The element itself is half the width;

Dual Wing layout

Purpose: Load the intermediate area before loading the document, then load the left and right sides

Features: Fixed on both sides, intermediate adaptive

123456789101112

<divclass="container">    <divclass="columns mainbox">        <divclass="inner">            我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡            机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个            会计课件发卡机看见看见我看见个会计课件发卡机看见看见        </div>    </div>    <div class="columns leftbox"></div>    <divclass="columns rightbox"></div></div>

　　

1 <style> 2         body {3             min-width:1000px; 4         } 5          6         . Columns {7             height:250px; 8             Float:lef T 9         }10         container {             height:250px;13             border:1px solid red;14         }15         . Mainbox {             width:100%;18             background:yellow;19         }20         . Inner {             0 margin:0 300px 250px;23             word-break:break-all;24         }25         . leftbox {width:250px;28 background             : red;29             margin-left: -100%;30         }31         . Rightbox {+ width:300px;34             background:blue;             margin-left: -300px;36         }37     </style>

This article transferred from: http://www.cnblogs.com/yiyefusheng/archive/2016/11/28/6104359.html

CSS Getting Started FAQs