盒模型和视觉化格式模型

一、盒模型

1、组成：元素产生的盒子都是矩形盒型

（1）content：内容

块级元素可设置宽高

（2）padding：内边距 不可以为负数

padding: 10px 20px 30px 40px;

一个值控制四个方向；两个值分别控制：上下 左右；三个值分别控制：上

左右 下；四个值分别控制： 上 右 下 左（顺时针方向）。

还可设置方位值，如：padding-top: 10px; padding-right: 20px;

（3）border：边框

有颜色、粗细、样式三个属性值，其中颜色可以不写，默认是黑色；粗细可以不写，默认3px；样式必须写。

（4）margin：外边距 可以为负数

控制的方向与padding相同

让元素水平居中：

② content有宽度

②margin 自动auto

计算元素实际的宽=width+左右两边的padding+左右两边的border

计算元素实际的高=height+上下两边的padding+上下两边的border

2、分类

• 块级元素：通常用于较大的内容块，比如标题、结构化元素
• 行内元素：通常用于较小的内容块，比如被选设置为粗体、斜体的一些词

盒子的分类：一个元素产生什么样的盒子与它的display属性有关

div{
    /* 盒子直接没有了，通过检查器也找不到 */
    display: none;
    /* 盒子被隐藏，仍占位置，通过检查可以找到 */
    visibility: hidden;
}

盒子的组成：由content、padding、border、margin组成

• 边框盒：由border、padding、content组成，调试时，页面中显示的元素尺寸指的是边框盒的尺寸，背景默认覆盖边框盒，北京渲染从padding开始，且若是content内容溢出，也会占用padding
• 填充盒：由padding和content组成
• 内容盒：由content组成

3、溢出处理方式

给元素添加overflow属性

p{
    /* 溢出内容可见（默认情况） */
    overflow: visible;
    /* 溢出内容隐藏 */
    overflow: hidden;
    /* 溢出内容可滚动 */
    overflow: scroll;
}

内容溢出部分隐藏，但鼠标移入时会显示，可通过下列方式设置

<div class="box2">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam exercitationem sapiente unde accusantium soluta fugiat aspernatur nulla nostrum dignissimos, consequuntur repudiandae alias, labore velit laborum excepturi quis expedita at ad!</p>
    </div>

.box2{
    width: 100px;
    height: 100px;
    background-color: limegreen;
    overflow: hidden;
}
/* 鼠标移上后被隐藏的内容显示 */
.box1:hover{
    height: 600px;
}

内容溢出是因为盒子高度不够，所以可以通过:hover选择器设置高度来显示。

4、box-sizing

p{
    /* 设置为内容盒 默认情况 */
    box-sizing: content-box;
    /* 设置为边框盒，会自动计算content的width和height 适用于设置padding或者margin后盒子超出原本的范围*/
    box-sizing: border-box;
}

二、视觉格式化模型

三种定位体系：常规流、浮动、绝对定位

任何一种元素都必须属于某一种定位体系，不同定位体系中，元素在包含块的尺寸和位置会有一些差异。

（一）、常规流：又叫普通流、文档流、普通文档流、流式布局

元素在默认状态下都是常规流定位

盒子位置：①垂直方向上若两个外边距相邻，则折叠

②水平方向不会重叠

③相邻的条件是两个之间没有border、padding、content

④合并时，均为正数取最大，均为负数取最小，一整一负则相加

（二）、浮动：当元素float属性为left或者right时，元素为浮动元素

p{
    /* 默认不浮动 */
    float: none;
    /* 左浮动*/
    float: left;
    /* 右浮动*/
    float: right;
}

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下，则先向下，移动到放得下后再左右（若放不下，则换行）

1、当常规流和浮动盒子混合摆放

• 浮动盒子在摆放时会避开常规流盒子
• 常规流盒子在摆放时无视浮动盒子
• 常规流盒子自动计算高度时，无视浮动盒子。（也叫高度坍塌）

2、清除浮动

对于一个元素清除浮动可以让该元素设置clear属性（设置给常规流盒子）

