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

時間 2019-11-08

標籤 css2 css 寬度高度疑難解析欄目 CSS 简体版

原文原文鏈接

CSS2:寬度與高度

若是你的CSS代碼裏常常出現height和width屬性,說明你對寬度與高度理解的不夠深css

1.文檔流(Normal Flow)

翻譯很爛,應該爲普通流,或者常規流.html

1.1DIV的高度

1.1.1字體高度與行高

字和字之間是經過基線對齊的
行高與font-size

默認行高是字體設計室寫進去的.不一樣字體行高不同,跟字體設計有關係.字體的建議行高寫在了字體的文件裏,是設計師最開始就設計好的,好比1.5倍,1.4倍等等
因此:若是你肯定了font-size,好比是20px,那麼不一樣字體,佔有的上下空間不同,好比蘋果方正字體行高爲1.4倍,那麼最終這個字高28px,宋體爲1.2倍,那麼字總體所佔高度爲24px
若是你想明確的告訴瀏覽器行高是多少,而不用設計師自帶的,那麼就用line-height直接強制規定行高.好比將行高設置成和font-size同樣大小
知識點:若是DIV裏只有一個內聯元素,那麼這個div的高度就是這個內聯元素的行高.不是font-size的大小

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

html會將多個空格縮成一個空格,若是想添加空格,就用 可是必定要注意,不一樣字體的空格是不同的,必定不要用 來作佈局,不要用這個來作對齊
text-align:justify的做用:

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

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

 jsbin預覽地址

若是內聯元素在一行放不下,就自動換到下一行,就像水流同樣
剛纔的文字對齊方式,就是借用了文檔流的特色,讓span的after寬度設置爲100%沾滿一行,因此他不得不在第二行,第一行就只有姓名等文字,而後在用text-align:justfy;讓姓名平均沾滿一行

示例代碼：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字兩邊對齊</title>
    <style>
        .duiqi{
            border: 1px solid red;
        }
        .duiqi>span{
            display: inline-block;
            width: 5em;/*寬度爲5個字體大小,由於漢字是等寬等高的,因此佔五個字*/
            text-align: justify;/*讓沒行字都平均*/
            border:1px solid blue;
            font-size: 20px;
            line-height: 1.4;
            font-family: "Microsoft YaHei UI";
            /*而後固定高度,並overflow: hidden;*/
            height: 28px;
            overflow: hidden;
        }
        .duiqi>span::after{
            /*多佔一行,讓上面一行的字平均分開*/
            content: '';
            display: inline-block;
            width: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="duiqi">
    <span>姓名</span><br>
    <span>聯繫方式</span>
</div>
</body>

1.1.3全部inline和inline-block元素之間,無論有多少回車和空格或者tab,都只顯示一個空格

例如:佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-space-test</title>
    <style>
        span {
            border: 1px solid red;
        }
        ul{
            padding: 0;
        }
        ul>li{
            list-style: none;
            padding: 0;
            display: inline-block;
            border:1px solid    blue;
        }
    </style>
</head>
<body>
<!--全部inline和inline-block元素之間,無論有多少回車和空格或者tab,都只顯示一個空格-->
<span>1</span>
<span>2</span>
1
2
<ul>
    <li>ddi1</li>
    <li>ddi2</li>
    <li>ddi3</li>
    <li>ddi4</li>
    <li>ddi5</li>
    <li>ddi6</li>
</ul>
</body>
</html>

解決方法:字體

在子元素上使用float:left;
在父元素上加類.clearfix

.clearfix::after{
    content:'';
    display:black;
    clear:both;
}

1.2文檔流單詞內聯元素排版問題

若是內聯元素在一行放不下,就自動換到下一行,就像水流同樣
剛纔的文字對齊方式,就是借用了文檔流的特色,讓span的after寬度設置爲100%沾滿一行,因此他不得不在第二行,第一行就只有姓名等文字,而後在用text-align:justfy;讓姓名平均沾滿一行
這就叫作文檔流flex

1.2.1瀏覽器關於單詞顯示的特色:

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

解決方法:ui

加連字符

使用css word-break:break-all;

2.文字溢出省略

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

[套路!]一行文本省略spa

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;
那麼只有一行文字能夠垂直居中,下面幾行將出現BUG
下面的方法不可取

[套路!]方法:
想讓div高度爲40px,那麼把line-height寫成24px,上下padding爲8px就能夠了,這樣多行文本也能夠距離差很少,不會出現bug

4.margin合併

margin合併出如今div裏面有div的狀況

若是父元素沒有什麼能夠擋住兒子外邊距的狀況,那麼兒子的margin外邊距會和父元素合併起來.例如,若是父元素沒有border,只有outline,擋不住.

若是是border擋住.上下外邊距不會合並

即便border是0.1,也有用

若是有padding上下擋住上下外邊距也不會合並

:[套路!]通常用這種方法祛除合併

還有一種能夠取消外邊距合併的方法:在父元素上寫overflow:hidden;

若是有內聯元素擋住,也能夠取消邊距合併

4.div裏既有塊級元素又有內聯元素時的文檔流

div裏的高度有他內部文檔流中元素的高度的總和決定的.
文檔流以下:

內聯元素從左到右依次排列,若是空間不夠,就換一行從左到右依次排列
塊級元素另起一行,佔滿整行,從上到下

5.脫離文檔流

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

注意: position:relative沒有脫離文檔流,若是再加上定位,只是相對於以前的位置定位,原來的地方還佔據位置

6.div裏的div如何徹底居中

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

父元素高度肯定.(若是按照從內往外寫通常高度不會固定,因此儘可能讓高度不要固定,)

惟一能想到讓div高度肯定的狀況:好比高度和瀏覽器窗口同樣:height:100vh;

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

方法二:若是子元素不能固定高度,由於裏面有內聯元素,本身撐開.那麼在父元素上用flex佈局.(ie不支持)

.dad{
    display:flex;
    justify-content:center;
    align-items:center;
}

7.內聯元素高寬如何肯定

內聯元素的padding 和margin只會影響寬度,可是不會影響高度.

總結:

內聯元素高度只受line-height影響
內聯元素寬度由padding,margin,border和內容一塊兒決定

8.塊級元素寬高總結

塊級元素高度:div裏的高度有他內部文檔流中元素的高度的總和決定的.padding border會影響高度.margin有時會影響,有事不會影響,由於可能會合並
塊級元素寬度:儘可能不要設置成固定,它繼承父元素

9.實現一個1:1的DIV

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。