HTML css——盒模型应用

最新推荐文章于 2023-03-14 15:59:11 发布

33的史努比

最新推荐文章于 2023-03-14 15:59:11 发布

阅读量314

点赞数

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

本文链接：https://blog.csdn.net/coising/article/details/122524962

版权

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

88 篇文章 0 订阅

订阅专栏

盒模型应用

文章目录

盒模型应用

改变宽高范围

默认情况，width height 设置的是内容盒的宽高

页面重构师将psd（设计稿）文件制作为静态页面

单行文字居中：line-height设置为和height一样

衡量设计稿尺寸的时候，往往用的是边框盒，但设置width height，则设置的是内容盒

精确计算
CSS3： box-sizing

 /* 改变宽高影响范围 */
box-sizing: content-box;

背景覆盖范围的改变

默认情况，背景覆盖边框盒

background-clip进行修改

溢出处理

overflow 速写属性
控制内容溢出边框盒后的处理方式 hidden隐藏 scroll滚动条 auto

断词规则

word-break 会影响文字在什么位置被截断.(不是决定是否换行)

normal 普通，cjk字符文字位置截断；非CJK字符（单词位置截断）

break-all 截断所有所有字符都在文字处截断
keep-all 所有文字都在单词之间截断 (对于中文有空格才截断)

空白处理

white-space： nowrap；

<!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>
        li{
            border-bottom: 1px dashed gray;
            line-height: 2;
            border-left: 3px solid #1bd4d4;
            padding-left: 10px;
            margin: 1em 0;
            width: 200px;
            /* 展示不全的部分以...显示 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, corporis?</li>
            <li>Veniam illum mollitia ea blanditiis sunt quos, id exercitationem possimus!</li>
            <li>Incidunt tempore mollitia dolor autem ipsum assumenda, nam deserunt? Omnis!</li>
            <li>Qui doloremque nostrum quas quo. Quos aliquam consequuntur iusto hic.</li>
            <li>Ducimus sit laborum aliquid modi quibusdam. Labore officia alias laboriosam!</li>
            <li>Perspiciatis nostrum vel dolore, distinctio obcaecati illum repudiandae dolor dicta.</li>
            <li>Minus similique maxime, totam ratione delectus officia laudantium consequuntur voluptates.</li>
            <li>Eius molestiae ut rem obcaecati? Dolore ratione asperiores repellat at!</li>
            <li>Corrupti, eum. Facere voluptas, distinctio reprehenderit id quam quia debitis.</li>
            <li>Officiis repudiandae quis veniam numquam dolores, maxime mollitia illo obcaecati.</li>
        </ul>
    </div>
</body>
</html>

其中，常用：

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

只能控制单行文本

normal 普通情况会进行空白折叠
pre则不会
nowrap 空白折叠会发生但不会换行

<!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>
</head>
<body>
    <pre>
        var i=1;
        alert("a");
    </pre>
</body>
</html>

此时，页面显示的是两行。
若pre改成div 则显示一行。添加：white-space=pre 则重新变成两行

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML css——盒模型应用

盒模型应用文章目录盒模型应用改变宽高范围背景覆盖范围的改变溢出处理断词规则空白处理改变宽高范围默认情况，width height 设置的是内容盒的宽高页面重构师将psd（设计稿）文件制作为静态页面单行文字居中：line-height设置为和height一样衡量设计稿尺寸的时候，往往用的是边框盒，但设置width height，则设置的是内容盒精确计算CSS3： box-sizing /* 改变宽高影响范围 */box-sizing: content-box;背景覆盖
复制链接

扫一扫

专栏目录