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

資訊專欄INFORMATION COLUMN

CSS中寬度與高度

JerryWangSAP / 975人閱讀

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

div的高度

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

文字兩端對齊：

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

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

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

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

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

浮動

左右布局把所有的子元素加上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;
}

文檔流

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

文本隱藏

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

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

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

p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
margin合并問題：

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

垂直居中

文字垂直居中，不要寫死高度，寫一個(gè)行高，剩余高度用padding補(bǔ).

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

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

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

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

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

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

相關(guān)文章

  • CSS:關(guān)于元素高度與寬度的討論 系列文章（二）

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

    曹金海 評論0 收藏0

  • CSS：關(guān)于元素寬度與高度的討論 系列文章（一）

    摘要：元素寬度為第一種情況元素為文檔流中元素結(jié)論將上面結(jié)論中的例子元素寬度換為，表現(xiàn)與結(jié)論例子的表現(xiàn)一樣，因此若元素為文檔流中元素，則子元素寬度為父元素寬度的的。 約定:以下所討論元素均為,display:block的非置換元素。關(guān)于什么是置換元素，什么是非置換元素元素，以及在w3c標(biāo)準(zhǔn)中定義的各種視覺化格式的框?qū)⒃谝黄┪闹凶鞒鲈敿?xì)闡述。 1.元素不設(shè)寬度 第一種情況：元素為文檔流中元素 ...

    izhuhaodev 評論0 收藏0

  • CSS:關(guān)于元素高度與寬度的討論 系列文章(三)

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

    syoya 評論0 收藏0

  • CSS2:寬度與高度疑難點(diǎn)解析

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

    raledong 評論0 收藏0

  • CSS元素分類

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

    Travis 評論0 收藏0

  • 《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

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

    lylwyy2016 評論0 收藏0

發(fā)表評論

0條評論

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