浮動

時間 2019-11-17

標籤浮動简体版

原文原文鏈接

元素設置了float或absolute，脫離了文檔流,若是四周元素沒有浮動瀏覽器

<style> 
.c2{ 
  width:500px; 
  height:500px; 
  margin:80px; 
} 
.no1{ 
  border:1px solid; 
  width:100px; 
  height:100px; 
  
} 
.no2{ 
  border:1px solid red; 
  width:200px; 
  height:100px; 
 float:right; 
} 
</style> 
</head> 
<body> 
<div class="c2"> 
<div class="no1"></div> 
<div class="no2"></div> 
</div> 
</body> 



<divclass="checkbox"><label><inputtype="checkbox"value=""> Option one is this and that&mdash;be sure to include why it's great </label></div>

input[type="checkbox"]{
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
} 


.checkbox label {
min-height: 20px;
margin-bottom: 0;
border: 1px solid;
font-weight: normal;
cursor: pointer;
   padding-left: 20px;
}

脫離文檔流的元素，仍受父節點的影響

【1】未浮動元素height是相對於其父元素

不浮動的元素默認寬度是100%

浮動的元素寬度是0，須要指定其寬度

【2】浮動元素高度設置成100%

.pos-state

position：absolute

height:100%

body

div.pos-state

此時浮動的div（不管div是嵌套在哪一個元素裏面）是相對於瀏覽器窗口的高度，div隨窗口高度的變化而變化。但當瀏覽器出現滾動條時，下邊滾動的部分就沒有背景了

透明背景：rgba(255, 255, 255, 0.3)

浮動的元素設置margin負值能夠起到位置改變的做用，不浮動設置負值寬度會改變

浮動撐開父元素：針對float脫離文檔流的元素，absolute的不行

相關文章

相關標籤/搜索

CSS浮動---浮動篇

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<