p{
    clear: left;
    clear: right;
    clear: both;
}

对于最后一个子元素用clear: both;可防止父元素高度坍塌

父级::after{
content:'';
display:block;
clear:both;
}

一、定位

元素设置了position属性：

div{
    /* 静态定位 默认值 */
    position: static;
    /* 相对定位 */
    position: relative;
    /* 绝对定位 */
    position: absolute;
    /* 固定定位 */
    position: fixed;
    /* 粘性定位 */
    position: static;
}

（三）、定位

1、相对定位

相对盒子原来的位置偏移，原本所占空间不变，没有脱离文档流，一般用来做绝对定位的父元素。

2、绝对定位

• 当浮动元素被设置为绝对定位，元素的float属性会失效
• 相对于设置了定位属性（除static）的父元素偏移
• 如果没有就相对于html元素偏移
• 脱离了文档流，不再占据空间
• 子绝父相

子元素设置为绝对定位，父元素设置为相对定位，父元素位置发生变化，子元素跟着变化。

• 使用z-index可以改变堆叠顺序，数值越大，堆叠在越上方

  具体效果可看如下代码：

<div class="box">
        <a href="" class="nav1">导航1</a>
        <section></section>
        <a href="" class="nav2">导航2</a>
        <section></section>
        <a href="" class="nav3">导航3</a>
        <section></section>
        <a href="" class="nav4">导航4</a>
        <section></section>
        <a href="" class="nav5">导航5</a>
        <section></section>
    </div>

* {
    padding: 0;
    margin: 0;
}
​
.box {
    width: 550px;
    height: 500px;
    border: 1px solid;
    position: relative;
    left: 50px;
    top: 50px;
}
​
a {
    display: inline-block;
    width: 50px;
    height: 30px;
    background-color: gray;
    text-align: center;
    line-height: 30px;
    position: absolute;
}
​
section {
    width: 550px;
    height: 400px;
    position: absolute;
    top: 100px;
}
​
.nav1 {
    left: 50px;
}
​
.nav1+section {
    background-color: hotpink;
    z-index: 5;
}
​
​
.nav2 {
    left: 150px;
}
​
.nav2+section {
    background-color: rgb(255, 220, 105);
    z-index: 4;
}
​
.nav3 {
    left: 250px;
}
​
.nav3+section {
    background-color: rgb(105, 255, 105);
    z-index: 3;
}
​
.nav4 {
    left: 350px;
}
​
.nav4+section {
    background-color: rgb(105, 213, 255);
    z-index: 2;
}
​
.nav5 {
    left: 450px;
}
​
.nav5+section {
    background-color: rgb(255, 105, 230);
    z-index: 1;
}
​
a:hover+section {
    z-index: 6;
    transition: all linear 2s;
}
/* 拓展：transition: all linear 2s
表示图片的变化，属性值分别指变化的范围、变化的方式及变化的时间 */

通过定位还可设置如下效果：

图片一部分被遮挡，鼠标移上去被遮挡部分会显现，被遮挡部分会由上至下消失

<section>
        <img src="./img/imgB_l.jpg" alt="">
        <div></div>
    </section>

section {
    width: 300px;
    height: 400px;
    position: relative;
    /* 通过overflow: hidden;让下移出去的部分被隐藏 */
    overflow: hidden;
}
​
img {
    width: 300px;
    height: 400px;
}
​
div {
    width: 300px;
    height: 200px;
    background-color: rgba(219, 240, 128, 0.2);
    position: absolute;
    bottom: 0;
}
​
section:hover div {
    position: absolute;
    /* 通过设置bottom让图片下移 */
    bottom: -200px;
    /* transition 用来设置图片变化的样式*/
    transition: all linear 2s;
}

4、固定定位

相对于浏览器窗口的固定位置，不会随着用户的滚动变化，脱离文档流。

5、粘性定位

依赖于用户的滚动，在相对定位与固定定位之间切换，指定top、left、right、bottom四个阈值其中之一，粘性才会生效。