国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS2:寬度與高度疑難點解析

raledong / 2667人閱讀

摘要：寬度與高度如果你的代碼里經(jīng)常出現(xiàn)和屬性說明你對寬度與高度理解的不夠深文檔流翻譯很爛應該為普通流或者常規(guī)流的高度字體高度與行高字和字之間是通過基線對齊的行高與默認行高是字體設計室寫進去的不同字體行高不一樣跟字體設計有關系字體的建議行高寫在了

CSS2:寬度與高度

如果你的CSS代碼里經(jīng)常出現(xiàn)height和width屬性,說明你對寬度與高度理解的不夠深

1.文檔流(Normal Flow)

翻譯很爛,應該為普通流,或者常規(guī)流.

1.1DIV的高度 1.1.1字體高度與行高

字和字之間是通過基線對齊的

行高與font-size

默認行高是字體設計室寫進去的.不同字體行高不一樣,跟字體設計有關系.字體的建議行高寫在了字體的文件里,是設計師最開始就設計好的,比如1.5倍,1.4倍等等

所以:如果你確定了font-size,比如是20px,那么不同字體,占有的上下空間不一樣,比如蘋果方正字體行高為1.4倍,那么最終這個字高28px,宋體為1.2倍,那么字整體所占高度為24px

如果你想明確的告訴瀏覽器行高是多少,而不用設計師自帶的,那么就用line-height直接強制規(guī)定行高.比如將行高設置成和font-size一樣大小

知識點:如果DIV里只有一個內(nèi)聯(lián)元素,那么這個div的高度就是這個內(nèi)聯(lián)元素的行高.不是font-size的大小

1.1.2[套路!]中文字體兩端對齊方式

html會將多個空格縮成一個空格,如果想添加空格,就用 但是一定要注意,不同字體的空格是不一樣的,一定不要用 來做布局,不要用這個來做對齊

text-align:justify的作用:

下面的div用了text-align:justify.兩邊對齊了

中文字體對齊方式套路如下

jsbin預覽地址 

如果內(nèi)聯(lián)元素在一行放不下,就自動換到下一行,就像水流一樣
剛才的文字對齊方式,就是借用了文檔流的特點,讓span的after寬度設置為100%沾滿一行,所以他不得不在第二行,第一行就只有姓名等文字,然后在用text-align:justfy;讓姓名平均沾滿一行

示例代碼：




    
    文字兩邊對齊
    




    姓名

    聯(lián)系方式
1.1.3所有inline和inline-block元素之間,不管有多少回車和空格或者tab,都只顯示一個空格


例如:




    
    inline-space-test
    



1
2
1
2

    
    
  • ddi1
    • 
    
  • ddi2
    • 
    
  • ddi3
    • 
    
  • ddi4
    • 
    
  • ddi5
    • 
    
  • ddi6
    •

解決方法:

在子元素上使用float:left;

在父元素上加類.clearfix 

.clearfix::after{
    content:"";
    display:black;
    clear:both;
}
1.2文檔流單詞內(nèi)聯(lián)元素排版問題

如果內(nèi)聯(lián)元素在一行放不下,就自動換到下一行,就像水流一樣
剛才的文字對齊方式,就是借用了文檔流的特點,讓span的after寬度設置為100%沾滿一行,所以他不得不在第二行,第一行就只有姓名等文字,然后在用text-align:justfy;讓姓名平均沾滿一行
這就叫做文檔流

1.2.1瀏覽器關于單詞顯示的特點:

中間沒有空格的單詞或數(shù)字,看作是一個整體,不會從中間斷開(這符合外國人的閱讀習慣).

解決方法:

加連字符

使用css word-break:break-all;

2.文字溢出省略

一個屬性:white-space:nowrap;
div中所有inline元素一行顯示,超出部分不換行

[套路!]一行文本省略

div{
      border:1px solid red;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }


jsbin
[套路!]多行文本省略
谷歌搜索:css multiline ellipsis
搜索到的
https://css-tricks.com/
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow:hidden
}
jsbin
webkit的css,手機,谷歌,opera都支持,只有火狐和ie不支持,
瀏覽器市場份額

3.文字垂直居中

不要寫死高度,比如吧line-height寫成40px;div高寫成40px;
那么只有一行文字可以垂直居中,下面幾行將出現(xiàn)BUG
下面的方法不可取

[套路!]方法:
想讓div高度為40px,那么把line-height寫成24px,上下padding為8px就可以了,這樣多行文本也可以距離差不多,不會出現(xiàn)bug

4.margin合并

margin合并出現(xiàn)在div里面有div的情況

如果父元素沒有什么可以擋住兒子外邊距的情況,那么兒子的margin外邊距會和父元素合并起來.例如,如果父元素沒有border,只有outline,擋不住.

如果是border擋住.上下外邊距不會合并


即使border是0.1,也有用

如果有padding上下?lián)踝∩舷峦膺吘嘁膊粫喜?/p>

