资讯专栏INFORMATION COLUMN

构建静态页面 之 [ 显示和溢出 ]

wendux / 2294人阅读

摘要:显示描述通过属性来设置指定元素在页面中的显示或隐藏属性也可以设置指定元素的显示和隐藏属性值为表示隐藏目标元素属性值不为可以将隐藏的元素在显示出来比如该属性设置隐藏效果时,会连指定元素的所占区域一同隐藏属性属性也可以设置指定元素的显

显示 描述

通过CSS属性来设置指定元素在页面中的显示或隐藏

display属性

也可以设置指定元素的显示和隐藏

属性值为 none - 表示隐藏目标元素

属性值不为 none - 可以将隐藏的元素在显示出来

比如

display: block

display: inline

display: inline-block

该属性设置隐藏效果时,会连指定元素的所占区域一同隐藏


    
    display属性
    


visibility属性

表示设置显示或隐藏

hidden 属性值 - 表示隐藏指定元素

visible属性值 - 表示显示指定元素

该属性设置隐藏效果时,不会连指定元素的所占区域一同隐藏


    
    visibility属性
    


溢出 描述

表示指定元素中的内容(文本、图像、等等...)超出其父级元素的所在区域

overflow属性

表示解决内容溢出

visible属性值 - 表示不隐藏溢出内容(默认值)

hidden属性值 - 表示隐藏溢出的内容

scroll属性值 - 表示为需要隐藏的部分添加滚动条

auto属性值 - 表示交由浏览器自动调节


    
    内容溢出
    


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi, corporis dolor enim facilis hic ipsam iste laborum, modi molestiae nisi officiis ratione recusandae rem repudiandae sint, sunt tenetur vel?

text-overflow属性

表示设置文本的内容溢出

ellipsis属性值 - 表示将溢出的内容以省略号(...)方式显示

该属性必须配合 overflow属性 和 white-space属性 一起使用


    
    text-overflow属性
    


Lorem ipsum dolor sit amet, consectetur adipisicing elit.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113818.html

相关文章

  • 构建静态页面 [ 显示溢出 ]

    摘要:显示描述通过属性来设置指定元素在页面中的显示或隐藏属性也可以设置指定元素的显示和隐藏属性值为表示隐藏目标元素属性值不为可以将隐藏的元素在显示出来比如该属性设置隐藏效果时,会连指定元素的所占区域一同隐藏属性属性也可以设置指定元素的显 显示 描述 通过CSS属性来设置指定元素在页面中的显示或隐藏 display属性 也可以设置指定元素的显示和隐藏 属性值为 none - 表示隐藏目标...

    crossea 评论0 收藏0
  • 构建静态页面 [ 浮动 ]

    摘要:浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流,指定元素后面的元素会自动向前,形成重叠的显 浮动 描述 是对页面布局的一种表现方式 设置浮动的元素会脱离文档流 设置浮动的元素会改变后面元素的显示位置 float属性 表示设置元素浮动 ...

    snowell 评论0 收藏0
  • 构建静态页面 [ 浮动 ]

    摘要:浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流,指定元素后面的元素会自动向前,形成重叠的显 浮动 描述 是对页面布局的一种表现方式 设置浮动的元素会脱离文档流 设置浮动的元素会改变后面元素的显示位置 float属性 表示设置元素浮动 ...

    Scliang 评论0 收藏0
  • 静态页面架构】CSS显示溢出

    摘要:架构显示与溢出显示属性以设置隐藏效果和元素类型设置当前元素为隐藏效果这种方式将元素设置为隐藏后,该元素不会再占有页面空间通过属性将元素显示将元素设置为块级元素将元素设置为内联元素将元素设置为行内元素属性以设置,元素显示或隐藏 CSS架构 显示与溢出; 1.显示; display属性; 以display设置隐藏效果和元素类型 div { widt...

    tolerious 评论0 收藏0
  • 构建静态页面 [ 布局 ]

    摘要:布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素(text-a...

    andot 评论0 收藏0

发表评论

0条评论

wendux

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<