流

原創 LucyShawYang 2018-10-03 06:40

什麼是流（flow）？

流實際上就是瀏覽器在頁面上拜訪HTML元素所用到的方法。瀏覽器從HTML文件的最上面開始，從上到下沿着元素流逐個顯示所遇到的各個元素。
每個塊元素之間有一個換行；
每個內聯元素在水平方向上互相挨着。
即：

塊元素從上到向下流

內聯元素從左上方向右下方流


當瀏覽器並排放置兩個內聯元素時

瀏覽器會使用他們的外邊距之和來計算它們之間的空間

當瀏覽器上下放置兩個塊元素時

瀏覽器會把它們共同的外邊距摺疊在一起。即它們之間的距離爲最大的外邊距高度

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

h5新增元素之canvas渲染問題

筆試題中遇到canvas元素渲染的問題，平時不太使用canvas元素，有些疑惑，總結一二。 <canvas>是HTML5新增的，可以通過腳本（通常爲javascript）在其中繪製圖像的HTML元素。<canvas>元素本身沒有繪製能力，

Freya_yyy 2020-07-08 10:40:44

CSS應用之繪製正六邊形

使用CSS繪製一個正六邊形： 具體步驟：通過繪製三個長方形進行疊加實現，其中長方形的長寬比例爲：：1。 note：設置標籤的position屬性爲absolute時，即設置爲絕對定位的元素相對於屬性不是position: static;的

Freya_yyy 2020-07-08 10:40:44

CSS實現元素水平居中、垂直居中、水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中       1.2.1定寬塊級元素的水平居中        1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文本垂直居中 2.2 多行文本垂直居中 2.3塊

Freya_yyy 2020-07-08 10:40:44

h5軟鍵盤彈出頂起頁面佈局問題解決

窗口改變時設置定位屬性，窗口再次改變回來的時候要把定位屬性去掉 <script> var oHeight = $(document).height(); $(window).resize(function(){

Bruce_Json 2020-07-07 13:54:04

對W3C的認識

W3C是對web代碼的規範要求： 一、對結構的要求 1.標籤字母要小寫 2.標籤要閉合 3.標籤不允許隨意嵌套 HTML標籤規範可以可以提高搜索引擎對頁面的抓取效率。 二、對於css和js的要求 1.使用外鏈css樣式表和js腳本

爱吸猫两脚兽 2020-07-07 09:29:19

新浪2010南非足球世界盃漂亮表格的製作

看到新浪2010足球世界盃主頁裏的表格非常養眼，近日抽空將表格製作代碼摳了出來，以方便日後使用。   官方網址：http://2010.sina.com.cn/   一、HTML代碼   <div class="wrap"> <tab

iteye_21255 2020-07-02 23:05:14

利用層的table-row、table-cell屬性進行頁面佈局

利用層的table-row、table-cell屬性可以進行等高、寬度自適應頁面佈局，這是參看了《我所知道的幾種display:table-cell的應用》及《基於display:table的CSS佈局》兩篇文章給我的啓發。   一、HT

iteye_21255 2020-07-02 23:05:14

利用display:table-cell來實現等高佈局

我所知道的幾種display:table-cell的應用 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p

iteye_21255 2020-07-02 23:05:14

關於前端面試題css垂直居中的問題：所有的方法都在這裏了

    資料： https://blog.csdn.net/u010419337/article/details/89529541  

ali是个小太阳 2020-06-30 12:21:27

css設置只顯示圖片的一部分

轉自：https://blog.csdn.net/zhaoyingjiao/article/details/8983967

IT小白3 2020-06-30 11:59:23

CSS3 box-shadow 效果大全

轉自：https://www.html.cn/archives/9360

IT小白3 2020-06-30 11:59:12

textarea去掉多餘的空格

  轉自：https://blog.csdn.net/my_world_sky/article/details/78551351 https://blog.csdn.net/anyaoqi/article/details/8746726

IT小白3 2020-06-30 11:59:11

關於設置display:inline-block，兩個div之間產生空隙的解決方法

借鑑相關文章： html - How to remove the space between inline-block elements? 轉自：https://blog.csdn.net/qq_33549229/article/det

IT小白3 2020-06-30 11:59:11

css兼容問題收集

         CSS對瀏覽器的兼容性有時讓人很頭疼,或許當你瞭解當中的技巧跟原理,就會覺得也不是難事,從網上收集了IE7,6與Fireofx的兼容性處理方法並整理了一下.對於web2.0的過度,請儘量用xhtml格式寫代碼,而且D

RdmMing 2020-06-30 05:12:11

elementui摺疊面板左右標題

使用div繼承父元素的寬度和浮動來實現 <div v-for="item in aedCorrects"> <el-collapse v-model="activeName" accordion> <

Bruce_Json 2020-06-30 00:32:56