:[套路!]一般用這種方法祛除合并

還有一種可以取消外邊距合并的方法:在父元素上寫overflow:hidden;

如果有內(nèi)聯(lián)元素擋住,也可以取消邊距合并

4.div里既有塊級元素又有內(nèi)聯(lián)元素時的文檔流

div里的高度有他內(nèi)部文檔流中元素的高度的總和決定的.
文檔流如下:

內(nèi)聯(lián)元素從左到右依次排列,如果空間不夠,就換一行從左到右依次排列

塊級元素另起一行,占滿整行,從上到下

5.脫離文檔流

float,脫離,浮在上面,父元素div高度變小

position:absolute

position:fixed

注意: position:relative沒有脫離文檔流,如果再加上定位,只是相對于之前的位置定位,原來的地方還占據(jù)位置

6.div里的div如何完全居中

假設子元素div寬度固定,高度不固定,父元素高度不確定.居中方法:上下居中將父元素上下padding寫成一樣,左右居中在子元素上用margin: 0 auto;

父元素高度確定.(如果按照從內(nèi)往外寫一般高度不會固定,所以盡量讓高度不要固定,)

唯一能想到讓div高度確定的情況:比如高度和瀏覽器窗口一樣:height:100vh;

方法一:讓子元素寬高固定,[套路!]然后position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;讓上下左右邊距都auto.即margin:auto;配合定寬定高.

方法二:如果子元素不能固定高度,因為里面有內(nèi)聯(lián)元素,自己撐開.那么在父元素上用flex布局.(ie不支持)

.dad{
    display:flex;
    justify-content:center;
    align-items:center;
}
7.內(nèi)聯(lián)元素高寬如何確定

內(nèi)聯(lián)元素的padding 和margin只會影響寬度,但是不會影響高度.

總結(jié):

內(nèi)聯(lián)元素高度只受line-height影響

內(nèi)聯(lián)元素寬度由padding,margin,border和內(nèi)容一起決定

8.塊級元素寬高總結(jié)

塊級元素高度:div里的高度有他內(nèi)部文檔流中元素的高度的總和決定的.padding border會影響高度.margin有時會影響,有事不會影響,因為可能會合并

塊級元素寬度:盡量不要設置成固定,它繼承父元素

9.實現(xiàn)一個1:1的DIV

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113502.html

相關文章

  • 面試題：面試經(jīng)

    摘要：通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。在頁面加載的時也同時加載，而是需要加載完成后在開始加載。是長連接，連接一直保持，是短連接，發(fā)起，接收，關閉。 目錄 我碰到有意思的題會繼續(xù)更新，如發(fā)現(xiàn)我的解答有問題，請告知，萬分感謝。如覺得對你有幫助，請幫忙點個贊，謝謝。 css的選擇器，權(quán)重 ie和其他瀏覽器下，盒模型的區(qū)別 盒模型互相轉(zhuǎn)化 元素水平垂直居中 左...

    Benedict Evans 評論0 收藏0

  • 面試題：面試經(jīng)

    摘要：通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。在頁面加載的時也同時加載，而是需要加載完成后在開始加載。是長連接，連接一直保持，是短連接，發(fā)起，接收，關閉。 目錄 我碰到有意思的題會繼續(xù)更新，如發(fā)現(xiàn)我的解答有問題，請告知，萬分感謝。如覺得對你有幫助，請幫忙點個贊，謝謝。 css的選擇器，權(quán)重 ie和其他瀏覽器下，盒模型的區(qū)別 盒模型互相轉(zhuǎn)化 元素水平垂直居中 左...

    FleyX 評論0 收藏0

  • CSS規(guī)范 > 10 視覺格式化模型詳述 Visual Formatting Model De

    摘要：行盒的寬度由其包含塊給予，但可能因浮動而縮小。絕對定位不可替換元素的使用值約束為包含塊寬度如果和均為首先將以及值為的設為。 2015/10/08： 原10.8標題 行盒高度計算改為10.8 行高計算。英文原文為line height。由于翻譯時候看到那段結(jié)論是行盒的高度，腦抽就把原本翻譯對的標題改了下，剛回顧一番深覺不妥，故改回來。 原文：http://www.w3.org/TR/CS...

    frolc 評論0 收藏0

  • 整理：子容器垂直居中于父容器的方案

    摘要：子容器溢出時，父容器出現(xiàn)滾動條。父容器或很顯然，子容器溢出時，被父容器截斷的情形無法和父容器自適應于子容器共存。現(xiàn)在這個布局可以自動生成，詳見林小志的小工具圖片垂直居中。溢出子容器溢出時會變成頂對齊，原因同上。 本文在evernote里有備份。如果evernote的閱讀區(qū)域嫌窄了，那么可以把這個鏈接拖入書簽并點擊javascript:jQuery(#container).width(9...

    youkede 評論0 收藏0

發(fā)表評論

0條評論

raledong

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<