Introduction to web front end: css box model + background and list

Value of border style:

none no

dotted dot

dashed dotted line

Solid solid line

Double double solid line

margin:

If two adjacent elements have outer margins set in the vertical direction, the outer margins will be merged

Merge height = the larger of the two outer margins that merge

Actual height of element = top border + top inner margin + content height + bottom inner margin + bottom border

The actual height of elements in the page is: top outer margin + top border + top inner margin + content height + bottom inner margin + bottom border + bottom outer margin

hover attribute displays child elements when hovering:

Specially established learning Q-q-u-n:  784783012 ,Share learning methods and small details that need attention, and keep updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>display attribute</title>
    <style type="text/css"> div { width: 200px;
    }
    /*Supplementary style*/ ul{ margin-left:-36px;
    } li{ display: none;
    } div:hover li{ display: inline-block; list-style: none;
    }
    </style>
</head>

<body>
    <div>
        <h2>household electrical appliances</h2>
        <ul>
            <li>Refrigerator</li>
            <li>Air conditioner</li>
            <li>Washing machine</li>
        </ul>
    </div>
</body>

</html>

Inline displays the element as an inline element without a line break before or after the element

Width and height cannot be set for in row elements, and outer margin can only be set left and right, not up and down

List demo:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>display attribute</title>
    <style type="text/css"> *{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;
    }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="list">
            <p>Front end course arrangement</p>
        </div>
        <ul>
            <li>
                <p>HTML+CSS basic course</p>
                <span>456605 Human being learning</span>
            </li>
            <li>
                <p>HTML+CSS basic course</p>
                <span>456605 Human being learning</span>
            </li>
            <li>
                <p>HTML+CSS basic course</p>
                <span>456605 Human being learning</span>
            </li>
        </ul>
    </div>
</body>

</html>

Mouse over demo:

Specially established learning Q-q-u-n:  784783012 ,Share learning methods and small details that need attention, and keep updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>display attribute</title>
        <style type="text/css"> *{margin:0;padding:0;} .big{width: 150px;margin: 10px auto 0 auto;background: #f2f4f6;border: 1px solid #ddd;} h3{height: 40px;line-height: 40px;text-align: center;} .div1 h3{border-bottom: 1px solid #ddd;} .div2 h3{border-bottom: 1px solid #ddd;} ul{background-color:#fff;display: none;} ul li{ height: 30px;line-height: 30px;margin-left: 58px;list-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;}
        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <h3>household electrical appliances</h3>
            <ul class="elec">
                <li>Refrigerator</li>
                <li>Washing machine</li>
                <li>Air conditioner</li>
            </ul>
        </div>
        <div class="div2">
            <h3>Wash and care</h3>
            <ul class="wash">
                <li>Washing liquid</li>
                <li>disinfectant</li>
                <li>Fabric softener</li>
            </ul>
        </div>
        <div class="div3">
            <h3>Clothing</h3>
             <ul class="clothes">
                <li>shirt</li>
                <li>trousers</li>
                <li>Sweater</li>
            </ul>
        </div>
      </div>
</body>
</html>

Background color: transparent, the default value

Background area includes content + inside margin + border, excluding outside 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

Shorthand for background: the following property values are not in order

Ordered list style:

List style position: inside / outside (to the left of all text)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style> li{ list-style-image:url(http://climg.mukewang.com/58dc9e4e0001ba9000160016.png);
     }
    </style>
</head>
<body>
    <ul>
        <li>television</li>
        <li>Refrigerator</li>
        <li>Washing machine</li>
        <li>Air conditioner</li>
    </ul>
</body>

Keywords: Web Development Attribute

Added by dysonline on Mon, 06 Apr 2020 05:18:26 +0300