DongHao's 个人在线文档库

盒子模型

盒子模型和弹性和模型是不一样的，在页面中布局的排列都是一个盒子里面套另外一些盒子，内部不同盒子间就有间距，内边框和外边框等等，盒子的边距从外到内依次是margin（外边距）、border（边框）和padding（内边距）

外边距属性

属性	描述
`margin`	用于在任何定义的边框之外，为元素周围创建空间，可用于设置元素每侧（上、右、下和左）的外边距，若只设置两个值，前面的值表示上下，后面的值表示左右，若设置一个值，表示四个方向都进行设置，也可以使用`margin-top`等的方式对某一边的外边距进行控制

所有外边距属性都可以设置以下值：

auto - 该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配，可以设置元素水平居中，下述的例子中div元素占据article元素的指定宽度，其他剩余空间左右两边平均分配，实现了一个居中的效果
css
```
// 设置元素水平居中
article {
    border: solid 2px #ddd;
    width: 800px;
}

div {
    border: solid 3px red;
    width: 400px;
    margin: 0 auto;
}
```
length - 以 px、pt、cm 等单位指定外边距
边距的值不单单只有正值，也可以有负值，如果为负值时，其容器就会溢出其父容器
css
```
// 设置元素溢出
article {
    border: solid 2px #ddd;
    width: 300px;
    padding: 50px 0;
}

div {
    border: solid 3px red;
    margin-left: -50px;
    margin-right: -50px;
}
```
div元素相对于父元素article元素左右各溢出了50px，div元素的长度被拉长了
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

外边距合并指：当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

html

<body>
    <h2>jlc</h2>
    <h2>JLC</h2>
</body>

<style>
    h2 {
        border: solid 1px red;
        margin-bottom: 30px;
        margin-top: 20px;
    }
</style>

两个h2标签之间的边距不会进行叠加，只会进行合并，合并后的边距为margin-bottom和margin-top之间的最大者，上述例子也就是30px

边框属性

属性	描述
`border-width`	指定四个边框的宽度，属性可以设置一到四个值，单位一般为`px`（用于上边框、右边框、下边框和左边框）,也可以使用以下三个预定义值之一：`thin`、`medium` 或 `thick`，也可以直接写成`border-top-width`进行对一个方向的边框宽度的定义
`border-style`	指定要显示的边框类型，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）形成混合边框，也可以直接写成`border-top-style`进行对一个方向的样式定义
`border-color`	设置四个边框的颜色，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），也可以直接写成`border-top-color`进行对一个方向颜色样式的定义
`border-radius`	设置圆角边框，`border-radius: 5px;`对于圆角的设置，我们也可以使用`%`进行设置，如果设置为`border-radius: 50%`，那么这个盒子模型的边框就变成了一个正圆

border-style边框类型有以下枚举值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框（常用）
double - 定义双边框（常用）
groove - 定义 3D 坡口边框（凹槽边框），效果取决于 border-color 值
ridge - 定义 3D 脊线边框（垄状边框），效果取决于 border-color 值
inset - 定义3D inset边框，效果取决于 border-color 值
outset - 定义 3D outset 边框，效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

css

/*使用border的简写属性，依次的顺序为上表自上而下的顺序，border-style的值是必须要有的*/
p {
  border: 5px solid red;  
  /*也可以只指定单边的边框属性：border-left: 6px solid red;*/
}

内边距属性

属性	描述
`padding`	在任何定义的边界内的元素内容周围生成空间，可以为元素的每一侧（上、右、下和左侧）设置内边距，其值的设置方式与`margin`类似

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

尺寸大小

属性	描述
`height`	设置元素的高度
`width`	设置元素的宽度

height 和 width 属性可设置如下值：

auto - 默认，浏览器计算高度和宽度
length - 以 px、cm等定义高度/宽度
% - 以包含块的百分比定义高度/宽度
initial - 将高度/宽度设置为默认值
inherit - 从其父值继承高度/宽度

height 和 width 属性不包括内边距、边框或外边距，设置的是除去三者外的高度和宽度

内边距、边框和外边距都是可选的，默认值是零

