web前端4

笔记11.21

一、 float的用法

1、float语法：

float : none | left |right

2、float参数值介绍：

float:none —— 对象不浮动

float:left —— 对象浮在左边

float:right —— 对象浮在右边

3、float值使用说明：

float属性的值指出了对象是否及如何浮动。

当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

4、css float结构分析图

float属性分析图

5、float设置小示例：

.exp-a{ float: left }

.exp-b{ float: right }

6. inline-start：关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。

7. inline-end：关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

8. none：不浮动

9. inherit：继承父元素的浮动属性

10.清除浮动：clear:both

二、 margin 外边距

1. margin-top--设置元素上边缘的边距

例：margin-top:100px;

2. margin-right--设置元素右边缘的边距

例：margin-right:50px;

3. margin-bottom--设置元素下边缘的边距

例：margin-bottom:100px;

4. margin-left--设置元素左边缘的边距

例;margin-left:50px;

5. margin--同时设置上下左右四个方向的边距

例如：margin: 25px 50px 75px 100px代表上边距为25px，右边距为50px，下边距为75px，左边距为100px

三、 padding内边距(填充)

注释：padding:内边距是指边框与内容之间的距离。

1. padding-top:上内边距

2. padding-right:右内边距

3. padding-bottom:下内边距

4. padding-left:左内边距

⚠️注意‼️后面跟几个数值表示的意思是不一样的；

a) padding: 3px;上下左右都是3像素

b) padding: 3px 5px; 表示 上下3像素 左右 5像素

c) padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素

d) padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

补充：

auto表示自适应，由浏览器去自动计算auto值，auto在不同的环境下表示不同的意思

文字水平居中：ext-align：enter

11.23

一、 display（显示）

1. display：block;（转换为块元素）

2. display：inline;（转换为行内元素）

3. display：inline-block;（转换为行内块元素）

4. display：none;（元素不会被显示）

二、 弹性盒子模型（flex布局）

1. flex-direction属性：决定主轴的方向

a) row (默认值) --水平方向，起点在左端

b) row-reverse 轴为水平方向，起点在右端

c) column 轴为垂直方向，起点在上沿

d) column-reverse 轴为垂直方向，起点在下沿

2. flex-wrap属性

a) nowrap—默认值，不换行

b) wrap—换行

三、 justify-content属性
1. flex-start（默认值）：弹性项目向行头紧挨着填充，即在主轴的左边位置。
2. flex-end：弹性项目向行尾紧挨着填充，即在主轴的右边位置。
3. center：弹性项目居中紧挨着填充，即在主轴的中心位置。
4. space-between：弹性项目平均分布在该行上，如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
5. space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔。

四、 align-items属性

五、align-content属性

六、 grid布局

1、基本概念：

a) 容器（container）——有容器属性

b) 项目（items）——有项目属性

c) 行（row)

d) 列（column）

e) 间距（gap) ——单元格之间的距离

f) 区域（area）—— 自己划分每个单元格占据的区域

g) 内容（content)

2、容器属性

a. grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比

b . grid-template-rows:设置每一行的宽度，可以是具体值，也可以是百分比

c. fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段）

d. grid-column-gap表示行之间的距离

e . grid-row-gap表示列间的距离

f .grid-gap(前两个的缩写）

row-gap: 40px;column-gap:20px;可缩写成 gap: 40px 20px;第一个数值表示row之间的距离，第二个数值表示column之间距离，中间用空格隔开

当row-gap和column-gap值相同时，例如都为20px时，可写成gap:20px；