CSS中寬度與高度

JerryWangSAP 發布于2019-08-29 15:18 / 990人閱讀

摘要：如過明確告訴瀏覽器行高，高度就是行高。塊級元素內聯元素中間的空格都會顯示出來只有一個，如果需要用多個空格可以用表示，但它實際上不是空格。

div的高度

div由的高度是由它里面的字體乘以字體建議的行高確定，跟這個字體大小沒有關系(不同字體相同字體大小，會影響div的高度。)如過明確告訴瀏覽器行高，div高度就是行高。

文字兩端對齊：

文字兩端對齊只有中文才有，英文是不需要用兩端對齊的。

塊級元素：text-align: justify
內聯元素：中間的空格都會顯示出來只有一個，如果需要用多個空格可以用 (no break space)表示，但它實際上不是空格。這個空格消除不了。用此方法受制于字體，所以不能用這方法實現兩端對齊。

兩個inline元素之間不管什么時候，它們中間有回車、空格、Tab或者任何看不見的字符，都會顯示成一個空格。

span{
    border: 1px solid green;
    display: inline-block;
    width: 5em;
    text-align: justify;
    line-height: 20px;      //行高也為20px
    height: 20px;   //強制span高度，高度被限死了之后，藍色的線就會脫離它
    overflow: hidden;   //藍色的線就看不見了
}

span::after{
    content: "";
    display: inline-block;
    border: 1px solid blue;     //看不見的東西加border，它的寬度和的span一樣寬，加了這個之后，姓名兩個字要和寬度為100%的藍色先對齊，
}

浮動

左右布局把所有的子元素加上float:left;在子元素的父元素上面加上class="clearfix"，樣式中加上下面clearfix的三行代碼：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ui > li {
    border: 1px solid red;
    float:left;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

文檔流

文檔流：內聯元素從左到右，塊級元素從上到下，div的高度是由它內部文檔流中元素高度總和決定的
脫離文檔流在子元素上加： float: left;,position: absolute;,position: fixed;
內聯元素的文本足夠多，一行容不下時會自動換行，這就是文檔流；如果一個單詞足夠長，長到一行放不下：要么用連字符連接前后，要么用word-break: break-all，意思是該什么時候斷就什么時候斷，不要管他是不是一個整體。

文本隱藏

塊級元素一行文本隱藏顯示：

p {
    white-space: nowrap;
    overflow:  hidden;
    text-overflow: ellipsis;
}

塊級元素多行文本隱藏顯示：

p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

margin合并問題：

如果父元素內部有子元素，父元素的高度會受子元素的margin影響，如果父元素有東西擋著子元素的margin（border、padding、overflow: hidden、內聯元素），父元素和子元素之間有空隙，否則沒有空隙，子元素的margin會從父元素中溢出，從而影響父元素與其外面元素的距離。

垂直居中

文字垂直居中，不要寫死高度，寫一個行高，剩余高度用padding補.

父元素中子元素垂直居中：

只是垂直在居中父元素上下加padding，左右加margin: 0 auto;

父元素全屏（2種）：
a.margin: auto;且子元素定高，絕對定位；
b.父元素加：

display: flex;
justify-content: center;
align-item: center;

云服務器 GPU云服務器寬度高度屏幕高度寬度 html寬度高度高度隨內容變動 css

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

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

CSS:關于元素高度與寬度的討論系列文章（二）

前言：在上一篇文章中討論了關于塊級非置換元素寬度與高度在不同情況下的表現，在這篇文章中將詳細的闡述來自w3c定義的視覺化格式模型中對于各種元素的定義，以及行內級非置換元素與行內級置換元素寬度與高度的討論元素的各種定義塊級元素與塊元素塊級元素(block-level elements) 那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。display 屬性值為：block,...

曹金海 2019-08-28 18:14 評論0 收藏0
CSS：關于元素寬度與高度的討論系列文章（一）

摘要：元素寬度為第一種情況元素為文檔流中元素結論將上面結論中的例子元素寬度換為，表現與結論例子的表現一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的。約定:以下所討論元素均為,display:block的非置換元素。關于什么是置換元素，什么是非置換元素元素，以及在w3c標準中定義的各種視覺化格式的框將在一篇博文中作出詳細闡述。 1.元素不設寬度第一種情況：元素為文檔流中元素 ...

izhuhaodev 2019-08-28 18:12 評論0 收藏0
CSS:關于元素高度與寬度的討論系列文章(三)

摘要：元素不在文檔流中結論如文章一中的結論一樣元素寬度等于其內容所占空間同樣的在文章一中也得出了元素不設高度元素的高度為其內容所占據空間若沒有內容則高度為。前言在CSS:關于元素高度與寬度的討論系列文章（一）中討論了display為display：block的置換元素的寬度與高度在不同情況下的表現,但是有些地方并不嚴謹,因此在這里做一個補充，在補充前先簡單介紹一下css盒模型以及其在可...

syoya 2019-08-28 18:18 評論0 收藏0
CSS2:寬度與高度疑難點解析

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

raledong 2019-08-29 15:43 評論0 收藏0
CSS元素分類

摘要：元素分類元素大的分為兩類塊級元素和行內級元素但行內元素可以進一步分為行內替換置換元素行內非替換非置換元素。一塊級元素與塊元素塊級元素元素會新起一行，并獨占一行，如等。同時塊級元素可以定義元素的寬度和高度。塊元素塊元素是屬性值為的元素。 CSS元素分類 CSS元素大的分為兩類：塊級元素和行內級元素但行內元素可以進一步分為：行內替換(置換)元素、行內非替換(非置換)元素。一、塊級元素與塊...

Travis 2019-08-29 15:19 評論0 收藏0
《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

摘要：塊級元素基本概念塊級元素是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。其中內部尺寸由內部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設為是無效的。此時的就會有計算值，即使祖先元素的計算為也是如此。塊級元素基本概念塊級元素：是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。塊級元素和display 為 block 的元素不是一個概念。每...

lylwyy2016 2019-08-29 18:31 評論0 收藏0