內聯元素的盒模型 display和visibility overflow 文檔流

bovenson 發布于2019-08-02 16:11 / 2269人閱讀

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

筆記從尚硅谷html+css的第54講開始的內聯元素的盒模型，此套視頻是第二遍看，為了以后不再看第三遍，把重要的知識做個總結。

54講內聯元素的盒模型 內邊距padding

內斂元素不能設置width和height

水平方向可以設置水平方向的內邊距padding-left和padding-right

內聯元素可以設置垂直方向的內邊距padding-top和padding-bottom但是不會影響頁面的布局，它會像被子一樣把下面的元素蓋住，這和塊級元素是不一樣的，塊級元素會把它下面的元素往下方擠

內聯元素可以設置邊框，與上面相似水平方向的邊框會影響布局，垂直方向的元素不會影響布局，而是遮蓋下面的元素

外邊距margin

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

內聯元素不支持垂直方向上的外邊距margin-top和margin-bottom

總結

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

55講 display和visibility display

內聯元素比如,是不能設置寬和高的，可以通過設置display:block進行設置為塊級元素。

與display:block對應的屬性display:inline-block將一個元素轉換為行內塊元素實現了既能設置寬高又不會獨占一行的效果，但是布局的時候元素間的空格會形成縫隙。其實我們的img元素天生就有這種效果。

display:none也是經常用的一個屬性，它會把元素隱藏，隱藏后的元素不會占用頁面的布局，但是查看源碼還可以看到該元素。

visibility

visibility:visible是元素的默認值，visibility:hidden也是設置元素為隱藏，但是它隱藏后還會占用頁面的布局。

總結

display和visibility是寫頁面css常用的布局設置，注意兩個隱藏的區別。

56講 overflow

overflow的默認屬性設置是overflow:visible

overflow:hidden會把溢出的內容隱藏掉

overflow:scroll為元素設置滾動條，不管內容溢不溢出都會有滾動條。恩，樣子很丑！

overflow:auto根據內容的需求自動添加滾動條，比上面的智能多了！

57講文檔流

在正常的頁面中，塊級元素的特點：

1. 寬度等于父元素的寬度
2. 高度被內容撐開
3. 獨占一行，多個塊級元素一行一行排列

在正常的頁面中，內聯元素的特點：

1. 高度寬度都是被內容撐開
2. 不再獨占一行，而是左右排列，一行滿了挪到下一行，就想我們平時寫作文一樣。

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

GPU云服務器云服務器 mongodb文檔數據模型文檔流輸出 js和css內聯外聯 visible

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54833.html

內聯元素的盒模型 display和visibility overflow 文檔流

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

JessYanCoding 2019-08-29 18:31 評論0 收藏0
深究盒模型的margin合并問題

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

cyqian 2019-08-29 13:47 評論0 收藏0
前端計劃——面試題總結-CSS篇

摘要：定位使元素的位置與文檔流無關，因此不占據空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。前端面試之CSS篇 1、三種基本引入方式外部樣式表內部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

馬永翠 2019-08-29 13:09 評論0 收藏0
CSS--外邊距合并的問題

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

longshengwang 2019-08-29 12:39 評論0 收藏0