label	explain
a:link	No browser visited
a:visited	Visited browsers
a:hover	When the mouse passes over the link
a:active	When the mouse presses the link

• position positioning

value	explain
static	Static positioning
relative	Relative positioning: move according to your original position and keep the original position (generally, the tool person with absolute positioning will position the parent)
absolute	Absolute positioning: 1. If there is no ancestor element or the ancestor element is not located, the browser shall prevail. 2. If the ancestor element has positioning (relative, absolute and fixed positioning are OK), move the position with the nearest positioned ancestor element as the reference point. 3 the absolute positioning does not occupy the original position
fixed	Fixed positioning

• The origin of Zi Jue Fu Xiang
  Son Jue father phase: if the child is absolutely positioned, the parent should use relative positioning
  1. The child is absolutely positioned and does not occupy a position. It can be placed anywhere in the parent box without affecting other brother boxes.
  2. The parent box needs to be added with positioning restrictions, and the box is displayed in the parent box.
  3. When the parent box is laid out, it needs to occupy a position, so the father can only be relatively positioned
  This is the origin of the son's absolute father phase, so relative positioning is often used to locate the parent
  Summary: because the parent needs to occupy a position, it is relative positioning. If the child does not need to occupy a position, it is absolute positioning
  Note: the box with absolute positioning cannot be horizontally centered through margin: 0 auto, which is convenient for you
  a. Left: 50% moves the box to the horizontal center of the parent element on the left
  b,margin-left: -100px; Let the box move left to half of its own broadband
  c,margin-top:100px; Move the box to a distance of 100pxd from the upper edge

• Fixed positioning
  1. Move elements with the browser's visualization window as the reference point
  a. It has nothing to do with the parent element
  b. Cannot scroll with scroll bar
  2. Fixed positioning does not occupy the original position
  Fixed positioning is off standard. In fact, fixed positioning is also a special absolute positioning
  Fixed positioning algorithm:
  1. Let the fixed positioning box left:50% walk half the distance to the visual area of the browser (also known as the center of the page)
  2. Let the fixed positioning box: half the width of the margin left layout center. By taking half the distance of the wide band of the layout center, the fixed positioning box can be aligned close to the right side of the layout center.
  Note: floating elements will not suppress the text from the following standard, but fixed positioning and absolute positioning will suppress all the contents of the following standard stream

• Positioning stacking order z-index
  1. The higher the value is, the value can be a positive integer, a negative number or 0. The default is auto
  2. If you define that - at the front, use the writing order to stack, and the latter takes the top
  3. No unit can be added after the number
  4. Only the positioned box has the z-index attribute

{z-index:1;} The default is auto,1 than auto Big, will be at the top

-display property
display:none; Hidden objects do not occupy position after hiding
display:block; In addition to converting to block level elements, the meaning of the element is also displayed

• visibility property
  The visibility attribute specifies whether an element is visible or hidden
  a,visibility: visible； Element visible
  b,visibility: hidden； Element hiding
  visibility hides the element and continues to occupy its original position

• Overflow overflow

Attribute value	describe
visible	Do not cut content, do not add scroll bars
hidden	Do not display the contents beyond the size of the object, and the exceeding part is hidden
scroll	The scroll bar is always displayed regardless of what is exceeded
auto	Beyond the automatic display of the scroll bar, not beyond the display of the scroll bar

Generally, we don't want the overflow content to be displayed, because the overflow will affect the layout. However, if there is a positioning box, please use overflow: hidden carefully, because it will hide the redundant part

Css advanced skills

• Sprite map

css part:
 span{
            display: inline-block;
        
        }
       .p{
        width: 100px;
       height: 112px;
       background: url(image/abcd.jpg) no-repeat -493px -276px;

       }
       .i{
        width: 60px;
       height: 108px;
       background: url(image/abcd.jpg) no-repeat -327px -142px;

       }
       .n{
        width: 108px ;
       height: 109px;
       background: url(image/abcd.jpg) no-repeat -215px -141px;

       }

       .k{
        width: 105px;
       height: 114px;
       background: url(image/abcd.jpg) no-repeat -495px -142px;

       }
       HTML part:
       <div>
        <span class="p">p</span>
        <span class="i">i</span>
        <span class="n">n</span>
        <span class="k">k</span>
    </div>

