Home > Developer > Web Develop
First, the box model includes margins margin border border inner margin padding and element ontology
#id {
marigin:10px; The margin is 10 pixels up or down, and the margin can be set to the distance between the box and the box.
padding:20px; The inner margin is 20px from top to bottom, and the inner margin causes the element to grow.
margin-top:30px; A margin of 30px is set separately, and both internal and external margins are available. Top Upper Bottom Left right
padding:1px 2px 3px 4px; Set the top right and bottom left border to 1,2,3,4. If you write two values, it is up or down, or left If you write three values for top, left and right, under
}
#id the child elements in the -1{id element.
margin:0px Auto; Horizontal Center auto is automatic meaning
Z-index:1; The index value on the z-axis, which is used to determine the order of the elements, the number is negative infinity to the positive infinity, and it is best to sort the numbers by 10 in order to make it easier to modify later.
Overflow:hidden; Element overflow content property visible not trimmed will render outside of the element box by default hidden trim and hide overflow content scroll plus scroll bar auto automatically if overflow add scroll bar
Visibility:hidden; Visibility hidden hidden visible but still occupying position
Display:none; Occupy space none occupies position block as block-level element before and after line wrap inline as inline element does not wrap
opacity:0.5; Transparency 0-1 0 is full transparent 1 is opaque
border-radius:10px; The rounded corners of the element can be filled with pixels or percentages. Four Corners are poured
border-bottom-left-radius:20px; Single down one corner lower right bottom left upper right upper left
border-bottom:10px solid red; Single and one-directional border
text-shadow:2px 2px 2px Black; Text Shadow with Element shadow
}
Second, list box
. li{used to modify the properties of UL or OL
List-style:none; list does not add serial number
margin-left:10px; To solve the problem of the element boundary left out of the list ordinal
List-style-image:url (referenced picture. jpg); Replace list with picture number
}
Iii. Practice in class
<style> *{margin:0px; } #d1 {width:200px; height:200px; Background-color:red; Color:white; margin:10px 20px 40px 30px; padding:10px; /*margin-bottom:10px;*/ /*Overflow:hidden*/ /*visibility:visible; hidden display:block; none*/} #d2 {width:200px; height:200px; Background-Color:yellow; Color:black; Margin-left:20px; Overflow:hidden; /*Scroll*/opacity:0.9; /*border-radius:50%; 20px*/ /*border-bottom-right-radius:20px;*/Border-bottom:10px solid red; Text-shadow:2px 2px 1px red; } #d1-1{width:50px; height:50px; Background-Color:green; /*margin:-20px 0px 0px 0px;*/margin:0px Auto; /*z-index:-1;*/} li {/*List-style:none;*/List-style-image:url (img/apple.png); }. Rongqi {border:2px solid black; } </style>
<body> <div id="D1"> <div id="d1-1"> A </div> </div> <div id="D2"> <p> two </p><p> two </p><p> two </p><p> two </p> <p> two </p& Gt;<p> two </p><p> two </p><p> two </p> <p> two </p><p> two </p> <p> two x </p><p> two </p> </div> <divclass="Rongqi"> <ul> <li> A column </li> <li> two columns </li> <li> three columns </li> < ;li> Four columns </li> <li> five columns </li> </ul> </div></body>
Four
HTML CSS Cascading style sheet three
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
