亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3定位和浮動(dòng)詳解

  發(fā)布時(shí)間：2016-05-10 15:30:49   作者：佚名   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了CSS3定位和浮動(dòng)的概念，以及實(shí)例代碼講解CSS3定位和浮動(dòng)的使用方法，感興趣的小伙伴們可以參考一下

本文為大家分享CSS3定位和浮動(dòng)的基礎(chǔ)概念，與使用方法，供大家參考，具體內(nèi)容如下

一、定位

1、 css定位：

改變?cè)卦陧?yè)面上的位置

2、 css定位機(jī)制：

普通流：

浮動(dòng)：

絕對(duì)布局：

3、 css定位的屬性:

position 把元素放在一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素顯示的形狀
vertical-align 設(shè)置元素顯示的對(duì)其方式
z-index 設(shè)置元素的堆疊順序/用來(lái)設(shè)置元素的堆疊順序，越大越在上方/

position的屬性
static 靜態(tài)的（默認(rèn)）
relative 相對(duì)布局（默認(rèn)的）
absolute 絕對(duì)布局 （和其他的標(biāo)簽無(wú)關(guān)聯(lián)）
fixed 固定的（不會(huì)隨著頁(yè)面的滾動(dòng)而動(dòng)）

實(shí)例代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body>   
  2.     <div id="position1"></div>   
  3.     <div id="position2"></div>   
  4.     <script>   
  5.         for (var i=0;i<100;i++){   
  6.             document.write(i+"<br/>")   
  7.         }   
  8.     </script>   
  9. </body>   
  10.   
  11. #position1{   
  12.     width: 100px;   
  13.     height: 100px;   
  14.     background-color: blue;   
  15.     position: relative;   
  16.     left: 20px;   
  17.     top: 20px;   
  18.     /*用來(lái)設(shè)置元素的堆疊順序，越大越在上方*/  
  19.     z-index: 2;   
  20. }#position2{   
  21.     width: 100px;   
  22.     height: 100px;   
  23.     background-color: red;   
  24.     position: relative;   
  25.     left: 30px;   
  26.     top: 10px;   
  27.     z-index: 1;   
  28. }   
  29.   

二、浮動(dòng)

float屬性可用的值:
left/right/none/inherit: 向左、右，不浮動(dòng)，從父級(jí)繼承。
* float

1.浮動(dòng)后，脫離正常流，在浮動(dòng)流中排列。任何元素都是作為塊元素來(lái)顯示，可設(shè)置寬高，內(nèi)容撐開(kāi)寬度。
2.很多浮動(dòng)塊在一起的時(shí)候，他們總是找與自己最近的、浮動(dòng)方向相同的塊來(lái)確定自己的位置，如果被迫換行，則以這個(gè)最近的元素的高度為基準(zhǔn)起新行

clear屬性： 去掉浮動(dòng)屬性（包括繼承來(lái)的）
意思和上面對(duì)應(yīng)的一樣

需要清浮動(dòng)的情況：

子標(biāo)簽浮動(dòng)后，父標(biāo)簽的高度無(wú)法被撐開(kāi)，所以需要清浮動(dòng)；
新加入的標(biāo)簽，希望不受之前浮動(dòng)元素的影響，則需要清浮動(dòng)；

1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 觸發(fā)layout 常用于清楚內(nèi)浮動(dòng)；
3.after 偽對(duì)象：給當(dāng)前對(duì)象設(shè)置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想辦法 觸發(fā)ie6的layout渲染機(jī)制，靠運(yùn)氣解決了很多bug，zoom：1可以觸發(fā)?。。?
inline-block對(duì)內(nèi)塊 對(duì)外行；
4.父標(biāo)簽一起浮動(dòng)；
5.position:absolute；清除浮動(dòng)

display
display：block 以塊元素顯示；
display：none 內(nèi)容消失，不占空間；
display：inline 以行內(nèi)元素顯示，可解決IE6的雙倍BUG；
display：inline-block 對(duì)內(nèi)塊，對(duì)外行。

visibility：none
隱藏，但是依舊占用空間，影響布局

以上就是關(guān)于CSS3定位和浮動(dòng)的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • 深入理解css布局之定位與浮動(dòng)

    這篇文章主要介紹了css布局之定位與浮動(dòng)的相關(guān)資料,需要的朋友可以參考下
    2018-05-21

  • 清除css浮動(dòng)的三種方法小結(jié)

    這篇文章主要介紹了清除css浮動(dòng)的三種方法小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-19

  • 淺談CSS浮動(dòng)的那點(diǎn)事兒

    下面小編就為大家?guī)?lái)一篇淺談CSS浮動(dòng)的那點(diǎn)事兒。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-20

  • CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程

    這篇文章主要介紹了CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程,包括使用overflow清除浮動(dòng)的方法,需要的朋友可以參考下
    2016-07-07

  • CSS浮動(dòng)所產(chǎn)生的內(nèi)容溢出問(wèn)題及清除浮動(dòng)的方法小結(jié)

    CSS的float浮動(dòng)效果在一些情況下非常不穩(wěn)定,控制不好的時(shí)候一般還是清除浮動(dòng)為妙,這里我們就來(lái)看一下CSS浮動(dòng)所差生的內(nèi)容溢出問(wèn)題及清除浮動(dòng)的方法小結(jié)
    2016-05-30

  • 淺談CSS浮動(dòng)的特性

    浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。這篇文章主要介紹了淺談CSS浮動(dòng)的特性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做
    2018-06-05

最新評(píng)論