web前端開發基礎----標準流布局和非標準流布局

1，標準流布局

標準流，也稱文檔流或普通流，是所有元素默認的布局方式。在標準流中，元素按照其在 HTML 中出現的順序，自上而下依次排列，并占據其父容器內的可用空間。標準流中的元素按照其自然尺寸和位置進行布局，不會特意改變元素的屬性或位置。

2，非標準流布局

（1）相對定位：

是指將一個元素從它的標準流中所處的位置進行向上，向下，向左，向右偏移，這種偏移不會影響周圍元素的位置，周圍元素還是位于自己原來的標準流中的位置。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.A{width: 500px;height: 500px;background: #ccc;margin-top: 100px;overflow: hidden;}.B{width: 100px;height: 100px;background: red;position: relative;left: 100px;top: 70px;}.C{width: 100px;height: 100px;background: blue;margin-top: 70px;color: #000;}</style>
</head>
<body><div class="A"><div class="B"></div><div class="C"></div></div>
</body>
</html>

結果：

（2）絕對定位：

是指將一個元素完全脫離標準流，瀏覽器完全忽略掉該元素所占據的空間，該元素向上，向下，向左，向右偏移是相對于瀏覽器窗口，或者向上追溯到第一個已經定位的父級元素作為參照物。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style type="text/css">.A{width: 500px;height: 500px;background: #ccc;margin-top: 100px;position: relative;overflow: hidden;}.B{width: 100px;height: 100px;background: red;position: absolute;left: 100px;top: 70px;}.C{width: 100px;height: 100px;background: blue;margin-top: 70px;color: #000;}
</style>
<body><div class="A"><div class="B"></div><div class="C"></div></div>
</body>
</html>

結果：

3，其核心知識點還需要自己去理解。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/168074.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/168074.shtml
英文地址，請注明出處：http://en.pswp.cn/news/168074.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！