对于设置了边框为2px的容器，我们设置长和宽都为100px，同时我们又设置了50px的内边距，那么，最后的边框区域大小为204px*204px，但是如果我们就是希望我们的盒子模型的大小就是固定的200px*200px（无论在怎么增加内边距和边框，其盒子模型的大小都不会发生改变），我们可以进行下面的设置：box-sizing: border-box; (设置盒子的固定大小就是盒子模型的宽度和高度)

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框

在默认的情况下：width + padding + border = 元素的实际宽度；height + padding + border = 元素的实际高度，元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）box-sizing属性可以很好的解决这个问题，如果在元素上设置了 box-sizing: border-box;那么元素的宽度和高度会包括内边距和边框

我们希望页面上的所有元素都能够以这种方式工作，可以统一的对其样式进行设置：

css

* {
  box-sizing: border-box;
}

处理常见的宽度和高度设置，我们还有最小最大尺寸的设置：（进行约束范围）

min-width和max-width

min-height和max-height

css

div {
    width: 300px;
    height: 300px;
    border: solid 3px #ccc;
    padding: 30px;
}
div img {
    max-width: 90%  // 最大宽度设置为父级元素的宽度的90%
    min-width:50%   // 最小宽度设置为父级元素的宽度的50%
}
//免裁图调整图片尺寸适应盒子宽度

当我们使用min-时，如果内容的宽度/高度值小于我们设置的最小宽度/高度，我们就取我们设置的最小宽度/高度值；max-同理，如果放进来的图片的宽度为800px，我们设置的最大宽度为600px，那么最后放进来的图片宽度为600px

轮廓属性

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素，轮廓是在元素边框之外绘制的，并且可能与其他内容重叠，轮廓线和边框的区别是：轮廓线不会占用空间，但是边框是会占用空间的，所有轮廓线可能会与其他的元素重叠

属性	描述
`outline-width`	设置轮廓宽度
`outline-style`	设置轮廓样式
`outline-color`	设置轮廓颜色，可以通过`outline-color: invert`方式设置翻转颜色，确保无论颜色背景如何，轮廓都是可见的
`outline-offset`	设置轮廓偏移，在元素的轮廓与边框之间添加空间，偏移量以`px`为单位

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓
dashed - 定义虚线的轮廓
solid - 定义实线的轮廓
double - 定义双线的轮廓
groove - 定义 3D 凹槽轮廓
ridge - 定义 3D 凸槽轮廓
inset - 定义 3D 凹边轮廓
outset - 定义 3D 凸边轮廓
none - 定义无轮廓
hidden - 定义隐藏的轮廓

css

/*Outline简写属性的使用，按照上表自上而下的属性输入属性值，outline-style是必须的*/
outline: 5px solid yellow;

对于表单输入框轮廓线的去除（input输入框是默认自带系统设置的轮廓线的，我们可以设置轮廓线为none对其轮廓线进行去除）：

css

input {
    outline: none;
}

显示/隐藏、控制模式

我们可以通过display对元素设置显示和隐藏，默认情况下元素是显示的，即display: block;，如果我们对元素设置了display: none;那么这个元素就被隐藏了

如果我们使用display: none;的方式进行设置元素的隐藏，其元素原本的空间会丢失，后面布局的元素会占据隐藏元素的位置，为了避免这个情况，我们可以使用：visibility: hidden;设置元素的隐藏，可以使隐藏元素的空间位置保留（类似于将元素变成透明：opacity: 0;）

display不止可以控制元素的显示和隐藏，我们还可以改变元素显示的模式：

块元素是独占一行空间的，div、li等等都是常见的块级元素

设置元素为块级元素：display: block;

html

<body>
    <article>
        <div>
            <a href="">mysql</a>
            <a href="">css</a>
        </div>
    </article>
</body>

<style>
    div>a {
        display: block;
        text-decoration: none;
    }
</style>

链接元素是普通的文本元素，不会独占一行（一块）的空间，设置display: block;后，就将链接元素变成了块元素，每个块元素是独占一行空间的，所以两个链接元素就变成了垂直排列

