Html/css learning notes (1), htmlcss learning notes

Html/css learning notes (1), htmlcss learning notes

========================================================== ========================================================== =============== Box Model 1. background 1.1 background-color background-image: url (""); background-repeat background-size: (ratio of the X axis to the Y axis) background-position background-attachment: fixed; (The background image is fixed and does not scroll) 1.2 composite style background: color iamge position repeat; 2. border 2.1 composite syntax border: border-width border-style border-color; 2.2 border rounded corner border-rad Ius 3. padding: 20px 10px; top and bottom margins: 20px left and right margins: 10px padding: 20px 30px 4px; top and right bottom padding: 10px 20px 30px 40px; top and right bottom left 4. the margin 4.1 write method and padding method are similar. 4.2 Note. child-level margin-top will penetrate the parent-level Avoidance Method in certain circumstances: 1. add a border for the parent level 2. add voerflow: hidden to the parent level; 3. replace margin-top with parent-level padding-top. B. the margin-top and margin-bottom of the sibling relationship are stacked 5. text font-size text size font-family font color text color line-height text lines height text-align text alignment text: (pixel/em ); first line indent font-weight text emphasis (normal bold bolder) font-style text skew (normal italic oblique (italic) font-decoration text modifier (none underline line-through) letter-spacing letter spacing (px) word-space word spacing (in the unit of space for parsing) Summary. box Model url (". /img/box model .jpg "); B. common Compound attributes: background-color background-iamge background-position background-repeat border: border-width border-style border-color padding: upper right lower left margin: top right bottom left font: font-style font-weight font-size/line-height font-family; ========================================================== ========================================================== =============== label 1. common tag title Tag dual tag semantics: webpage title weight maximum div tag dual tag semantics: meaningless h tag dual tag semantics: title default style: font-size font-weight margin h1 weight Max. h2 followed by p tag dual tag semantics: paragraph default style: margin p tag nesting do not contain block element label ul tag semantics: default unordered list style: margin padding-left list-style-type li label semantics: list ITEM default style: list-style-type; ol tag semantics: ordered list default style: same as ul dl tag dictionary tag semantics: custom list default style: No dt tag semantics: List title default style: NO dd tag semantics: List description default style: features of fast attribute labels in margin-left Summary: 1. by default, the width of the parent level is 100%. supports all css styles. 3. exclusive row ================================================= ========================================================== ==================== attributes of the label inner-chain attribute of the inline attribute: 1. tags with the same attribute are listed in the first row. content support width 3. width and height are not supported. Up and down padding and margin 4 are not supported. the size of the parsing interval for code line breaks depends on the size of the font-size of the parent level. span tag semantics: meaningless strong tag semantics: emphasize (BOLD) default style: font-weight is relatively high em tag semantics: emphasize (italic) default style: font-style weight is relatively high a tag semantics: hyperlink default style: color text-decoration cursor; note: target = "_ self" (default) the current page opens target = "_ blank" a new window opens herf properties: 1. to connect to the URL, add http: // 2. # indicates the attributes of the inline block attribute labels connecting to the current page: 1. tags with the same attribute are listed in the first row. content support width 3. supports all css styles. 4. the size of the code line break to be parsed depends on the font-size of the parent class. img Tag single-label semantics: Image default style: the default border summary label type in the earlier version browser is converted to none: display: none; block attributes: display: block; inline: display: inline-block; ========================================================== ========================================================== =============== floating style and feature 1. floating elements are arranged in the same row. the floating element content is supported in width 3. floating elements support all css styles. 4. floating elements are separated from the document stream. 5. the floating element is upgraded to a half level (the property covers the content overflow and can be used to wrap the text div) (To be continued ......)