標籤:技術分享 http out auto har ack 效果 log 大小
文檔流
文檔流處在網頁的最底層,它表示的是一個頁面中的位置,
我們所建立的元素預設都處在文檔流中
元素在文檔流中的特點
塊元素
- 塊元素在文檔流中會獨佔一行,塊元素會自上向下排列。
- 塊元素在文檔流中預設寬度是父元素的100%。
- 塊元素在文檔流中的高度預設被內容撐開。
內嵌元素
1.內嵌元素在文檔流中只佔自身的大小,會預設從左向右排列,如果一行中不足以容納所有的內嵌元素,則換到下一行,繼續自左向右。
2.在文檔流中,內嵌元素的寬度和高度預設都被內容撐開。
當元素的寬度的值為auto時,此時指定內邊距不會影響可見框的大小,而是會自動修改寬度,以適應內邊距。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span { background-color: yellowgreen; } .outdiv { background-color: #bfa; } .innerdiv { height: 50px; } .div3 { width: 100px; height: 100px; background-color: #ff0; } </style> </head> <body> <div class="outdiv"> <div class="innerdiv"></div> </div> <div class="div3"> </div> <span>操行有常賢,仕宦無常遇</span> <span>操行有常賢,仕宦無常遇</span> <span>操行有常賢,仕宦無常遇</span> <span>操行有常賢,仕宦無常遇</span> <span>操行有常賢,仕宦無常遇</span> <span>操行有常賢,仕宦無常遇</span> </body></html>
效果:
前端學習 -- Css -- 文檔流