设置元素为行级元素：display: inline-block;
html
```
<body>
    <article>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </article>
</body>

<style>
    ul>li {
        display: inline-block;
    }
</style>
```
对于<ul><li>元素，默认是块级元素，是垂直排列的，我们可以通过：display: inline-block;将其设置成行级元素，使每一项进行水平排列
display: inline-block;是将这个元素设置为行级块元素，行级块元素我们是可以对其设置宽和高的，可以进行块状元素的操作，
display: inline;设置方式也可以是元素进行水平布局，我们只是将其设置为普通的标签，不能进行块的操作

内容溢出

对于一个div标签，我们设置其大小（宽度和高度）和边框，再给div标签中设置文本内容，当文本内容过多的时候，其文本就会溢出，我们不希望内容把这个div元素撑开（希望这个盒子的大小是固定的），这样我们就要做溢出处理，内容溢出不单单只是包括文本，还包括其他的元素

css

div {
    border: solid 3px red;
    width: 300px;
    height: 100px;
    overflow: scroll;
}

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

overflow 属性可设置以下值：

visible - 默认：溢出没有被剪裁，内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容（不管内容是否溢出都出现滚动条，滚动条一直存在）
auto - 与 scroll 类似，但仅在必要时添加滚动条（内容装的下时不出现滚动条）

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘
overflow-y 指定如何处理内容的上/下边缘

css

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

填充可用空间

vw/vh也是一个单位，并且也是一个相对单位：

vw -> view width；vh -> view height

相对单位：表示把屏幕自动分成了100vw宽和100vh高

vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%

html

<body>
    <main>
        <div>jlc</div>
    </main>
</body>

<style>
    body {
        width: 100vw;
        height: 100vh;
        background: red;
    }
    
    main {
        width: 100vw;
        height: 100px;
        background: yellow;
    }
    
    div {
        background: blue;
        height: -webkit-fill-available;  // 设置高度自适应，高度自动撑满父组件
    }
</style>

行级元素改行级块元素自动撑满高度和宽度可用空间：

css

span {
    background: #ddd;
    display: incline-block;
    height: -webkit-fill-available;
    width:  -webkit-fill-available;
}

后期也可以使用栅格模型和弹性盒模型实现这种撑满（自适应）的效果

根据内容自适应尺寸

我们可以使用width: fit-content设置根据内容自适应尺寸

我们设置希望元素里面的内容多大，其块级元素的宽度就有多宽

html

<body>
    <main>
        <div>jlc</div>
    </main>
</body>

<style>
    body {
        width: 100vw;
        height: 100vh;
        background: red;
    }
    
    main {
        width: 100vw;
        height: 100px;
        background: yellow;
    }
    
    div {
        background: blue;
        width: fit-content;  // 设置内容尺寸自适应
        margin: auto;  // 设置元素居中
    }
</style>

根据内容自适应盒子的尺寸

设置盒子尺寸适应最小的内容宽度：width: min-content;
设置盒子尺寸适应最大的内容宽度：width: max-content;

再内容文本中，一个空格就相当于将左右两端的内容进行分割了，空格包裹的就是一个内容值，一个div中可以有多个内容宽度，不同的内容宽度有不同的长度

如果我们后续删除了div中的内容，其外面包裹的盒子标签的大小就会自动的改变

html

<body>
    <main>
        <div>这个是我的名字 jlc</div>
    </main>
</body>

<style>
    mian {
        width: min-content;
        background: red;
        margin: auto;   // 设置居中
    }
    
    div {
        background: yellow;
        padding: 10px;
        margin-bottom: 20px;
    }
</style>

盒子模型 ​

外边距属性 ​

边框属性 ​

内边距属性 ​

尺寸大小 ​

轮廓属性 ​

显示/隐藏、控制模式 ​

内容溢出 ​

填充可用空间 ​

根据内容自适应尺寸 ​

根据内容自适应盒子的尺寸 ​

盒子模型

外边距属性

边框属性

内边距属性

尺寸大小

轮廓属性

显示/隐藏、控制模式

内容溢出

填充可用空间

根据内容自适应尺寸

根据内容自适应盒子的尺寸