CSS floating, positioning

Source: Internet
Author: User

# # #css浮动 # #

Float:left floating in each of the inside to be set up to achieve the row of sitting

BFC block-level formatting context is not related to the outside world
IFC Inline Formatting context
Overflow:hidden Trigger BFC
As long as there is a float, it's possible to trigger BFC
CSS Clear Property
The clear property defines which side of the element is allowed to appear floating elements.
Clear:both don't let it float around
: Left not allowed to float
: Right steps allow floating
: Inherit inherits the clear value from the parent element
IFC is not an attribute, but an environment, a context.
1.line-height line height (negative values cannot be used)
2.vertical-align:middle Vertical Center
Inline-block
Convert all in-line formats to block-level format trigger BFC

# # #定位 # #

Everything is a box
Display-none the entire block hide does not occupy the position
-block Block
-inline into box plus text
-inline-block
Visibility:hiddien Hide also reserved location
Overflow:hiddien cut out the extra box.
: visible content will not be clipped and will appear outside the element box
: Scroll content will be clipped, but browsing will be in the form of scroll bars to see other content
: Auto If the content is clipped or displayed as a scroll bar

Z-index:-1 can let the upper layer be covered by the next layer.
(used for positioned elements to work)

Center Page
margin:0 Auto;

Position property
Static default
Relative relative positioning does not detach from the document stream to a relative positioning of the parent element, and the child element is positioned with the parent element
Absolute absolute positioning out of document flow similar to floating
Fixed positioning ads

New Border Properties
border-radius:20px 50px 40px 40px Set rounded border
Box-shadow adds one or more shadows to the box, which is separated by a space
For example:
box-shadow:20px 20px 15px Gray/inset
------------  ------ ----------        ------------------
Inline or vertical blur shadow color, gray outer shadow into inner shadow

Hyperlinks can change after a a:hover click

Remove the UL small Origin li{List-style:none}

* * Floating * *

Floating example

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>div</title>
<style type= "Text/css" >
. div1{
border:1px solid red;
width:500px;
height:500px;
background-color:red;
Float:left;
Overflow:hidden;
}
. div2{
border:1px solid Green;
width:500px;
height:100px;
Background-color:green;
Float:left;
Margin-left: -500px;
margin-top:250px;
}
. div3{
BORDER:1PX solid black;
width:100px;
height:100px;
Background-color:black;
Float:left;
Margin-left: -500px;
margin-top:300px;
}
</style>
<body>
<div class= "" >
<div class= "Div1" ></div>
<div class= "Div2" ></div>
<div class= "Div3" ></div>
</div>
</body>

* * Navigation * *

Navigation examples

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Navigation </title>
<style type= "Text/css" >
. nav{
margin:0 Auto;
width:520px;
height:60px;
border:1px solid Darkkhaki;
border-radius:10px;
Background-color:darkkhaki;
box-shadow:10px 10px 15px Gray;
}
li{
List-style:none;
Float:left;
margin-left:30px;
margin-top:5px;
}

a{
Text-decoration:none;
}
a:hover{
Color:blue;
}

</style>
<body>
<div class= "NAV" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Home appliances </a></li>
<li><a href= "#" > Apparel </a></li>
<li><a href= "#" > Gourmet </a></li>
<li><a href= "#" > Computers </a></li>
<li><a href= "#" > Office Supplies </a></li>
</ul>
</div>
</body>

* * Advertising * *

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>wangye</title>
<style type= "Text/css" >
a{
Text-decoration:none;
}
. maodian{
margin-left:1000px;
margin-top:600px;
Float:left;
width:70px;
height:20px;
}
</style>
<body>
<div>
<a href= "" Name= "Maodian" ></a>
<div class= "Guanggao" >
<input type= "button" value= "I am an advertisement" >
</div >
<div class= "Maodian" >
<span><a href= "#maodian" > Back to vertices </a></span>
</div>
</div>
</body>

**CSS3 Transition * *

CSS3 Transition is the effect of an element gradually changing from one style to another
1. Specify which CSS property you want to add the effect to
2. Duration of the specified effect
div{
Transition:width 2s
-moz-transition:width 2s
-webkit-transition:width 2s
-o-transition:width 2s
}
Prefixes are browser-supported properties, compatibility
Width is a name that can be named, 2s is the specified time
div:hover{
width:300px;
}
Mates with the hover property to work

**CSS3 @keyframes Rules * *

Like a transition, you need a prefix, and when you create an animation in @keyframes, you bind it to a selector,
Otherwise, no animation will be produced. You can bind an animation to a selector by using the following two CSS3 animation properties:
1. Specify the name of the animation
2. Specify the duration of the animation
div{
Animation:myfirst 5s
-moz-animation:myfirst 5s;
-webkit-animation:myfirst 5s;
-o-animation:myfirst 5s;
}


@keyframes Myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-moz-keyframes Myfirst/* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes Myfirst/* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-o-keyframes Myfirst/* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}


CSS floating, positioning

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.