Home > Developer > JavaScript
Front-end newcomers learning notes ------- html/css/js BASICS (3), learning notes ------- html
This was a bit of a problem at home, and it was a bit of a task at work, so I didn't watch the video for a few days and didn't update it. Update it today.
I. Default style resetting
Do not use any default browsing style.
Body, p, h1, h2, h3, h4, h5, h6, dl, dd {margin: 0; font-size: 12px;/* font-family: XX; */}
Ol, ul {list-style: none; padding: 0; margin: 0 ;}
A {text-decoration: none ;}
Img {border: none ;}
Ii. Block and embedded Elements
Features of block elements:
1. By default, only one row is exclusive;
2. If there is no width, a row is full by default;
3. supports all css commands;
Inline element features:
1. Similar labels can be displayed in the same row;
2. width and height are not supported;
3. Open the content width;
4. Upper and Lower margin and padding are not supported;
5. code line breaks are parsed;
Iii. Conversion of block elements and embedded Elements
Display: block enables inline elements to have the attribute label of blocks;
Display: inline enables block elements to have the characteristics of embedded elements.
Display: inline-block
Features: 1. The block is displayed in one row;
2. Attribute labels in the row support width and height;
3. Open the content when there is no width;
Problem: 1. line feed is parsed;
2. ie6 and 7 do not support the inline-block of block attribute tags;
Iv. Floating
1. The block is displayed in a row;
2. inline elements also support width and height;
3. Open the default content width;
4. Exit the document stream;
5. Upgrade Level half-Layer
<Div style = "float: left;"> wo shi div </div>
At this time, the div tag and the content in it are at the same level.
<Style>
Body {font-size: 20px ;}
. Box1 {width: 100px; height: 100px; background: red; float: left ;}
. Box2 {width: 200px; height: 200px; background: blue ;}
</Style>
</Head>
<Body>
<Div class = "box1"> box1 </div>
<Div class = "box2"> box2 </div>
</Body>
This phenomenon occurs at this time, which is related to the increase of half a level.
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
