Day 49-css Supplement (end) [Floating and positioning]

Source: Internet
Author: User

Teacher's Notes:

Previously review:

day49 Chaos is the ladder. 1. Previously review HTML HTTP and HTML document bodies<!Doctype HTML>HTML Head<Meta>                <title>                <Link>icon<style>   Direct write CSS style <link> css file <script> js file body Common Tags:                    Div span H1~h6 A                            P img Form Input text                            Password number Email                            Radio checkbox Sumbit                        button Reset Select textarea                Label ul ol DL Table                                        Tag Property ID class style                 Input       Name value type form to upload the file.                        Can't remember, but can remember the one (after Class) Select Mutiple Multi-Select                        Selected default Check optgroup Group display (Label property = Group name) checkbox                    Checked default check hidden hide input disabled Input Type=text/password readonly---read-only Placehol            Der-and tips for CSS: Find a label to modify the style selector (find label):                Basic selector Tag Selector #ID选择器. class selector * (embracing) Selector level selector                Descendant Selector (space) sub-selector (>) adjacent selector (+)/(label+input) Brother Selector (~) Combination selector (,) propertySelector label can be custom properties [Egon] [egon= ""]/input[type= "button"] Pseudo-class selector a:hover (browser how to see) Selector priority: 1.!important Don't Speak                     Reason 2. Inline (write style property directly on label) 3.ID selector 4.class Selector                        10 5. Tag Selector 1 6. Inherited CSS Properties:                Color text background background Background-color background-img Background-position (concrete) font font font-family f                            Ont-size font-weight line-height (vertical center) text-aligin (horizontal center)                                Border Border Border-color Border-style borfer-width Border:1px solid red;                                Border-radius CSS Box Model: content (contents)                    Padding (inner fill) border (border) magin (margin) margin:0 Auto;                                                                                                                                                               (center of Block label) a text-decoration=none (remove underline)
View Code

Today's content:

Float (float) and position (positioning)

        Float (floating) left right none floating rule:                                            Float only control yourself if the previous label is also floating, put it next to it if the previous label is not floating, start placing it on the next line                    Clear float: Clear:left right both                None. Clearfix:after {content: "";                Display:block;            Clear: "Both";                }: After and: Before display: block-level label features: Exclusive line, can be set long and wide   Inline tag features: can be placed on one line, can not be set long and wide, according to the content of the adaptive length and width of none---not show block --Block level inline--and inline inline-block--both on one line and Set length and width positioning: relative (relative positioning) positioning according to their original position () aBsolute (absolute positioning) locates (usually with relative positioning) fixed (fixed positioning) based on the upper left corner of the element that has been positioned relative to                             ) Z-index modal pop-up box z-index:999 z-index:1000
View Code

Day 49-css Supplement (end) [Floating and positioning]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.