视觉格式化模型
- 这周我们学习视觉格式化模型，也就是前端页面经常用的盒模和浮动(浮动现在很少用来)。
1、视口
- 视口viewport：可视化窗口，指浏览器的可视区域
- 视口的尺寸仅受到浏览器可视窗口大小的影响。
2、包含块
- 任何一个元素一定有包含块。
- 该标签父元素的内容盒
- html的包含默认为是浏览器自动生成的区域
3、定位体系：任何一个元素，必须属于以下三个体系
- 常规流(normal flow)
- 浮动(float):基本不在用，有很多问题
- 绝对定位(absolute positioned)
4、定位体系的判断
- position的值：absolute、flexd、static（没写默认为这个）
- float的值：left
- 常规流
5、尺寸单位
- px：像素单位
- em(相对于当前元素的字体大小，没有这找父元素、父元素没有默认为16px)(多用于行高和缩进，因为可以随着字体的大小变化)
- %(相对于包含块的尺寸计算，border属性不能用)
- auto(根据定位体系自动设置大小)。(宽度自动和块盒有关，高度自动盒内容有关)
6、常规流（核心：块盒，行盒）
- 普通流、文档流、普通文档流
- 最常见的定位体系，所有元素默认状态下都是常规流定位。
- 常规流盒子水平方向上的尺寸，必须等于包含块的宽度。
7、盒子位置
- 垂直方向：水平方向上的外边距不会合并
- 外边距相邻：两个外边距之间没有border、padding、content
- 合并：均为正数取最大，均为负数取最小，一正一负则相加
8、盒子的相对位置
- 指相对于盒子在原本定位体系下的位置。
- position有四个值：
- static(默认定位)
和弹出广告，脱离文 * relative：相对定位：相对于盒子在原本定位体系下的位置(可以用top、bottom、left、right改变位置) - absolute：绝对定位：多用于网络中动画档流，相对于离他最近的一个已经定位的父元素(即父元素的position有除默认以外的值)来设置(可以用top、bottom、left、right改变位置)
- fixed：固定定位：脱离文档，永远相对于视口顶点定位，多用于弹出广告(可以用top、bottom、left、right改变位置)
- z-index:不能用在常规流，只能用于position的这三个值，改变标签的层级，显示顺序。
9、经常遇到的问题
- 描述页面制作的过程是怎样的？
- 把页面分成几个区域
- 把各个区域页面分为各种盒子
- 完成各个盒子的所有元素
- 给各个区域各个盒子和所有元素添加css样式
- 用相对位置进行微调
- 描述盒子的分类和盒子的组成。
- display:none：隐藏盒子，不生成盒子
- display:inline：行盒,不换行的，行盒不能设置宽高
- display:block：块盒,换行
- display:flex：弹性盒子
- 什么是常规流？在常规流中auto值的特性。
- 也叫普通流、文档流、普通文档流，最常见的定位体系，所有元素默认状态下都是常规流定位。
- auto：根据定位体系自动设置大小，宽度自动，块盒有关、高度自动，和盒内容有关
- position的取值有哪些？分别描述它们的特点。
- static(默认定位)
- relative：相对定位：相对于盒子在原本定位体系下的位置(可以用top、bottom、left、right改变位置)
- absolute：绝对定位：多用于网络中动画和弹出广告，脱离文档流，相对于离他最近的一个已经定位的父元素(即父元素的position有除默认以外的值)来设置(可以用top、bottom、left、right改变位置)
- fixed：固定定位：脱离文档，永远相对于视口顶点定位，多用于弹出广告(可以用top、bottom、left、right改变位置)
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.06 隐藏盒子</title>
<style>
div{
width: 100px;
height: 100px;
}
.d1{
border: 1px solid red;
visibility: hidden;
/* 隐藏盒子，保留位置 */
}
.d2{
border: 1px solid yellow;
display: none;
/* 隐藏盒子，不保留位置 */
}
.d3{
border: 1px solid blue;
}
.d4{
/* 默认情况下设置盒子大小默认为内容盒子大小 */
/* 以下为用边框大小来设置盒子大小 */
border: 10px solid rebeccapurple;
width: 160px;
height: 160px;
margin: 30px;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位体系</title>
<style>
.d1{
width: 100px;
height: 100px;
background-color: salmon;
/* 块居中 */
margin: auto;
}
.d11{
width: 50px;
height: 50px;
background-color: turquoise;
margin: auto;
}
.d2{
width: 50px;
height: 50px;
background-color: springgreen;
}
.d3{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="d1">1231
<div class="d11">43423</div>
</div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
div{
width: 400px;
height: 400px;
}
.left{
background-color: yellowgreen;
float: left;
}
.right{
background-color: aqua;
float: right;
}
p{
/* 清除浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<p>文本1</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
div{
width: 300px;
height: 300px;
}
.d1{
background-color: red;
}
.d2{
background-color: green;
position: relative;
left: 300px;
bottom: 300px;
}
.d3{
background-color: blue;
position: relative;
left: 600px;
bottom: 600px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