• Mouse style cursor
  li{cursor:pointer}

Attribute value	describe
default	Xiaobai default
pointer	Little hand
move	move
text	text
not-allowed	prohibit

• Form outline
  Add outline:0 to the form; Or outline: none; After the style, you can click the default border color
• Prevent text field dragging

textarea{
  resize:none;
}

• Vertical align attribute application
  Let the picture and text appear on one line
  Remove the vertical align: Middle | top | bottom gap between the picture and the bottom

value	explain
baseline	Default, baseline
top	Align the top of the element with the order of the most element in the line
middle	Place the element in the middle of the parent element
bottom	Align the - element with the top of the lowest element in the row

• Overflow text ellipsis display
  Single line text overflow display ellipsis:
  1. Force one line to display the text white space: nowrap (default normal line wrap)
  2. The excess part is hidden: overflow;
  3. Text ellipsis is used to replace the excess text overflow: ellipsis;

• Application of margin
  1. Move the margin of each box to the left -1px just to press the border of the adjacent box
  2. When the mouse passes by, you can raise the level of the current box (if there is no positioning, add relative positioning to reserve the position; if there is positioning, add z-index)

• Text around floating elements

• Page layout

css part:
box a{
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  color: #333;
  margin-top: 40px;
}
/* Pay attention to the weight problem */

.box .prev,
.box .next{
width: 85px;

}
.box .current,
.box .elp{
    background-color: #fff;
border: none;

}
.box input{
 height: 36px;
 width: 45px;
 border: 1px solid #ccc;
 outline: none;

}
.box button{
  width: 60px;
  height: 36px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}
body part:
<div class="box">
    <a href="#"Class =" prev "> & lt; previous</a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#" class="eip">...</a>
    <a href="#"Class =" next "> & gt; next page</a>
    To the first
    <input type="text">
    page
    <button>determine</button>
    
</div>

• Application of triangle

• Common triangle for commodity purchase display

css part:
.box1{
width:0;
height: 0；
Turn up the upper broadband
border-top:100px solid transparent;
border-right:50px solid red;
The left and off-duty borders are set to 0
border-bottom:0 solid bule;
border-left:0 solid green;
}
html part:
<div class=box1></div>

• Small triangle project code

css part:
box1{
width: 0;
height: 0;
border-top: 30px solid pink;
border-right: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid greenyellow;

}
.box2{
   width: 0;
   height: 0;
   /* Change the unnecessary part to transparent */
   border: 50px solid transparent;
   margin:15px auto;
   border-top-color: teal;
}
.jd{
 position: relative;
 width: 120px;
 height: 249px;
 background-color: pink;

}
.jd span{
    position: absolute;
    width: 0;
    height: 0;
    right: 15px;
    top: -10px;
    border: 5px solid transparent;
    border-bottom-color:red ;

}

body part:
<div class="box1"></div>
<div class="box2"></div>
<div class="jd">

• Each project requires css initialization. The following is JD's initialization code, which can be easily used for other project development to prevent omission and ensure development speed. It can be properly saved for copy

/* Clear the inside and outside margins of all our labels */
* {
    margin: 0;
    padding: 0
}
/* em The text in italics and i is not tilted */
em,
i {
    font-style: normal
}
/* Remove the dot of li */
li {
    list-style: none
}

img {
    /* border: 0 Take care of the lower version of the browser. If the picture contains a link, there will be a border problem */
    border: 0;
    /* Cancel the problem of blank gap in picture album */
    vertical-align: middle
}
/* When we pass button with the mouse, the mouse becomes a small hand */
button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}
/* Specify font */
button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* css3 Anti aliasing to make the text clearer */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* Clear float */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}