站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        css如何控制元素的顯示與隱藏

        css如何控制元素的顯示與隱藏

        屬性介紹:

        (推薦教程:css視頻教程)

        1. display屬性

        display屬性用于設(shè)置一個元素應(yīng)如何顯示。

        display: none; 隱藏對象display: block; 除了轉(zhuǎn)換為塊級元素之外,同時還有顯示元素的意思

        display隱藏元素后,不再占有原來的位置。

        2. visibility可見性

        visibility屬性用于指定一個元素應(yīng)可見還是隱藏。

        visibility: visible; 元素可見visibility: hidden; 元素隱藏

        visibility隱藏元素后,繼續(xù)占有原來的位置。

        如果隱藏元素想要原來的位置,就用visibility: hidden

        如果隱藏元素不想要原來的位置,就用display: none

        3. overflow溢出

        overflow屬性指定了如果內(nèi)容溢出一個元素的框(超過其指定高度和寬度)時,會發(fā)生什么。

        css如何控制元素的顯示與隱藏

        一般情況下,我們都不想讓溢出的內(nèi)容顯示出來,因為溢出的部分會影響布局。但是如果有定位的盒子,請慎用overflow: hidden,因為它會隱藏多余的部分。

        4. 溢出的文字省略號顯示

        4.1 單行文本溢出顯示省略號

        單行文本溢出顯示省略號必須滿足三個條件:

        先強制一行內(nèi)顯示文本

        white-space: nowrap; /*默認值normal,自動換行*/

        超出的部分隱藏

        overflow: hidden;

        文字用省略號替代超出的部分

        text-overflow: ellipsis;

        4.2 多行文本溢出顯示省略號

        多行文本溢出顯示省略號,有較大兼容性問題,適合于webkit瀏覽器或移動端,移動端大部分是webkit內(nèi)核。

        overflow: hidden; text-overflow: ellipsis; /*彈性伸縮盒子模型顯示*/ display: -webkit-box; /*限制在一個塊元素顯示的文本的行數(shù)*/ -webkit-line-clamp: 2; /*設(shè)置或檢索伸縮盒子對象的子元素的排列方式*/ -webkit-box-orient: vertical;

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 亚洲精品乱码久久久久久按摩| 久久精品国产亚洲AV无码娇色| 在线观看亚洲精品国产| 久久99久久99小草精品免视看| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 青青草国产精品久久久久| 老司机亚洲精品影院| 亚洲国产精品国产自在在线| 国产日韩精品无码区免费专区国产| 99热精品在线观看| 国产精品区免费视频| 久热这里只有精品视频6| 西瓜精品国产自在现线| 久草热8精品视频在线观看| 99精品久久久久久久婷婷| 国产精品视频永久免费播放| 亚洲动漫精品无码av天堂| 亚洲精品专区在线观看| 色偷偷88欧美精品久久久| 欧美成人精品网站播放| 久久国产综合精品五月天| 国产一级精品高清一级毛片| 国产99视频精品专区| 国产成人精品视频2021| 国产成人精品久久综合| 国产精品夜色视频一级区| 国产高清在线精品一本大道国产| 欧美精品第一页| 日韩精品免费视频| 中文字幕亚洲精品资源网| 亚洲无删减国产精品一区| 99久免费精品视频在线观看| 国产99久久久国产精品~~牛| 777欧美午夜精品影院| 亚洲国产精品热久久| 午夜精品视频在线观看| 97视频在线精品国自产拍| 国产精品国产三级国产潘金莲| 国产精品极品| 巨大黑人极品VIDEOS精品| 亚洲国产成人a精品不卡在线|