1. Box Model:<div> Content </div>
padding: Inner margin
Margin: Inner margin
2. Floating: (CSS properties)
Float:left Right None
Clear float:
Clear:left Right Both
Cases:
<style>
#navigation {
font-family:arial;
}
#navigation u L {
List-style-type:none;
margin:0px;
padding:0px;
}
#navigation Li {
Float:left;
}
#navigation Li a:hover{
Background-color: #990020;
Color: #ffff00;
}
</style>
<body>
<div id= "Navigation" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Product Center </a></li>
<li><a href= "#" > Movies </a></li>
<li><a href= "#" > Books </a></li>
<li><a href= "#" > Learning Paradise </a></li>
</ul>
</div>
</body>
3, block-level elements:<div> <ul> <li> <p> <ol>
Block-level elements: Full line
4. Inline Elements:<span> <a>
Inline elements: Only their own content size occupies a position
5, inline elements and block-level elements interchange:
Display:block Line variable block
Display:inline block changes to line
Display:inline functions with block and row elements: 1, affected by aspect 2, not full line
1, padding to the elements of the various conditions in the line is supported.
2, margin on the line elements only support around, not support up and down.
Lesson Four: Box model + floating + positioning
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
