Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.