HTML5 Day 6 Notes

CSS Layout

Normal document flow: the order in which elements are arranged from top to bottom

Detached from document flow: elements are extracted from the normal arrangement order

Floating: Move the block-level elements to the far left and right of the parent element (arranged according to our own meaning)

float(float):left/right/none;

clear(clear):left /right/both;

float floats relative to the parent element

float is often used for mixed graphics and text

If there is a floating element, its parent element will collapse in height .

opacity represents transparency

PC web page layout

Fixed width and centered layout

Layout of banner header, navigation and footer

Basic components: header, navigation, banner, body, foot

Global style: (must be written every time you create a page)

*{
margin:0;
padding:0;
box-sizing:boder-box;content-box;
}
body{
font-size:12px;
font-family:Microsoft YaHei,"微软雅黑";
width:1000px;
margin:0 auto;
}
ul,ol,li{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:none;
}

—— ——————————————————————————————————

Browser incompatibility occurs when margin-top is added to the child element , just give the parent element a padding: 0.1px to solve the problem

Font hidden-font-size:0px;

Rounded corner attribute: border-radius:20px 30px 40px 50px;

When making a circle, just give border-radius:50%;.

display:block; Convert inline elements to block-level elements

The default display of inline elements is display:inline; the default display of block-level elements is display:block;

46dd80ba616c57a652514755c74c421191be1970faf1a1e6511e94af3a0f5b95 The tags newly added by H5 can only write time

208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548The tags newly added by H5 can only write copyright, address, etc.

The above is the content of the notes on the sixth day of HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!