web盒模型学习笔记04

最新推荐文章于 2023-04-12 20:54:35 发布

EIHH

最新推荐文章于 2023-04-12 20:54:35 发布

阅读量130

点赞数

文章标签：编辑器

本文链接：https://blog.csdn.net/weixin_47281509/article/details/127086861

版权

盒模型

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

盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行，块盒独占一行

display默认值inline

浏览器默认样式表设置的块盒：容器元素，h1~h6,p

常见的行盒：span a img video audio

盒子组成部分

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

内容 content

width、height、设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box

填充 padding

盒子边框到盒子内容的距离
padding-left、padding=right、padding=top
padding-bottom

padding：简写属性
padding：上右下左

填充区 + 内容区 = 填充盒
3. 边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框 + 填充区 + 内容区 = 边框盒 border-box
4. 外边距 margin

边框到其他盒子的距离

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

盒模型应用

改变宽高范围

默认情况下、width和height设置的是内容盒宽高
衡量设计稿尺寸时往往使用的是边框盒但设置width盒height，则设置的是内容盒

精确计算
CSS3：box-sizing

改变背景覆盖范围

默认情况下、背景覆盖边框盒
可以通过background-clip进行修改

溢出处理

overflow：控制内容溢出边框盒后额处理方式

断词规则

word-break 会影响文字在什么位置被截断换行
normal：普通，CJK字符（文字位置截断）非CJK字符（单词位置截断）
break-all：截断所有，所有字符都在文字处截断
keep-all：保持所有，所有文字都在单词之间截断

空白处理

white-space：nowarp
white-space：pre（空白折叠）
text-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>
        /* div{
            width: 236px;
            height: 51px;
            color: #a7a7a7;
            background: #2d2e36;
            line-height: 51px;
            padding-left: 46px;
            border: 3px solid red;
            box-sizing: border-box;
        } */
        div{
            width: 100px;
            height: 100px;
            background: #008c8c;

        }
    </style>
</head>
<body>
    <!-- <div>
        页游中心
    </div> -->
    <div >
        Lorem, ipsum dolor .
    </div>
</body>
</html>