【codecademy summary】html+css layout

The default position of an element can be chagned by setting its position property. 

values:

　　static: the default value.

　　relative: this value allows you to position an element relative to its default position the web page with four offset properties: top / bottom / left / right. Offset properties will not work if the position of the element is not set to relative.

　　absolute: all other elements on the page will ignore the element and act like it is not present on the page. When an element's position is set to absolute, the element can still scroll out of view when a user scrolls.

　　fix: the div will remain fixed to its position no matter where the user scrolls on the page. This technique is used often for navigation bars on a web page. But it is still possible to overlap other content. One solution is to set an opaque background color for the element.

 

-------------------------------------------------------------------------------------------------------------------

 

exmaple:

　　div.exmaple{

　　　　position: fixed;

　　　　background-color: #FFFFFF;

　　　　height:50px;

　　　　width: 100%;

　　}

 

-------------------------------------------------------------------------------------------------------------------

 z-index

　　z-index property controls how far "back" or how far "forward" an element should on the web page. It accepts integer values. Deoending on their values, the integers instruct the browser on the order in which elements should be displayed on the web page. Setting the z-index of navigation to a number greater than 0 is sufficient to prevent overlapping content.

 

-------------------------------------------------------------------------------------------------------------------

 

exmaple:

　　div.exmaple{

　　　　position: fixed;

　　　　background-color: #FFFFFF;

　　　　height:50px;

　　　　width: 100%;

　　　　z-index: 1;

　　}

 

-------------------------------------------------------------------------------------------------------------------

float

　　If we want to move an element as far left ot as right as possible on the page, we can use float.

　　1. float: left - this value will move, or float, elements as far left as possible.

　　2. float: right - this value will move elements as far right as possible. 

　　When an element is floated, any other content within the same containing element will naturally fow around the element. Floated elements must have a width specified, as in the example above. Otherwise, the element will assume the full width of its containing element, and attempting to float the element mat not yield any visible results.

-------------------------------------------------------------------------------------------------------------------

 

exmaple:

　　div.block{

　　　　width: 10px;

　　　　floatL left;

　　}　　

 

-------------------------------------------------------------------------------------------------------------------

clear

　　The float property can also be used to float multiple elements at once. When multiple floated elements have different heights, however, this can affect their layout on the page. Specifically, elemets can "bump" into each other and not allow other elements to properly move the left or or the right.

　　The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:

　　left - the left side of the element will not touch ant other element within the same containing element.

　　right - the rifht side of the element will not touch ant other element within the same containing element.

　　both - the element can touch either side.

　　none - the element can touch either side.

-------------------------------------------------------------------------------------------------------------------

example:

　　div {　

　　　　width: 200px;

　　　　float: left;

　　}

　　

　　div.special {

　　　　clear : left;

　　}

转载于:https://www.cnblogs.com/guangluwutu/p/6606220.html