1、引导
页面的制作过程
-
设计师制作设计图
-
前端工程师制作页面
- 划分区域（最重要，最复杂）
- 填充区域
如何划分区域
- 使用不同的、合适的元素来表示不同的区域划分区域
- 设置区域的尺寸、位置、背景等样式
划分区域中的CSS
-
每个元素都会在页面中生成一个矩形区域，CSS 将这个矩形区域称为盒子（box）
-
盒子的相关知识点：
- 盒模型 单个盒子的组成
- 视觉格式化模型 多个盒子之间的排列、相互作用、影响
- 布局 实际应用
2、盒模型概述
盒模型是 CSS 基石之一，它规定一个元素在页面上如何显示，在某种程度上规定了元素之间如何相互作用的
-
盒子的分类
- 一个元素产生什么样的盒子与它的 display 属性有关
-
盒子的组成
- 由 margin 、 padding 、 border 、和 content 组成
盒子的分类-元素是如何显示的
块级元素
- 占据所有可用宽度，以换行开始
- 通常用与较大的内容快，比如标题或结构化元素
行内元素
- 只占据内容所需的宽度，在同一行内一个接一个摆放
- 通常用与较小的内容快，如被选设置为粗体或者斜体的一些词
不同的元素产生的盒子类型也就不同，产生什么类型的盒子取决于它的 display 属性
每个元素都由一个默认的 display 属性值，不过也可以被重写
属性：display
是否能继承：否
默认值：inli'ne
属性值
常用：
display:none 不生成盒子
display:inline 行盒
display:block 块盒
display:inline-block 行内块盒
盒子的组成
- margin 外边距（与其他盒子之间的距离）
- border 边框
- padding 内边距（边框与内容之间的距离）
- content 内容（内容的宽度和高度）
边框盒：
- 由border 、padding 、content 组成
- 浏览器调试时，页面中显示的元素尺寸指的是边框盒的尺寸
- 元素的背景，默认覆盖边框盒
填充盒：
- 由padding、content组成，
- 严格意义上，overflow指代的溢出，是指溢出填充盒
内容盒：
- 由content组成
- 默认情况下，width和height属性，是指内容盒的宽度和高度
- width和height的设置范围，可以通过box-sizing属性修改
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
overflow（溢出）
给元素添加 overflow 属性
内容溢出盒子取值：
-
overflw:visible
默认值。内容不会被修剪，会呈现在元素框之外。
-
overflow:hidden
内容会被修剪，并且其余内容是不可见的。(超出 padding 部分会被隐藏)
-
overflow:scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。（隐藏溢出的内容并出现滚动条，但内容没有溢出也会出现滚动条）
-
overflow: auto;
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。（）
例：
.box2 {
width: 100px;
height: 100px;
padding: 20px;
background-color: aqua;
/* 溢出内容可见（默认情况） */
overflow: visible;
/* 溢出内容隐藏 */
overflow: hidden;（内容超出padding后会被隐藏）
/* 溢出内容滚动 */
overflow: scroll;（隐藏溢出的内容并出现滚动条，但内容没有溢出也会出现滚动条）
overflow: auto; （隐藏溢出的内容并出现滚动条，但内容没有溢出不会出现滚动条）
}
例：内容溢出部分隐藏，但鼠标移入时会显示，可通过下列方式设置
<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;
}
/* 鼠标移上后被隐藏的内容显示 */
.box2:hover{
height: 600px;
}
内容溢出是因为盒子高度不够，所以可以通过:hover选择器设置高度来显示。
补充：
子盒子
含义：一个元素生成的盒子由4个区域组成，不同的区域组合起来可以形成元素子盒子
- border-box 边框盒
- padding-box 填充盒
- content-box 内容盒
content-box 内容盒
表示一个完整盒子仅由 content 组成
-
默认情况下，width、height属性是指内容盒的宽和高
-
可通过 box-sizing 属性修改
- contnet-box 默认值 表示内容盒子的宽高
- border-box 边框盒的宽高
盒子尺寸的计算取值：
- box-sizing: content-box;（默认情况 内容盒）
- box-sizing: border-box;（边框盒 自动计算 content 的width和height）
例：
.box3{
width: 200px;
height: 200px;
border: solid;
border-width: 10px;
border-color: pink;
padding: 10px;
background-color: rgb(62, 219, 172);
overflow: scroll;
margin-top: 20px;
/* 默认情况 内容盒 */
box-sizing: content-box;
/* 边框盒 自动计算 content 的width和height */
box-sizing: border-box;
}
border-box 边框盒
表示一个完整盒子由 border + padding + content 组成
- 使浏览器调试时，页面中显示的元素尺寸就是指边框盒的尺寸、
- 元素的背景默认覆盖边框盒，可通过 background-clip 修改
padding-box 填充盒
表示一个完整盒子由 padding + content 组成
- 严格意义上 overflow 指代的溢出就是指溢出填充盒
outline 外边框
- 出现的位置在 boder 之外
- 外边框的尺寸不会计入到盒子的尺寸
清除内外边距
根据元素的不同，浏览器会在元素上应用默认的外边距和内边距，从而有助于阅读性
不同的浏览器和不同的元素默认内外边距可能是不同的，可以使用 reset 技术（重置技术）将所有默认值归零
3、可视化模型
基本概念：
视觉格式化模型（visual formatting model）是一种机制，规定了页面中多个盒子的排列、相互影响、最终尺寸及位置（HTML 中的每个元素都会在页面中生成盒子，这些盒子如何排列、如何相互影响，由视觉格式化模型定义）
核心理念
在视觉格式化模型中，文档树中的每个元素都会生成一个或多个盒子，盒子最终的尺寸和位置主要受这些因素影响：
-
盒子类型与盒子本身的尺寸
- display 属性决定了盒子的类型，（目前只讲解块盒）盒模型中4个部分的尺寸，即盒子本身的尺寸
- 盒模型中涉及到的 width、height、padding、border 等在视觉格式化模型中仅作为参考，并不一定是盒子最终的位置和尺寸
-
定位体系
- 每个元素都会属于某种定位体系，不同的定位体系会对盒子上的尺寸和位置造成影响
视口
- 浏览器可视窗口（viewport）,通常指浏览器的可视区域
- 视口大小仅受浏览器可视窗口大小的影响，与内容无关
- 当网页内容的尺寸超出视口尺寸，浏览器会自动出现滚动条
包含块
- 每个元素都有一个包含块，它是一个区域，即元素在页面中摆放的区域
- 通常情况下元素的包含块是它的父元素的内容盒 content-box
4、定位体系概述
视觉格式化模型规定了三种定位体系：常规流、浮动、绝对定位
任何一种元素都必须属于某一种定位体系，不同定位体系中，元素在包含块的尺寸和位置会有一些差异。
4.1 常规流（normal flow）
常规流，又叫做普通流、文档流、普通文档流、流式布局
常规流是最常见的定位体系，所有元素默认状态下都是常规流定位
盒子位置
盒子在包含块的垂直方向上依次摆放（按照HTML书写顺序依次摆放）
盒子在包含块中占据尺寸是整个盒子的尺寸
垂直方向上若两个外边距相邻，则折叠
- 垂直放向：水平方向上不会重叠
- 外边距相邻：两个外边距之间没有 border、padding、和content
- 合并：均为整数取最大，均为负数取最小，一正一负则相加
4.2 浮动（float）
当元素的 float 属性值为 left 或 right 时元素为浮动元素
float:none， 不浮动，不是浮动定位、
float:left 左浮动，浮动定位
float:right 右浮动，浮动定位
浮动盒子位置
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后在向左或向右移动（放不下则换行）
当常规流遇上浮动流
常规流盒子和浮动盒子混合摆放
- 浮动盒子在摆放时要避开常规流盒子
- 常规流盒子在摆放时无视浮动盒子
- 常规流盒子的自动高度计算时，无视浮动盒子（高度坍塌，常规流盒子的高度无视浮动盒子）
清除浮动（clear）
-
对最后一个子元素使用 clear:both，可防止父元素高度坍塌
-
clear取值：
- none（不清除浮动）
- right（清除右浮动，元素在右浮动的盒子下方摆放）
- left（清除左浮动，元素在左浮动的盒子下方摆放）
- both（清除左、右浮动，元素在浮动的盒子的下方摆放）
父级:after{
content:"";
display:block;
clear:both;
}
4.3 定位
任何一个元素都必须属于其中某一种定位体系。不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异
总体上若设置了元素的 position 属性，则为绝对定位
position:static 默认值，静态定位
position:relative 相对定位
相对定位
相对于盒子原来的位置偏移
原本所占空间不变，没有脱离文档流
一般会用来做决定定位的父元素
position:absolute 绝对定位
绝对定位 相对于设置了定位属性（除了 static ）的父元素偏移
如果没有就相对于 html 元素偏移
脱离文档流，不占据空间
-
当浮动元素被设置为绝对定位
- 元素的 float 属性会被强制改为 none （float 属性失效）
-
绝对定位元素对其他元素的影响
- 绝对定位元素对其他元素不会造成任何影响
-
绝对定位元素的位置
- 可通过 top、right、bottom、left 来调整
子绝父相：子元素绝对定位，父元素相对位置，父元素位置发生变化，子元素跟着变化
使用 z-index 改变堆叠顺序，数值越大，堆叠在越上方。
例：
<div class="o1">
<div class="o2"></div>
<div class="o3"></div>
<div class="o4"></div>
</div>
.o1{
width: 400px;
height: 400px;
background-color: cornflowerblue;
position: relative;
top: 20px;
left: 30px;
}
.o2{
width: 90px;
height: 90px;
background-color: cyan;
position: absolute;
top: 50px;
left: 50px;
z-index: 3;
}
.o3{
width: 90px;
height: 90px;
background-color: darkmagenta;
position: absolute;
top: 60px;
left: 60px;
z-index: 2;
}
.o4{
width: 90px;
height: 90px;
background-color: rgb(65, 12, 211);
position: absolute;
top: 70px;
left: 70px;
z-index: 1;
}
通过定位还可设置如下效果：
图片一部分被遮挡，鼠标移上去被遮挡部分会显现，被遮挡部分会由上至下消失
<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;
}
position:fixed 固定定位
相对于浏览器窗口的固定位置，不会随着用户的滚动变化
position:sticky 粘性定位
依赖于用户的滚动，在 position:relative; 与 position:fixed; 之间切换
指定 top、left、right、bottom 四个阀值其中之一，粘性定位才可生效
