亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

內(nèi)聯(lián)元素的盒模型 display和visibility overflow 文檔流

JessYanCoding / 1320人閱讀

摘要：筆記從尚硅谷的第講開(kāi)始的內(nèi)聯(lián)元素的盒模型，此套視頻是第二遍看，為了以后不再看第三遍，把重要的知識(shí)做個(gè)總結(jié)。其實(shí)我們的元素天生就有這種效果。是元素的默認(rèn)值，也是設(shè)置元素為隱藏，但是它隱藏后還會(huì)占用頁(yè)面的布局。以上只是在正常的文檔流中

筆記從尚硅谷html+css的第54講開(kāi)始的內(nèi)聯(lián)元素的盒模型，此套視頻是第二遍看，為了以后不再看第三遍，把重要的知識(shí)做個(gè)總結(jié)。

54講 內(nèi)聯(lián)元素的盒模型 內(nèi)邊距padding

內(nèi)斂元素不能設(shè)置width和height

水平方向可以設(shè)置水平方向的內(nèi)邊距padding-left和padding-right

內(nèi)聯(lián)元素可以設(shè)置垂直方向的內(nèi)邊距padding-top和padding-bottom但是不會(huì)影響頁(yè)面的布局，它會(huì)像被子一樣把下面的元素蓋住，這和塊級(jí)元素是不一樣的，塊級(jí)元素會(huì)把它下面的元素往下方擠

內(nèi)聯(lián)元素可以設(shè)置邊框，與上面相似水平方向的邊框會(huì)影響布局，垂直方向的元素不會(huì)影響布局，而是遮蓋下面的元素

外邊距margin

水平方向可以設(shè)置外邊距margin，而且相鄰元素的外邊距不會(huì)重疊而是求和，這和div塊級(jí)元素相似

內(nèi)聯(lián)元素不支持垂直方向上的外邊距margin-top和margin-bottom

總結(jié)

在水平方向上的布局幾乎和塊級(jí)元素相似，但是在垂直方向上和塊級(jí)元素大不同

55講 display和visibility display 
內(nèi)聯(lián)元素比如,是不能設(shè)置寬和高的，可以通過(guò)設(shè)置display:block進(jìn)行設(shè)置為塊級(jí)元素。
與display:block對(duì)應(yīng)的屬性display:inline-block將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素實(shí)現(xiàn)了既能設(shè)置寬高又不會(huì)獨(dú)占一行的效果，但是布局的時(shí)候元素間的空格會(huì)形成縫隙。其實(shí)我們的img元素天生就有這種效果。
display:none也是經(jīng)常用的一個(gè)屬性，它會(huì)把元素隱藏，隱藏后的元素不會(huì)占用頁(yè)面的布局，但是查看源碼還可以看到該元素。
visibility

visibility:visible是元素的默認(rèn)值，visibility:hidden也是設(shè)置元素為隱藏，但是它隱藏后還會(huì)占用頁(yè)面的布局。

總結(jié)

display和visibility是寫(xiě)頁(yè)面css常用的布局設(shè)置，注意兩個(gè)隱藏的區(qū)別。

56講 overflow

overflow的默認(rèn)屬性設(shè)置是overflow:visible

overflow:hidden會(huì)把溢出的內(nèi)容隱藏掉

overflow:scroll為元素設(shè)置滾動(dòng)條，不管內(nèi)容溢不溢出都會(huì)有滾動(dòng)條。恩，樣子很丑！

overflow:auto根據(jù)內(nèi)容的需求自動(dòng)添加滾動(dòng)條，比上面的智能多了！

57講 文檔流

在正常的頁(yè)面中，塊級(jí)元素的特點(diǎn)：

1. 寬度等于父元素的寬度
2. 高度被內(nèi)容撐開(kāi)
3. 獨(dú)占一行，多個(gè)塊級(jí)元素一行一行排列

在正常的頁(yè)面中，內(nèi)聯(lián)元素的特點(diǎn)：

1. 高度寬度都是被內(nèi)容撐開(kāi)
2. 不再獨(dú)占一行，而是左右排列，一行滿了挪到下一行，就想我們平時(shí)寫(xiě)作文一樣。

以上只是在正常的文檔流中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114389.html

相關(guān)文章

  • 內(nèi)聯(lián)元素的盒模型 display和visibility overflow 文檔流

    摘要：筆記從尚硅谷的第講開(kāi)始的內(nèi)聯(lián)元素的盒模型，此套視頻是第二遍看，為了以后不再看第三遍，把重要的知識(shí)做個(gè)總結(jié)。其實(shí)我們的元素天生就有這種效果。是元素的默認(rèn)值，也是設(shè)置元素為隱藏，但是它隱藏后還會(huì)占用頁(yè)面的布局。以上只是在正常的文檔流中 筆記從尚硅谷html+css的第54講開(kāi)始的內(nèi)聯(lián)元素的盒模型，此套視頻是第二遍看，為了以后不再看第三遍，把重要的知識(shí)做個(gè)總結(jié)。 54講 內(nèi)聯(lián)元素的盒模型 內(nèi)...

    bovenson 評(píng)論0 收藏0

  • 深究盒模型的margin合并問(wèn)題

    摘要：即我們常說(shuō)的脫離文檔流的元素。如果一個(gè)元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。兩個(gè)兄弟盒之間的豎直距離由屬性決定。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒之間的豎直會(huì)合并。如果盒的和相鄰，那么可能會(huì)被徹底合并。 1.首先，了解一些詞匯 - 流內(nèi)元素? 如果一個(gè)元素是浮動(dòng)的，絕對(duì)定位的或者是根元素，那么它就是流外元素。即我們常說(shuō)的脫離文檔流的元素。如果一個(gè)元素不是流外的，即仍在文檔...

    cyqian 評(píng)論0 收藏0

  • 前端計(jì)劃——面試題總結(jié)-CSS篇

    摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間?？梢灾缹傩杂幸韵聨讉€(gè)特點(diǎn)該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

    馬永翠 評(píng)論0 收藏0

  • CSS--外邊距合并的問(wèn)題

    摘要：外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 首先看下W3C對(duì)于外邊距合并的介紹： 外邊距合并...

    longshengwang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<