2021-03-28

3.22 视觉化格式模型

一.视觉化格式模型（visua formatting del ）

CSS的一种机制，它规定了页面中多个盒子如何布局。

二. 视口（vieport）

可视窗口 通常值浏览器能看到的区域

三. 包含块

每个元素都有一个包含块，是指元素在页面中摆放的区域。

元素摆放区域：

1.通常情况下，元素的包含块是他父元素的内容盒。

2.根元素的包含块是初始化包含块

html的包含块是初始化包含块（initial containing block）

注:当标签定位体系发生变化时，包含块就不一定时父元素的内容盒了。

什么是定位体系 （默认情况下元素）

视觉化格式模型规定，定位体系一共有三种

1.常规流（normal）

2.浮动（folat）

3.绝对定位（absolute positioned ）

任何一个元素，必须属于其中一种定位体系.

不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。

定位体系判定

（步骤 第一步判断完成 就不继续判断）

• postion 默认值：static

  绝对定位

1.判定元素的postion属性值是不是以下取值：

absolute（绝对定位） flxed（固定位置）

如果是其中一个取值，则当前元素就属于"绝对定位"

• float 默认值（none）

  浮动

2.判定元素的float属性值是不是以下取值：

left（左浮动） right（右浮动）

如果是其中一个取值，则当前元素就属于"浮动"

​ 常规流

3. 又叫普通流、文档流、普通文档流

盒模型中的尺寸-%

尺寸是包含块尺寸的百分比

1. margin、padding、width的百分比：是包含块宽度的百分比

   height的百分比（很少使用）

2. auto 按照不同定位体系规则计算

   (水平方向)

   常规流盒子水平向上方向上的尺寸，必须等于包含块的宽度，（常规流块盒水平居中原因）

   如果不行，则强行将margin-right设置为auto

   （垂直方向）

   Margin为auto：0px

   height为auto：适应内容的高度

3. 盒子位置

   盒子在包含块的垂直方向上依次摆放

   （1）依次摆放：按照html书写顺序从上到下摆放）

​ （2）

垂直方向上，若两个外边距相邻，则进行合并（折叠）

触发外边距合并的条件：两个外边距之间没有padding、border

外边距合并规则：

（1）垂直方向：水平方向上的外边距不会合并

（）外边距相邻：两个外边距之间没有

浮动

当元素的float属性取left或者right时，元素属于浮动定位。

不可被继承

默认值none

取值：none不浮动 left左浮动 right右浮动

初衷：为了实现文字环绕

清除浮动

clear属性名 both left right

属性	常规流	浮动
margin-left：auto	尽量撑满包含块	0px
margin-right：auto	尽量撑满包含块	0px
margin-top：auto	0px	0px
margin-bottom：auto	0px	0px
width:auto	尽量撑满包含块	适应内容宽度
height：auto	适应内容宽度	适应内容高度

盒子位置

3.24 弹性布局（2）

一 交叉轴对齐方式 align-itmes: ;

align-items: center; 交叉轴居中对齐

align-items: flex-end; 交叉轴底部对齐

align-items: flex-start; 交叉轴顶端对齐

二 基线对齐align-items: baseline;

三 多根轴线的对齐方式 align-content: ;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

四 order设置项目顺序 order: ;

默认值0 可以取正负值

值越大越靠后 值越小越靠前

五 项目放大 flex-grow: ; 里面的值代表剩余空间的份数

前提：必须有剩余空间

如果项目中的属性只出现一次flex-grow，不管取值多少所有

剩余空间都给当前标签。

2.如果如果项目中的属性出现多次flex-grow，为剩余空间除以

flex-grow的份数。再给对应的值。

查flex-grow:1 ;和 flex:1;的值 的区别

六 项目缩小 flex-shrink: ;前提 项目之和大于容器之和

1.所有项目都会缩小一份的比例

比如 五个项目需要缩小200 那每个项目都要缩小40

flex-shrink: ;

七 设置项目交叉轴的对齐方式 align-self:flex-end;

align-self:flex-end;

3.25 背景

一 背景平铺 默认值background: repeat;

background-repeat: no-repeat ;

二 设置背景位置 可以给值 left right top bottom center

取值 X轴Y轴

第一个值是X轴方向的位置或者偏移量

第一个值是Y轴方向的位置或者偏移量

偏移量取值 :10px -10px;

background-position:10px -10px;

background-position: left bottom; 图片左下显示

background-position: right top ; 图片右上显示

三 引入背景图片

1. background-image: url("");

引入多张背景图片（url(""),url("") 用 逗号隔开）

background-image: url("") , url("");

2. background-image : ；渐变色

   取值border-image: linear-gradient(to left,red, blue);

   to left或者right指渐变方向 从反方向开始

   3. background-image:repeating-linear-gradient(to bottom,red 0 50px, blue 50px 100px, rgb(52, 52, 119) 100px 150px);

四 设置背景图片的大小 background-size: ;

1.若不设置background-size: ; 图片为原始图片大小（原始尺寸）

2.取值

（1）若取一个值background-size: 100px; 代表的是图片宽100px，高度不变。

（2）若取两个值 background-size: 100px 100px；代表设置图片大小

五 背景图片固定 background-attachment : fixed ;

六 背景图片的颜色（取值）

十六进制： #，六位数字或者 字母加数字

rgb（1，2，3）每个参数的取值范围（0–255）

rgba（1，2，3，4）前三个参数的取值范围（0–255）第四个参数取值为（0-1）

第四个参数代表的透明度

=====================================================================================

表格

画圆

border-radius：50%

cellspacing表示 td之间的距离

cellpadding 表示td之间的内边距

3.26表单

适用场景

1. 登陆 注册页面 get 提交信息到地址栏 （默认值）
   post 隐藏提交信息
2. 搜索功能 form 表单

以上情况都需要用户的输入或选择 gender 性别

父元素:form 姓名框:

​ 密码框

属性 单元框

action是提交地址 提交按钮框

​ 重置按钮

​ 普通按钮

​ html5新增按钮 button

单行文本输入框 --> 多选框（复选框 <inputtype=“checkbox”>

method 提交方式 取值: get / post 颜色

​ 上传文件

​ 取值范围

post 隐藏提交信息 数值输入框

​ 出生年月日

​ 限制输入数量

密码 文本框提示 placeholder (1进行文本框输入时， 框内提示会消失）

​ 下拉列表

​ 多行文本框 textarea name=""

​

单选框
性别: 男
女

多选框（复选框）

type取值为radio实现单选框的样式

name值相同，才实现单选框的功能

!-- 提交按钮 -->

重置按钮

input标签的required属性代表必须填

如果提交时添加required属性的input标签没有填写内容，则浏览器会提示"请填写此字段"

当input标签添加了checked属性，表示选中当前input标签，仅适用于单选和多选框