HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
2024-05-24 07:14:03
文章目录
- （1）Flex弹性盒子布局
- 一： 父容器上的属性
- 1、 display:flex 设置为弹性盒子（写在父容器上）
- 2、flex-direction值 设置子项的布局方向（写在父容器上）
- 3、Flex-wrap:值 设置子项单行还是换行显示（写在父容器上）
- 4、Flex-flow: 值1 值2 （写在父容器上）
- 5、justify-content:值 主轴方向上子项的对齐及分布方式 （写在父容器上）
- 6、align-items:值 子项们相对flex容器在侧轴上的对齐方式（写在父容器上）
- 7、align-content:值 子项们相对flex容器在主轴上的对齐方式（写在父容器上）（如果子项只有一行，无任何效果）
- 二：子项上的属性
- 1、order：值 子项排序位置
- 2、flex-grow:数 子项的扩展
- 3、flex-shrink:数值 子项收缩
- 4、flex: 数值 px值 是grow和shrink的复合
- 5、flex-basis:px值 分配剩余空间
- 6、align-self:值 单独一个子项的垂直对齐方式
- （2）grid网格布局
- 一：父容器上的属性
- 1 声明
- 2 布局设置
- 3 间距
- 4 单元格的内容相对于每个单元格的对齐方式
- 5 整个表格相对于容器的对齐方式
- 二：子项上的属性
- 1、位置
- 2.区域
- 3.对齐方式
- （3）移动端简介
- 1、网页移动端模拟器
- 2、Pc端和移动端代码是一套吗？？？
- 3、viewport视口
- （4）移动端流式布局（利用绝对单位）
- （5）移动端rem布局（利用比例单位）
- 怎么使用js动态的设置html的font-size的大小？？
- 怎么使用vw、vh单位动态的设置html的font-size的大小？？
- （6）响应式布局
- 媒体类型：
- 常见选项：
- 方式一： 响应式的标识方式
- 方式二：标签方式
- （7）Bootstrap框架
- 1.布局部分(Layout)
- 2.栅格系统(Grid)
- 1.Grid option 网格配置
- 2. Gutters 间距
- 3.Alignment 对齐方式
- 4.Responsive classes 响应式的class样式
- 5.Reordering 排序
- 6.Offsetting 位置间距
- 3.重置系统（Content）
- 4.组件系统（Companies）
- 5.工具方法(Utilities)
（1）Flex弹性盒子布局
一： 父容器上的属性
1、 display:flex 设置为弹性盒子（写在父容器上）
在使用容器添加模型为display:flex后，该容器会变成弹性盒子模型，
和以往的盒子布局有区别
（往容器里面添加东西排列顺序等布局方式发生改变）
<style>.box{width: 500px;height: 500px;border: 1px black solid;
display: flex;}.box div{width: 100px;height: 100px;background-color: blue;}</style><div class="box"><div>1</div><div>2</div><div>3</div>
</div>
当没有添加display：flex的时候：父容器里面的三个div都是各占一行的
当添加之后：
（子项默认是从左往右排列即（flex-direction:row））
2、flex-direction值 设置子项的布局方向（写在父容器上）
往盒子添加内容（子项），子项的排列方式是从左到右排列，从右到左排列，从上到下排列，从下到上排列？？
进行排列？？？
3、Flex-wrap:值 设置子项单行还是换行显示（写在父容器上）
当内容比较多的时候要进行换行处理 wrap，不会自动换行，否则会溢出
4、Flex-flow: 值1 值2 （写在父容器上）
Flex-flow: 提供了flex-direction和Flex-wrapl两种属性的复合写法值1和值2为flex-direction和Flex-wrapl属性的取值
5、justify-content:值 主轴方向上子项的对齐及分布方式 （写在父容器上）
什么是主轴方向？？？？就是添加子项的排列顺序上
justify-content:flex-end； 如果主轴选择flex-direction：row(左到右排列)， 则都靠右面对齐
space-between如果主轴方向有空隙，则左右分别靠容器两边，空隙由中间元素分配
space-around 如果主轴方向有空隙，每个盒子外左右都加一层平均分配的空隙
space-evenly 如果主轴方向有空隙，平均分配到每个子项之间
6、align-items:值 子项们相对flex容器在侧轴上的对齐方式（写在父容器上）
什么是侧轴？？？就是与主轴（flex-direction）不在同一个方向上。比如说： 主轴为左到右排列，当每一个子项的行高方向（上下的方向）为侧轴.
当主轴为左到右排列的时候，每一个子项块的行高自适应的时候：
align-items:stretch; 每一个子块在该行上自由拉伸（默认项）
align-items:flex-start; 每一个子块在该行与容器顶部对齐
align-items:flex-end; 每一个子块在该行与容器低部对齐
align-items:center; 每一个子块在该行居中对齐
7、align-content:值 子项们相对flex容器在主轴上的对齐方式（写在父容器上）（如果子项只有一行，无任何效果）
处理主轴方向每一行的对齐方式
二：子项上的属性
1、order：值 子项排序位置
值为一个数，正负都可以会根据每一个子列上的order的值进行排序排放
2、flex-grow:数 子项的扩展
当有剩余空间的时候，剩余空间会按照各子项flex-grow:瓜分每个子项宽度的扩展为：该子项(flex-grow值)/(所有子项flex-grow的和)
3、flex-shrink:数值 子项收缩
当一行排不下很多块的时候（不进行换行），该行会按只适应缩小，该块会按照该数值收缩（不想让其收缩，让该值为0）
4、flex: 数值 px值 是grow和shrink的复合
5、flex-basis:px值 分配剩余空间
当有一行足够的剩余空间的时候，子项宽会按该值扩展当一行没有剩余空间的时候，不会有变化当一行剩余空间不足的时候，会按该值先扩展，然后在进行只适应缩小
6、align-self:值 单独一个子项的垂直对齐方式
值有：center等（其实和align-items相似，一个整体对齐，一个单独对齐）
（2）grid网格布局
Grid布局是一个二维的布局方法，横纵两个方向总是同时存在（Flex相对而言，可以算是一个一维的布局方法） 他俩都有作用在父容器和子项上的属性
一：父容器上的属性
1 声明
display:grid 声明为网格布局的盒子
2 布局设置
1、gird-template-columns:行1值，行2值，行3值... 行划分有几行写几个值，设置每一行的高度大小值可以为px ，% ，只适应 ， fr单位（网格剩余空间比例单位）值还可以为： repeat（行数，每行大小）；每行大小都相同fr单位介绍：当所有fr总和大于1的时候该行大小为：该行fr/fr总和 * 父容器高的剩余空间当所有fr总和1的时候该行大小为： 该行fr/fr总和 * （父容器高的剩余空间*fr总和）2、gird-template-rows:列值1 ，列值2，列值3.... 列化分设置几列写几个值，每一个值代表对于列宽值可以为px ，% ，只适应 ， fr单位（网格剩余空间比例单位）值还可以为： repeat（行数，每列大小）；每列大小都相同3、grid-template-areas:{“第一行每个单元格名字” “第二行每个单元格名字”......} 表格的区域划分（一个区域相当于一个单元格）名字相同的单元格换分为一个区域（不会因间距分隔开）每一个区域都是一个矩形，不支持特殊图形这么使用？？当子项上添加grid-areas:名字 的时候就会对应的添加到该区域上去4、grid-template: 复合写法是grid-template-rows ，grid-template-rows，grid-template-areas的复合写法grid-template: “名字 名字 名字” 第一行大小“名字 名字 名字” 第二行大小/第一列大小 第二列大小 第三列大小
3 间距
1、grid-column-gap:间隙值 行间距
设置行与行之间的间隙2、grid-row-gap:间隙值 列间距
设置列与列之间的间隙3、grid-gap: 行间隙 列间隙 设置行、列间隙是grid-column-gap，grid-row-gar两个的复合写法
4 单元格的内容相对于每个单元格的对齐方式
1、justify-items:值 水平（行）对齐方式
是水平不拉伸（stretch），还是与容器的左（Start）中（center）右（end）对齐
（默认是水平拉伸的）2、align-items:值 垂直（列）对齐方式
是垂直不拉伸（stretch），还是与容器的顶（Start）中（center）底（end）对齐
（默认是垂直拉伸的）3、place-items:列对齐 行对齐 水平和垂直对齐方式
是justify-items和align-items的复合写法
5 整个表格相对于容器的对齐方式
1、justify-content:值 表格的水平对齐方式设置整个表格相对于容器水平方向的对齐方式2、align-content:值 表格的垂直对齐方式设置整个表格相对于容器垂直方向的对齐方式3、place-content: 水平值 垂直值 复合写法是justify-content，align-content两个的复合写法可选的值有：
二：子项上的属性
1、位置
1 grid-column-start: 数 水平方向占据的起始位置
2 grid-column-end :数或（span 个数） 水平方向占据的结束位置
3 grid-row-start:数 垂直方向占据的起始位置
4 grid-row-end:数或（span 个数） 垂直方向占据的结束位置
5 grid-column: 起始值 / 结束值 grid-column-start+grid-column-end复合
6 grid-row:1起始值 / 结束值 grid-row-start+grid-column复合
2.区域
grid-area:区域名 把该子项放到该区域内（父容器定义的区域）
grid-area: 水平的起始位置/垂直的起始位置/水平的结束位置/垂直的结束位置（值和上一页的那个表格一样）
3.对齐方式
justify-self:值 单个网格元素的水平对齐方式
align-self: 值 单个网格元素的垂直对齐方式
place-self:值1 值2 justify-self和align-self的复合
（3）移动端简介
1、网页移动端模拟器
2、Pc端和移动端代码是一套吗？？？
大一点的网站开发都是分开的，pc一套代码，移动端一套代码.
访问淘吧 --->后台检测当前设备---> 如果是pc端 ---> www.taobao.com
访问淘吧 --->后台检测当前设备--->如果是移动端--->网站从定向--> www.m.taobao.com
当然课可以一套代码实现pc端和移动端（响应式布局），一套代码适合做小型网站，不适合做大型网站.
3、viewport视口
（在头部的描述文件中可以看到）在移动端才有用，pc端无用
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为，visual viewport(可视视口)和layout viewport(布局视口)。visual viewport固定大小跟屏幕大小相同， 在上面.
layout viewport可改变大小，在下面。默认大小为980px.layout viewport大小可通过控制台document.documentElement.client Width 命令获取。现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。怎么更改layout viewport的大小？？在头部文件中，通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置（多个值，逗号分开）
<meta name="viewport" content="width=device-width, 值2,值3....">
width=device-width initial-scale=数值（代表缩放比例）
user-scalable=yes 或者=no
（4）移动端流式布局（利用绝对单位）
百分比布局，也叫流式布局。代表网站有：优酷，百度，天猫，腾讯等
在比较小和比较大的设备上的区别是：内容之间的间距上的根据设备的大小进行变换不同大小的设备：内容的大小是一样的（不变），只是间距上的根据设备大小变化
流式布局对于不同内容的处理
可以看出：对于文字：无论设备大小，文字占满一行在进行折行对于控件：无论设备大小，控件大小不变，变得是控件之间的间距对于图片：根据设备大小等比缩放（为了保持图片的比例和清晰度）流式布局的好处和坏处：好处：大屏幕下显示更多的内容坏处：宽屏下比例 有一些不协调
（5）移动端rem布局（利用比例单位）
等比缩放布局也叫rem布局， 代表网站有：网易，爱奇艺，淘宝，美团
当换到一个较大的设备的时候，内容的大小和间隙会进行等比缩放单位：em: 是一个相对单位，1em等于当前元素font-size（当前元素无font-size，为父元素的font-size）rem:是一个相对单位，1rem等于根元素的font-size值的大小
在不同的设备下怎么实现等比缩放？？？利用em,rem等这些比例单位（不使用px这些绝对单位）不同的设备只需要在最外层设置html的font-size大小，其他大小利用比例单位。对于不同的设备怎么动态的设置html的font-size？？利用js或者vw和vh单位
怎么使用js动态的设置html的font-size的大小？？
var fontsize = document.documentElement.clientWidth / 值；document.documentElement.style.fontSize = fontsize+‘px’;(这个值是固定的，最好除这个值之后得到的是一个整数)推荐一个Vs code中px转rem的插件（px to rem）先设置该插件html的font-size对于px的值选中该px利用快捷键Alt+z自动转换当然也可以整篇文章都选中，文章内的px都转为rem
怎么使用vw、vh单位动态的设置html的font-size的大小？？
vw: 把屏幕宽分为100分，1vm等于屏幕宽的1%
vh: 把屏幕高分为100分，1vh等于屏幕高的1%只需要设计算好html的font-size大小在使用的时候计算好使用多大的rem大小当然也可以利用px to rem插件注意要给body重置一下font-size的大小（因为默认为16px）
（6）响应式布局
响应式布局可以实现pc端和移动端，利用同一套代码（比较大的项目都是移动端和pc端两套代码，中小型项目可以使用一套代码）利用媒体查询，即media queries,可以针对不同的媒体类型定义不同的样式，从而实现响应式布局
媒体类型：
常见选项：
and 、 not（非）括号里面条件： min-Width:px（最小宽） max-Width:px（最大宽） orientation: portrait（纵屏） orientation: landscape（横屏）
方式一： 响应式的标识方式
@media 媒体类型 and（条件） and（条件）{
}
表示当宽度小于500px的时候所有设备执行该css样式
表示当宽度为500px~700px的时候执行该css样式
表示当宽度不大于(小于等于)500px执行该css样式
表示当纵屏的时候执行该css样式
方式二：标签方式
不用写响应表示符号，利用link标签的media属性在media=” 媒体类型 and(选择)”
当最小宽度小于400px的时候执行base.css文件样式
当横屏的时候执行base.css文件样式注意：响应式代码写到适配的css后面.
（7）Bootstrap框架
Bootstrap是最受欢迎的HTNL、CSS和JS框架，用于开发响应式布局，
移动设备优先的WEB项目
只看Bootstrap框架的css和html部分里面已经写好了非常多的css样式和html结构，不需要去写了，
只需要搭积木的方式去调用（要了解主要的css和html样式的核心使用）特色：1.响应式布局（该框架中写好了很多@media，用到调用就可以）2.基于flex的栅格系统3.提供了丰富的组件和工具方法4.有许多的常见交互效果（切换、弹窗、提示层）
官网：https://getbootstrap.com/
下载：下载编译过的css文件或者下载其源文件在下载好的源文件夹中有一个dist文件夹
里面有一个css文件夹
里面最主要的三个.css文件，
其中bootstrap.css文件其实包含了：bootstrap-grid.css和bootstrap-reboot.css文件（单独把他俩拿出来是为了方便使用）bootstrap.css 里面包含了所有css的源码bootstrap-grid.css css的栅格系统源码bootstrap-reboot.css 重置系统他里面的功能非常的多，可以产考网站上的帮助文档进行使用
1.布局部分(Layout)
Class=”Container” 版心
Class=”Container-fluid” 通栏
他还具备一定的响应式布局方式（点开源码自己看）
2.栅格系统(Grid)
1.Grid option 网格配置
Grid option 网格配置class=”row” 建立一行栅格把每一行默认为12个栅格给每一个单元格添加 col-个数 ，表述该单元格占几个栅格当一行单元格所占的栅格数大于12则进行折行处理（class=”w-100”也可以手动折行）col为平均分配剩余栅格col-sm 、 col-md 、 col-lg 、 col-xl 响应式操作
Class=”col-sm-4” 一行占4个栅格，满足col-sm响应器
2. Gutters 间距
单元格内容和单元格之间的间距（默认是30px）
Class=”no-gutters” 去掉单元格内容和单元格之间的间距
3.Alignment 对齐方式
4.Responsive classes 响应式的class样式
5.Reordering 排序
6.Offsetting 位置间距
…
（具体去看帮助文档）
3.重置系统（Content）
Reboot 重置默认样式
Typography 重置设备
Code 重置代码
Images 重置图片
Table 重置表格
Figures 重置图片描述
........
（具体去看官网的帮助文档）
4.组件系统（Companies）
Alerts 弹出提示
Badge 徽章
Breadcru 面包屑
Buttons 按钮
Button group 按钮组
Card 卡片
Carousel 轮播
Collapse 塌方
Dropdowns 下拉菜单
Forms 形式
Input grout 输入组
.......
（具体去看官网的帮助文档）
5.工具方法(Utilities)
Borders 边框
Clear fix 清浮动
Close icon 关闭icon
Colors 颜色
Display 显示类型
Embed 媒体
Flex 弹性盒子
Position 定位
.......
（具体去看官网的帮助文档）
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)相关推荐
- Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
- Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子 在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
- flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
- flex弹性盒子flex-grow 和flex的区别
在flex弹性盒子体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 这是一个宽700 ...
- Vue.js-Day08【项目实战(附带 完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别 大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...
- 浅析flex弹性盒子伸缩比
之前在做移动端内容左右滑动时,被flex属性绕晕了.说实话,在网上看了很多讲述flex属性的相关博客,说的非常复杂,不如自己总结的香.今天用一篇博客带你玩转flex属性! 准备工作 弹性容器开启弹性布 ...
- 自学前端第二十六天:flex弹性盒子
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵) 1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局 ...
- CSS 属性篇(四)：Flex弹性盒子
一.Flex介绍 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局: .box{disp ...
最新文章
- mysql 主从复制 性能_zabbix监控mysql各项性能，主从复制
- 混合app用百分比还是rem_一次搞懂前端所有CSS长度单位，px、em、rem、rpx、%....
- Linux下的top命令
- VM上安装Linux找不到硬盘
- python主要用于系统编程_一文带你了解python是什么？能做什么？为什么（附赠40G项目实战+绝版电子书）...
- 计算机组成原理实验七,计算机组成原理实验七.doc
- SignalR的使用
- linux iscsi软件,linux iscsi软件环境搭建
- SONICWALL E-Class NSA 系列简介
- java开发一年多少钱_Java
- oracle 计算复杂 数据跑不出来 如何分批次_如何配置PG的数据库缓冲
- python权威指南 pdf_Python高级编程(第2版) 中文完整pdf扫描版[76MB]
- Mysql之事务与视图
- 网络流量分析netflow
- 给定任意字符串，返回所有叠字的数组
- PWNHUB 一场新鲜赛事速达【六月内部赛】 web - login game + Misc - 伏羲八卦
- 使用FFmpeg转录网络直播流
- tensorrt部署YOLOv5模型记录【附代码，支持视频检测】
- SystemService简介
- docker常见故障分析