HTML5 's Practical

1. Box Model

# 01. you can get all the tags in the current page : Remove the padding and margins from all the tabs in the current page

* {margin:0 padding:0}

# 02. Inner margin

padding:10px 8px 5px 15px; ( top , right , bottom , left )

# 03. Border

border:5px solid red; ( width , style , color )

# 04. outer margin

margin:50px 10px 20px 8px; ( top , right , bottom , left )

# 05. Box Model

Box-sizing:border-box

2 Properties of the -CSS3

# 01. Shadows

box-shadow:10px, 10px, 10px, Oringe; ( required.) The position of the horizontal shadow , required. The position of the vertical shadow , Optional. Blur the distance , optional. The color of the shadow )

# 02. rounded Corners

border-top-left-radius:100px;

border-radius:100px;

# 03. Transparency

Background-color:rgba (255, 0, 0, 1.0);( red value , green value , blue value , transparency )

3 layout of the -css

# 01.float, the label will be modified inline block-level labels , out of standard flow

Float:left;

define the ID and class within the note:

<div id= "Main" >

<div class= "Test1" > I want to left floating </div>

# 02. positioning ( sub-absolute parent phase )

Position:relatie ( generation of relatively positioned elements, child elements )

Position:fixed ( a browser that generates an absolutely positioned element )

Position:absolute ( a parent element that generates an absolute element's positioning)

# 03. Inline labels and inline block-level labels are centered

Center Horizontally : add to Parent tag : text-align:center

Center vertically : add to Parent tag : align:height

# 04. block-level label centering

" Center horizontally : set margin:0 auto in itself;

" Vertical centering : by deformation :

Position:absolute;

top:50%;

left:50%;

Transform:translate (-50%,-50%);

"<P>: block-level label , <span>: inline label , <button>: inline block-level labels

- High imitation Baidu home

# 01. where ID and class are used

<div id= "Content" >

<div class= "logo" >

# 02. Setting the background size

Background-size:cover; ( tiled )

# Set font Bold

Font-weight:bolder;

# 04. set font is not bold

Font-weight:lighter;

# 05. Remove the underline

Text-decoration:none;

# 06. Pseudo class

#header a.more-product:hover {color:red;}

# 07. change the type of label

Display:inline-block;

# 08. Set opacity

opacity:0.6;

HTML5 's Practical