css--day08

最新推荐文章于 2024-07-21 19:13:42 发布

xiaoruia

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量96

点赞数

分类专栏：我的前端学习记录文章标签： css 前端 html

本文链接：https://blog.csdn.net/xiaoruia/article/details/125542623

版权

我的前端学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day08

overflow溢出属性

overflow：hidden 超出隐藏
overflow：scroll 超出范围使用滚动条
overflow ：auto 判断是否溢出，如果溢出则加滚动条
overflow：inherit 继承父辈的overflow

white-space空余空间

white-space：nowrap 强制在一行显示
white-space： pre 根据代码里的空格和转换进行跳转
white-space：pre-wrap 只有换行，没有空格
white-space ：pre-line 只有空格，没有换行

text-overflow省略号显示

text-overflow：ellipsis 显示省略号

综合应用：

当当行文本需要隐藏溢出的文字并出现省略号时（在项目中经常使用）

设置盒子宽度
white-space:nowrap
overflow:hidden
texxt-overflow:ellipsis

实例：

<!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>
        .box_1,.box_2,.box_3,.box_4,.box_5{
            width: 100px;
            height: 100px;
            margin-bottom: 50px;
            border: 1px solid black;
        }
        .box_1 {
            /* 超出隐藏 */
            overflow: hidden;
        }
        .box_2 {
            /* 滚动条 */
            overflow: scroll;
        }
        .box_3 {
            /* 如果溢出就加滚动条 */
            overflow: auto;
        }
        .box_4 {
            /* 继承父元素 */
            overflow: inherit;
        }
        body {
            overflow: auto;
        }
        .box_5 {
            /* 强制一行 */
            white-space: nowrap;
            /* 超出隐藏 */
            overflow: hidden;
            /* 超出省略 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box_1">今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</div>
    <div class="box_2">今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</div>
    <div class="box_3">今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</div>
    <div class="box_4">今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</div>
    <div class="box_5">今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</div>
</body>
</html>

display

元素类型：

块级元素：独占占据一行，可以改变宽高例子：div,p,h1,dl,ul等独占占据一行的元素
行内元素：不能独占占据一行，盒子宽度高度不能改变例子：span,a,i,em等不能独自占据一行的元素
行内块元素：不能独自占据一行，但是可以调整宽高例子：input等表单元素
特殊的行内元素：img图标标签，不能独自占据一行，但是可以改变宽高

元素类型转换：

display：block----转换成块级元素
dispay：inline-block----转行成行内块元素
display：inline—转换成行内元素

重点：

行内元素想要设置其宽高的方式有
- 添加浮动
- 改为行内块元素
- 改为块级元素
img标签取消下方四线三段的多余宽度的方法
- 字体大小设置为0
- 把img标签转换为块级元素
行内块元素中间的空格是由于在输入代码时有空格，解决办法：
- 用注释把多余的空格注释掉
- 在body中设置字体为0

实例：

<!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>
        div {
            /* 行内元素转换 转换成行内元素 */
            display: inline;
        }
        p {
            /* 转换成行内块元素 */
            display: inline-block;
        }
        span {
            /* 转换成块级元素 */
            display: block;
        }
        i {
            /* 隐藏元素 */
            display: none;
        }
    </style>
</head>
<body>
    <!-- 块级元素 -->
    <div>块级元素</div>
    <p>块级元素</p>
    <h1>块级元素</h1>
    <dl>块级元素</dl>
    <ul>块级元素</ul>
    <!-- 行内元素 -->
    <span>行内元素</span>
    <a href="#">行内元素</a>
    <i>行内元素</i>
    <em>行内元素</em>
    <!-- 行内块元素 -->
    <input type="text">
</body>
</html>