第十六节：盒模型及应用

2020-04-10 本文已影响0人 EndPein

盒模型

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

盒子类型：
1、行盒，display等于inline的元素,不换行
2、块盒，display等于block的元素,独占一行

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

display默认样式为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio 等和内容相关的

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
1、内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2、填充 padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性
padding：上右下左
padding: 上下左右
padding: 上下左右（4个方向一致）

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

3、边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color 默认是字体颜色

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

4、外边距 margin
边框到其他盒子的距离
margin也是有上下左右4个属性的

盒模型应用

改变宽高范围

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

例如我们现在要做一个整体是 250px*50px的一个盒子

1、精确计算

/* 需要手动计算减去 padding-left 和边框的距离才可以 */
        div{
            height: 48px;
            width: 218px;
            border: 1px solid red;
            line-height: 50px;
            padding-left: 30px;
        }

2、CSS3:box-sizing属性

        div{
            height: 50px;
            width: 250px;
            border: 1px solid red;
            line-height: 50px;
            padding-left: 30px;
            /* 改变宽高的影响范围 */
            box-sizing: border-box;
        }

改变背景覆盖范围

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

溢出处理

overflow,控制内容溢出边框盒后的处理方式,默认情况是可见的

断词规则

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

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

空白处理

white-space: nowrap; 不换行
但是不换行可能会造成溢出，可以设置overflow: hidden;隐藏溢出的文字,在设置text-overflow: ellipsis;将文字溢出的部分显示...
只能控制单行文本

<!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: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, cumque.</li>
        <li>Eligendi incidunt sint deleniti laboriosam sunt itaque tempora debitis ad.</li>
        <li>Odit ipsam hic repellat voluptatibus, est asperiores odio amet sit.</li>
        <li>Laborum beatae possimus repellendus nobis eius optio aliquid quis molestiae?</li>
        <li>Nobis veniam tempora quas nemo laudantium ipsum qui ducimus ad?</li>
        <li>Excepturi pariatur cumque maxime eligendi unde aliquid nesciunt aperiam dignissimos?</li>
        <li>Quas quasi eos, ipsam et nobis voluptatum tempora fugit aliquam.</li>
        <li>Modi fuga necessitatibus optio explicabo vitae, reprehenderit consequatur tenetur iure!</li>
        <li>Veritatis laborum fugit aliquam ut mollitia, magni voluptate possimus enim!</li>
        <li>Iste, nemo ex. Molestiae quasi unde, amet assumenda est illum!</li>
    </ul>



</body>
</html>