成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS中寬度與高度

JerryWangSAP / 1009人閱讀

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

div的高度

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

文字兩端對(duì)齊：

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

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

兩個(gè)inline元素之間不管什么時(shí)候，它們中間有回車(chē)、空格、Tab或者任何看不見(jiàn)的字符，都會(huì)顯示成一個(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)色的線就會(huì)脫離它
    overflow: hidden;   //藍(lán)色的線就看不見(jiàn)了
}

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

浮動(dòng)

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

文本隱藏

塊級(jí)元素一行文本隱藏顯示：

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

塊級(jí)元素多行文本隱藏顯示：

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

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

垂直居中

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113226.html

相關(guān)文章

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

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

    曹金海 評(píng)論0 收藏0

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

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

    izhuhaodev 評(píng)論0 收藏0

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

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

    syoya 評(píng)論0 收藏0

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

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

    raledong 評(píng)論0 收藏0

  • CSS元素分類(lèi)

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

    Travis 評(píng)論0 收藏0

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

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

    lylwyy2016 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<