【HTML+CSS】溢出属性-overflow

溢出overflow

决定溢出容器的部分如何显示

• overflow:visible 可见 显示 默认
• overflow:hidden溢出容器的部分隐藏
• overflow:scroll强制出现滚动条
• overflow:auto根据内容判读是否出现滚动条
• overflow-x:auto水平方向如何显示
• overflow-y:hidden垂直方向如何展示
• 特殊: overflow:inherit 主动继承父元素的属性

overflow属性是加给父元素的

<style>
        .box1{
            width: 200px;
            height: 120px;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .box2{
            width: 420px;
            height: 100px;
        }
        .box2 img{
            width: 100px;
            height: 100px;
            /* float: left; */
        }
        .father{
            width: 300px;
            height: 200px;
            background-color: skyblue;
            border: 4px solid black;
        }
        .son{
            width: 200px;
            height: 100px;
            border: inherit;
        }
    </style>
    <div class="box1">
        <div class="box2">
            <img src="../img/overflow1.jpg" alt="">
            <img src="../img/overflow2.jpg" alt="">
            <img src="../img/overflow3.jpg" alt="">
            <img src="../img/overflow4.jpg" alt="">
        </div>
    </div>
    <div class="father ">
        <div class="son"></div>
    </div>

对空白空间的处理

white-space: 对空白空间(空格 回车)的处理

• normal 默认 多余的空格和回车转为一个空格执行

  • pre保留所有的空格和回车
  • nowrap文本不换行

  text-overflow: ellipsis单行文本溢出展示省略号

<style>
.text1{
            width: 300px;
            height: 300px;
            background-color: pink;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>

元素类型的转换

display: 设置严肃属性

• block 块元素
• inline 块元素
• inline-block 行内块元素
• list-item 列表项目
• none 让元素消失
  • 不占据页面空间 但是标签依然存在,可以通过display: block再显示出来

静态导航

• 导航的数量固定, 宽度固定
• 适用于导航数量较少的地方, 公司官网, 个人博客
• 导航的hover效果加给li
• 保证a标签的点击区域变大

<style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        /* li只做浮动 */
        li{
            float: left;
            border: 1px solid black;
        }
        /* a标签 */
        a{
            width: 100px;
            height: 60px;
            background-color: yellow;
            display: block;
            text-align: center;
            line-height: 60px;
        }
        li:hover a{
            background-color: pink;
        }
</style>

动态导航

• 导航的数量不固定, 宽度不固定, 适用于动态列表
• li标签宽度

<style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        
        li{
            float: left;
            border: 1px solid #000;
        }
        a{
            height: 60px;
            padding: 0 30px;
            background-color: yellow;
            display: block;
            line-height: 60px;
        }
        li:hover a{
            background-color: pink;
        }
</style>

**display: none **

小练习: 鼠标移入.father时出现.son

<style>
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            display: none;
        }
        .father:hover .son{
            display: block;
        }
</style>