CSS属性:元素隐藏

overflow 属性

处理超出范围的文本内容

常用属性值

  • visible 默认值,溢出内容不会被修剪,会呈现在元素框之外
  • hidden 不显示溢出的内容
  • scroll 滚动条来显示元素内溢出的内容,即使没有溢出也显示滚动条
  • auto 自动地处理溢出,如果溢出则显示滚动条,如果没溢出,则正常显示

代码示例

<style type="text/css">

    div{
        width: 100px;
        height: 100px;
        background-color: #00cc66;
        margin-right: 100px;
        float: left;
    }

    #div1{
        overflow: auto;/*超出的部分让浏览器自行解决*/
    }
    #div2{
        overflow: visible;/*超出的部分会显示出来*/
    }

    #div3{
        overflow: hidden;/*超出的部分将剪切掉*/
    }

style>

<body>
<div id="div1">天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来div>
<div id="div2">天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来div>
<div id="div3">天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来天生我材必有用,千金散尽还复来div>
body>

CSS属性:元素隐藏_第1张图片

display 属性 link

html可以将元素分类方式分为行内元素、块元素和行内块元素三种,使用display属性能够将三者任意转换

  • none 此元素不会被显示
  • display:inline;转换为行内元素
  • display:block;转换为块元素
  • display:inline-block;转换为行内块元素
  • 还有很多值,但不常用,如 table 等

行内块状特征

  • 支持全部样式
  • 可以设置宽高,如果不设置,行内块元素的宽高就是内容撑开的宽高
  • 不会独占一行,与其他行内元素一行显示
  • 默认排列方式为从左到右
  • 代码换行,行内块元素之间会产生间距

visibility 属性link

  • visibility:hidden 隐藏元素全部,用于元素自己,隐藏后仍占位置
  • display:none 隐藏该元素全部,用于元素自己,隐藏后不占位置

元素隐藏

overflow: hidden 不显示溢出的内容

  • overflow: hidden 只隐藏溢出的部分,用于父元素
  • overflow: hidden 常用于文字溢出,文档流中的元素溢出

display:none 此元素不会被显示

  • display:none 会隐藏该元素全部,用于元素自己,隐藏后不占位置
  • display:none 常用于下拉框,脱离文档流的盒子,如京东导航下拉框

visibility:hidden 属性规定元素是否可见

  • visibility:hidden 会隐藏该元素全部,用于元素自己,隐藏后仍占位置

transition 属性 动态效果

  • transition起始和结束必须是有效值,不能是auto
  • 京东下拉框:①设置下拉框高度为0 ②overflow: hidden 隐藏溢出的部分 ③hover改变高度 配合transition实现动画
  • 小米logo:①定位改变left并排 ②overflow: hidden 隐藏 ③hover改变left 配合transition实现动画
  • 具体代码看练习题

拓展:文字隐藏

  • 案例:小米logo在h1中,此时常在h1中加关键字优化seo,这个关键字是给搜索引擎看的,因此需要隐藏
  • text-index:-999px,具体代码看练习题

你可能感兴趣的:(★,CSS)