Application method of css Box Model, background and list
This article mainly introduces the relevant knowledge of "the application method of css box model, background and list". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "the application method of css box model, background and list" can help you solve the problem.
The value of border-style:
None none
Dotted dot
Dashed dotted line
Solid solid line
Double double solid line
Margin:
If the outer margins are set for the two adjacent elements in the vertical direction, the outer margins will be merged.
Merge height = the larger of the two outer margins that are merged
The actual height of the element = upper border + upper inner margin + content height + lower inner margin + lower border
The actual height of the element on the page is: upper outer margin + upper border + upper inner margin + content height + lower inner margin + lower border + lower outer margin
The hover attribute enables the display of child elements when hovering over the mouse:
Display attribute
Div {width: 200px
}
/ * Supplementary style * / ul {margin-left:-36px
} li {display: none
} div:hover li {display: inline-block; list-style: none
}
Home Appliances
Refrigerator
Air Conditioner
Washing machine
Inline displays the element as an inline element without a newline character before and after the element
The width and height of inline elements cannot be set, and the outer margin can only be set to the left and right, not up and down.
List demo:
Display attribute
* {margin:0;padding:0;} .wrap {width: 220px; background-color:#f2f4f6; border:1px solid # ececec; margin:0 auto
} .list {width:100%; height:150px; background-color:#040a10; text-align:center; color:#fff; line-height:150px; font-size:20px; font-weight:bold
} li {list-style: none; border-bottom:1px solid # d9dde1; font-size:14px; line-height:1.5em; margin:0 15px; padding:10px 5px 5px 5px
} li:last-child {border-bottom:none
}
Front-end course arrangement
HTML+CSS basic course
456605 people are studying.
HTML+CSS basic course
456605 people are studying.
HTML+CSS basic course
456605 people are studying.
Mouse over to display demo:
Display attribute
* {margin:0;padding:0;} .big {width: 150pxpolitical margin: 10px auto 0 auto;background: # f2f4f6 borderline height: 1px solid # ddd;} h4 {height: 40pxlightlineheight: 40pxtranstextAfter align: center;} .div1 h4 {border-bottom: 1px solid # ddd;} .div2 h4 {border-bottom: 1px solid # ddd;} ul {background-color:#fff;display: none;} ul li {height: 30pxscape lineheight: 30pxpolitics marginal color left: 58pxpolitical listroom style none: } .div1: hover .elec {display: block;border-bottom: 1px solid # ddd;} .div2: hover .wash {display: block;border-bottom: 1px solid # ddd;} .div3: hover .clothes {display: block;border-top: 1px solid # ddd;}
Home Appliances
Refrigerator
Washing machine
Air Conditioner
Wash and protect
Detergent
Disinfectant solution
Softener
Clothing
Shirt
trousers
Hoodie
Background-color:transparent transparent, which is the default
Background area includes content + inner margin + border, excluding outer margin
Background-repeat:repeat 、 no-repeat 、 repeat-x 、 repeat-y 、 inherit
Background-attachment:scroll (default) / fixed
Background-position:
Value (x y) (x% y%) (only one parameter represents the second default center) / top/bottom/left/right/center (horizontal vertical center)
Background abbreviation: the following attribute values are in no order
Ordered list style:
List-style-position:inside (embedded in text) / outside (on the left side of all text)
Demo
Li {list-style-image:url (https://cache.yisu.com/upload/information/20220117/488/18169.jpg);
}
TV set
Refrigerator
Washing machine
Air Conditioner
This is the end of the introduction to the application of css box model, background and list. Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
