筱筱学前端Day7

最新推荐文章于 2024-08-30 14:40:01 发布

慕筱筱

最新推荐文章于 2024-08-30 14:40:01 发布

阅读量201

点赞数 1

分类专栏：前端入门学习文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_62772655/article/details/123257106

版权

前端入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

干货1——溢出属性
介绍如下（图源网络）：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height: 200px;
            background: yellow;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Fugiat, dolore enim. Quaerat, eaque asperiores. 
        Dolore eveniet odio veritatis odit placeat. Ipsa dolores iure
         iusto modi perspiciatis sapiente dignissimos ducimus harum.
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Dicta molestiae officia voluptatum, 
    </div>
</body>
</html>

当div中是overflow: visible;时，是默认不隐藏的效果：
在这里插入图片描述
当div中是overflow:hidden;时，是溢出隐藏，文本裁切效果：

当div中是overflow:scroll;时，文字超出盒子时，效果如下：

当div中是overflow:scroll;时，文字未超出盒子时，效果如下：

当div中是overflow:auto;时，效果如下，更机动，文字超过盒子时会有滚动条（横竖滚动条都会机动地有），未超过时不会有滚动条：
在这里插入图片描述

当div中是overflow: inherit;时，是继承父元素的效果。
下面用一个图片来举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
        }
        .box{
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="008/32.jpg" alt="">   
    </div>
</body>
</html>

若想只有横向滚动条，.box中应写

overflow-x: auto;
overflow-y: hidden;

效果如下：
在这里插入图片描述
若想只有纵向滚动条，方法类似，不再举例。

溢出省略号
接上（图源网络）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background: yellow;
            width: 200px;
            height: 200px;
            white-space: normal;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing
         elit. Numquam obcaecati fugiat ad reiciendis. 
        Laudantium ut vitae, in illo, inventore dolores, magni fugiat 
        iure itaque provident sint. Et excepturi totam quos.
    </div>
</body>
</html>

当div中是white-space: normal;时，效果是默认溢出的。
在这里插入图片描述
当div中是white-space: nowrap;时，效果如下（右边还有一部分没截到）：

write-space:还可以如下

nowrap:不换行
pre:显示空格，回车，不换行
pre-wrap:显示空格，回车，换行
pre-line:显示回车，不显示空格，换行

注：pre也可以做个单独的标签。
当div中这样写时

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

可以得到省略号隐藏的效果，再用之前学过的内容可以做出把鼠标移上才显示完全的效果。
在这里插入图片描述
干货2——元素显示类型
介绍如下（图源网络）：

块元素
注：在网页中鼠标点击右键再点击“检查”即可看网页的HTML代码效果喔~
当我们如下创造一个盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

查看网页代码可以看到：
在这里插入图片描述
可以看见body中有一个display:block；，这个就是块元素自带的类型，块元素是独占一行的。
注：若是列表等自带display:list-item;类型的也归于块元素，也是独占一行的。
p标签放文本可以，不可以放块级元素。

行内元素

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        b{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <b>111111</b>
    <em>222222</em>
    <span>333333</span>
    <strong>444444</strong>
    <a href="http://www.baidu.com">555555</a>
</body>
</html>

效果如下：
在这里插入图片描述
注：这些元素都排在了同一行，没有独占一行，且虽然给b标签加了宽高属性，但实际上宽高并没有像设置的那样，只有颜色显示了设置的颜色。
这些元素自带的属性是display:inline;

行内块元素
若在body中加上：

<img src="008/32.jpg" alt="">
<input type="text">

且在style中对图片的宽高做一下限制，让图片变小一点。效果如下：
在这里插入图片描述
这个图片和输入框就输入行内块元素，既可以独占一行，也可以和别的元素共用一行。
行内块元素自带的属性是display:inline-block;

盒子模型

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 1px solid red;
        }
        span{
            background: yellow;
            padding:10px;
        }
    </style>
</head>
<body>
    <div></div>
    <span>span标签</span>
    <div>1111111111111111</div>
</body>
</html>

效果如下：
在这里插入图片描述

不过这只是因为我们给div加上了内外边距导致的一个障眼法，真正的行内元素的效果是什么样的呢？我们把style中的div部分注释掉它们就原形毕露了：
在这里插入图片描述
我们可以发现：span行内元素只能设置边距的左右边距，不能设置上下边距。
注：行内块元素是可以设置边距的左右与上下边距的。

元素类型相互转换
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            
        }
    </style>
</head>
<body>
    <img src="008/32.jpg" alt="">
    <p>1111111111111111</p>
</body>
</html>

当你的img默认是行内块元素时，效果如下：
在这里插入图片描述
检查之后会发现文案与图片中间是有一小段距离的，没有挨在一起。
这时只要在style的img中设置：

display: block;

即把行内块元素转换成块元素，就可以去掉图片与文字之间的距离：
在这里插入图片描述
注：我们进行类型的转换是为了让页面更美观实用，而不要不负责任地随意转换喔。
下面我们来用类型转换做一个隐藏与显示的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide{
            display: none;
        }
        .box:hover ul{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">英语
        <ul class="hide">
            <li>111111</li>
            <li>222222</li>
            <li>333333</li>
        </ul>
    </div>
</body>
</html>

这时，我们可以做出鼠标移到“英语”上就显示123，鼠标不移到“英语”上就不显示123的效果。
移上前：
在这里插入图片描述
移上后：

最后，我们以一个二级菜单案例结束今天的内容吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            margin:0 auto;
        }
        ul{
            list-style: none;
            /* 把列表前边的图标去掉 */
        }
        .box .item{
            float: left;
            width: 150px;
            text-align: center;
        }
        .item ul{
            display: none;
            color: aqua;
        }
        .item:hover ul{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li class="item">文科
            <ul>
                <li>历史</li>
                <li>地理</li>
                <li>政治</li>
            </ul>
        </li>
        <li class="item">理科
            <ul>
                <li>物理</li>
                <li>化学</li>
                <li>生物</li>
            </ul>
        </li>
    </ul>
</body>
</html>