HTML&CSS拓展（3）

发布日期: 2022-10-18

更新日期: 2023-03-03

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

每日一记

溢出属性

overflow:visible全部显示,hidden不显示溢出的,scroll滑动一直存在,auto自动
overflow:inherit继承父元素的效果
单一方向显示
overflow-x:auto;
overflow-y:hidden;
一定要定义x和y

空余空间

white-space:normal;        #normal无视空白，nowrap不换行直到br标签，pre，pre-wrap,pre-line
pre标签是预格式化文本，保留空格tab回车
pre保留空白，pre-wrap折行但是保留空白，pre-line保留空白不换行

溢出省略号

width:2000px;                     #一定要定义宽度
white-space:nowrap;               #不换行
overflow:hidden;                  #隐藏溢出的部分
text-overflow:ellipsis;           #若溢出则在最后显示省略号

元素显示类型

1.块元素(display:block或list-item)
例:p,div,h标签
A）块状元素在网页中就是以块的形式显示，快状就是元素显示为矩形区域，
B）默认情况下，块状元素都会占据一行，会按顺序自上而下排列。
C）块状元素都可以定义自己的宽度和高度
D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。
E）p标签只能放文本不能放块级元素（div等）
2.行内(内联)元素(display:inline)
例:a,b,em,i,span,strong标签
A）在同一行排列
B）无法设置宽高，只能默认
3.行内块元素(display:inline-block)
例:img,input标签
A）可以设置宽高
B）同行排列

注意
span行内元素只支持左右边距，不支持上下边距
行内块支持

元素类型相互转换

直接在style里display:block;进行转换

设置鼠标悬浮时显示，否则隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide{                      #隐藏界面(不显示内容)
            display:none;
        }
        .box:hover ul{              #在hover时显示块元素(block是原本的style)
            display:block;
        }
    </style>
</head>
<body>
    <div class="hide">
        111111111111
    </div>
    <div class="box">
        内容1
        <ul class="hide">
            <li>11111</li>
            <li>22222</li>
            <li>33333</li>
        </ul>
    </div>
</body>
</html>

二级菜单案例《重点》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;                       #先对整个页面布局
            margin:0;
        }
        .box{
            width:300px;
            margin:0 auto;
        }
        ul{                                  #不悬浮时不显示
            list-style:none;
        }
        .box .item{
            float:left;
            width:148px;                     #前面提到的要减去boder的宽度，因为计算的是加上boder的
            text-align:center;
            border:1px solid blue;
            background:blue;
            color:white;
            line-height:40px;
        }
        .item:hover{
            color:lightblue;
        }
        .item>ul{                            # >是选择器，选择子代的而不会选择到父代的ul标签
            display:none;
            background:white;
            color:black;
        }
        .item:hover ul{                      #hover时恢复原本的块元素属性
            display:block;
        }
        .item li:hover{                      #注意是hover在谁的时候显示变化
            color:blue;

        }
    </style>
</head>
<body>
    <ul class="box">
        <li class="item">aaaaaaaaaaaa        #第一个一级菜单
            <ul>
                <li>111</li>
                <li>222</li>                 #第一个二级菜单
                <li>333</li>
                <li>444</li>
            </ul>
        </li>
        <li class="item">bbbbbbbbbbbb        #第二个一级菜单
            <ul>
                <li>pmp</li>
                <li>红帽</li>                #第二个二级菜单
            </ul>
        </li>
    </ul>
</body>
</html>