CSS之盒模型

最新推荐文章于 2024-08-20 13:42:14 发布

wkxjhngw

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量126

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_50945128/article/details/110729450

版权

笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

行盒	块盒
display等于inline的元素	display等于block的元素
在页面中不换行	独占一行
span、a、img、video、audio （与内容相关）	容器元素、h1~h6、p (浏览器默认样式表设置)

display默认值为inline (没有声明display时)

盒子的组成部分

在这里插入图片描述

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上右下左（顺时针） or 上下左右

填充区+内容区 = 填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style
（soild：实线）

边框宽度：border-width

边框颜色：border-color
（默认是字体颜色）

都是速写属性

边框+填充区+内容区 = 边框盒 border-box

外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

盒模型应用

改变宽高范围

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

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

解决方法：

精确计算
CSS3：box-sizing

例：

<style>
        .text{
            width: 100px;
            height: 200px;
            padding-left: 20px;
            border: solid 1px red;
        }
</style>

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

<style>
        .text{
            width: 100px;
            height: 200px;
            padding-left: 20px;
            border: solid 1px red;
            box-sizing: border-box;
        }
</style>

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

改变背景覆盖范围

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

可以通过background-clip进行修改

.text{
            width: 200px;
            height: 600px;
            padding: 10px;
            border: 5px dashed red;
            background: #008c8c;
            background-clip: padding-box;
}

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

溢出处理

overflow，控制内容溢出边框盒后的处理方式

visible：可见（默认）
hidden：隐藏
scroll：滚动条（可通过overflow-y（x）：使滚动条只纵向（横向）出现）
auto：滚动条自动出现

在这里插入图片描述

断词规则

word-break，会影响文字在什么位置被截断换行

normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断

空白处理

white-space: nowrap(不换行)

<!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>
        li{
            border-bottom: 1px dashed #ccc;
            line-height: 2;
            border-left: 3px solid #008c8c;
            padding-left: 10px;
            margin: 1em 0;
            width: 300px;
            white-space: nowrap;/*不换行 */
            overflow: hidden;/* 溢出隐藏 */
            text-overflow: ellipsis;/*文字溢出的部分用用圆点代替*/
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li>Debitis facilis aperiam nam autem. Sed, quisquam velit.</li>
        <li>Mollitia consequuntur veritatis doloribus odit qui fuga id!</li>
        <li>Itaque quam, dolores perferendis reprehenderit harum laboriosam! Alias?</li>
        <li>Enim laborum quas rem distinctio corrupti quo ad?</li>
        <li>Deleniti voluptate laboriosam quos distinctio fuga, at sint!</li>
        <li>Enim labore culpa soluta placeat harum, iste ex.</li>
        <li>Error quibusdam quidem minus voluptas, similique aliquid iste.</li>
        <li>Nemo nam sit architecto facere non, quae similique?</li>
        <li>Placeat et cumque maxime minus, ducimus hic esse.</li>
    </ul>
</body>
</html>