JavaWEB笔记05 CSS常用操作（4）

JavaWEB笔记05 CSS常用操作（4）

一.CSS流式布局：

1.像素确定的布局及流式布局：

• 像素确定的布局： 浮动时存在的缺点有屏幕适配性差，使用margin在不同屏幕上的适配性差
• 流式布局： 为了更好地适配屏幕，不将像素卡死，布局时使用百分比代替像素，即根据屏幕伸缩自动进行布局居中等

2.流式布局方法：

• max-width可以设置最大宽度，min-width可以设置最小宽度，二者都是在屏幕缩放时进行限制的，即窗口页面的显示再大再小的屏幕不能超过这个限制
• nth-child(1) 会单独选中一系列并列标签中的第一个标签，使用nth-child()有助于快捷操作系列标签的布局
• 在div、li这些块标签中需要插入图片就使用img=src"路径"，其中注意img是一个标签，针对img标签在布局中需要注意的有：
• img标签的居中需要使用行内居中结合外部的居中，行内块标签居中（行内居中）：vertical-align:middle进行垂直放向居中
• 实际上流式布局是结合max-width和min-width进行屏幕百分比布局的一种方法，主要在块内使用之前的line-height结合text-align居中，在行内块标签之中使用垂直居中

二.Emmet插件及其语法：

1.Emmet插件介绍：

Emmet插件以前被称作为Zen Coding，是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。目前大多数web编译器中都含有Emmet插件，因此无需安装，若编译器没有此插件，则应安装。

2.实用语法：

• 空白页面生成html模板：!html
• 生成10个div：div*10按Tab键补全
• ul中生成10个il：ul>li*10按Tab键补全（>表示子元素）
• 生成div且id为d1：div#d1
• 生成div且class为mydiv：div.mydiv
• 多级父子标签嵌套：div>div*10>ul>li*2
• 并列关系标签的生成div下面并列ul：div+ul
• 生成div上级相邻ul：div^ul
• 分组生成div中有header中有其他以及font和header并列：div>( header >...)+font
• 对于标签中起名class但是class不一样需要自增：li.item$*5唯一id自增：li#item$*5
• 上面的自增中主要起作用的是$（一位递增），$$$（三位自增001开始）
• 对于div中加内容：div{标签之间的内容}
• 生成h1标签以及对应的属性：h1[align=center]

三.flex弹性盒子布局：

1.flex弹性盒子布局介绍：

flex弹性盒子布局是CSS布局中的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性，对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局，同样flex弹性盒子布局的好处也在于可以随着窗口的伸缩而伸缩

2.flex弹性盒子布局的最基本实现方式：

在CSS对应标签的属性设置中采用：display: flex 就进行弹性布局的设置，需要在此基础之上添加对应的属性进行设计

3.flex弹性盒子布局方法：

此篇将介绍flex布局中较为常用的布局方法，针对多种多样的布局，请阅读官方文档学习

• 弹性布局的水平方向的对齐：justify-content: center;
• 左对齐flex-start; 右对齐flex-end;
• 反转一行块标签中的文本，即子层排列方式：flex-direction: row-reverse；（横向反转）
• 横向排列：row，竖直排列：column，竖直反转排列：column-reverse
• 在子层中均匀分布：margin: auto； 每个方向上都均分
  举例：margin: 10px auto 距离上面10px，左右居中
• 平分空白距离：space-between，两边会留距离的分散/环绕space-around
• 垂直居中：align-items: center;
• 所有子层抵着底边：flex-end 抵着：flex-start（都是对于align-items的属性调整）
• 把子层高度拉伸并吃满父层：align-items: strech
• 吃满的情况是默认挤压的，变成换行的形式：使用flex-wrap: wrap
• 自动换行：当所有子层的宽度或高度，超过了父层，是否要换行：nowrap不换行 wrap换行
• 调整盒子顺序：使用order进行调整
• 设置子层宽度所占的比例：flex-grow: 数值