Positioning and floating

1.css background class styles:

     background-color background color of the
     background-image background image
     background-repeat background image repeat
     repeat-y only in the y-axis repeat
     repeat-x only in the x-axis repetition
     will not be repeated no-repeat, only shows a
     background-position of the background image Location
     value: two, respectively, represent the x and y directions. If only a write, then the two values are equal
     , for example: Jingdong, Taobao star Good
     Sprite FIG: each set of icons, the purpose is to reduce the http request
      background is put together all of all of the above
      background: color image repeat position
      background-size background image size

2. box model:

       Any element can be understood as a box, the box can be filled "stuff" inside stuff with "box packing" There is some space between the two boxes or more boxes, the box is not there a certain " distance "component (space) box model:

          margin margins distance between the box and the box
          border border
          padding padding 
          Content content 
margin together to write properties: 
          the margin-top margin-right margins and right margins bottom margin margin-bottom margin-left left outside from 
          this four attributes can be individually write out


        coauthored frame border attribute
        border-color color: border-top-color:; border-left-color: border-style style: can be divided up and down

        border-width Width: can be divided up and down when necessary to distinguish the order written: Example: border: 1px Solid Red;
        padding: left and right lower sides of the filled

      Defined width and height content portion only
      padding and border will stretch box
    size of the box content + padding + border


3.css layout:

       Positioning: top, left, right, bottom element only in the case of increasing the positioning will be used.

       Relative positioning: relative position to occupy their mobile top-left corner position

        Absolute positioning: absolute position not accounted for 1, if the parent with positioning, places recently left corner of the parent prevail

                                                               2, if the parent is not located, the nearest places left corner of the document shall prevail

       Fixed positioning: fixed regardless of the position does not account for the parent has no position, just listen to the browser to browser prevail.

Conversion positioning mode: when the element is added after the absolute positioning, fixing and positioning relative positioning mode element will block elements into the row, directly to the aspect.

Floating: Floating divided into two, left floating (float: left;) and a right float (float: right;). Will float out of the document flow. Floating allows default conversion element row within the block, the size of the elements depends on the width of the text size.

 

Guess you like

Origin www.cnblogs.com/mmnm/p/10947514.html