2021-03-28

最新推荐文章于 2023-02-06 10:40:14 发布

梅蝈蝈

最新推荐文章于 2023-02-06 10:40:14 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/weixin_44822786/article/details/115289091

版权

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（右浮动）

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

常规流

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

盒模型中的尺寸-%

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

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

height的百分比（很少使用）
auto 按照不同定位体系规则计算

(水平方向)

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

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

（垂直方向）

Margin为auto：0px

height为auto：适应内容的高度
盒子位置

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

（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 ; 图片右上显示

三引入背景图片

background-image: url("");

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

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

background-image : ；渐变色

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

to left或者right指渐变方向从反方向开始
1. background-image:repeating-linear-gradient(to bottom,red 0 50px, blue 50px 100px, rgb(52, 52, 119) 100px 150px);