flex布局/弹性布局
1、是一种浏览器提倡的布局模型
2、布局网页更简单灵活
3、避免浮动脱标的问题
4、对flex布局兼容问题
1设置 div 变成 flex 盒子 弹性flex *display:flex;
2 div中的子元素 发生一些改变 1 设置了flex的盒子 称之为 父项
2 盒子里面的子元素称之为 子项 3具体变化 1不再区分什么 块级行内和行内块 全部都可以设置宽度和高
2子项默认的宽度和高度宽度 由内容撑开高度 等于父项的高
3子项 使用 浮动有没有效果 无效 使用定位、margin、transform都有效的
4 默认情况下 子项总宽度大于 父项的宽 也不会换行!!! flex不会换行只会压缩自身的宽度而已
格式布局多样化
flex布局构成
1、给父元素（亲爹）添加display：flex，子元素可以自动的挤压或拉伸
2、组成部分 ：
弹性容器（添加display：flex的父元素）
弹性盒子（子元素）
主轴（默认在水平居中方向）
侧轴（默认在垂直方向）
设置变成flex盒子
1、子元素不再区分 行内 块级 行内块、都可以直接设置宽高
2、不可以设置浮动 无效
3、定位 margin 变换 有效
4、比较少的使用这些技术 （都是传统的布局技术）
主轴对齐方式
justify-content调节元素在主轴的顶对齐方式
在flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
修改主轴对齐方式属性: justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
默认沿主轴居中排列
左对齐 flex-start 默认
右对齐 flex-end
justify-content：center；
先两侧对齐 间距在弹性盒子（子级盒子）之间
justify-content: space-between; （缩写 sb）
间距加载子级的两侧
视觉效果：子级之间的距离是父级两头距离的2倍
justify-content: space-around; （缩写 sd）
绝对平均 让子盒子绝对平均的分配空间
justify-content: space-evenl （缩写 sv）
侧轴对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
侧轴对齐 （设置元素 上下的位置）
1、单行属性 align-items：center； 居中
2、上对齐 flex-start 默认
3、下对齐 flex-end
设置侧轴多行元素对齐方式
2、多行属性
1、flex-start 上对齐 默认
2、flex-end 下对齐
3、center 多行垂直居中对齐
4、space-between 垂直 上下两侧对齐
5、space-around 垂直 子级两侧加间距
6、space-evenly 垂直 平均上下空间
3、换行
默认情况下
1、flex不会换行的
当子元素的总宽度大于父元素的时候 不会换行 只会挤压子元素的宽度
2、设置换行属性
flex-wrap
1、nowrap 不换行
2、wrap 换行
1默认请求下 行内元素 span加宽和高度无效
2 给父盒子设置了的flex布局
1子元素子项直接加宽度和高度
2子元素存在默认的宽度和高度
1宽度 等于内容撑开
2 高度 高于父项的高
3子元素
使用浮动无效
使用 定位 margin变换 有效
3 父项
设置主轴的方向 水平
flex-direction:
1、column;列 垂直
2、 row默认值行
设置主轴对齐方式水平
justify-content:
1 flex-start;
2 flex-end;
3 center;
4 space-evenly
5 space-between
6 space-around
设置换行
1、flex 默认不会换行
flex-wrap: wrap;
设置侧轴对齐方式-单行 垂直
align-items
1 flex-start;
2 flex-end;
3 center;
设置侧轴对齐方式-多行垂真
align-content
1 flex-start;
2 flex-end;
3 center;
4 space-evenly
5 space-between
6 space-around
子项
设置子项占父项宽度的比例 flex: 1
设置子项在侧轴上的对齐方式
align-self
1 flex-start;
2 flex-end;
3 center;
居中演示
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: skyblue;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.one{
width: 50px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
侧轴居中排列
align-items:center;
拉伸 默认值（现有状态，测试的时候去掉子级的高度）
align-items:stretch;
单个盒子的控制
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
.box div:nth-child(2){
/* 单独设置某个弹性盒子的侧轴对其方式 */
align-self: center;
}
修改主轴方向 flex-direction
1、row 默认值 水平方向 从左到右 少用
2、row-reverse 从右到左 少用 了解
3、column 从上到下 多用
4、column-reverse 从下到上 少用 了解
设置主轴对齐方式 当主轴方向修改之后 设置主轴对齐属性 效果也会改变
演示效果
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: skyblue;
display: flex;
/* 修改主轴方向 flex-direction */
flex-direction: column;
/* flex-direction: column-reverse; */
/* flex-direction: row-reverse; */
/* 设置主轴对齐方式 当主轴方向修改之后 设置主轴对齐属性 效果也会改变 */
justify-content: space-around;
align-items: center;
}
span{
width: 100px;
height: 50px;
background-color: #ccc;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>
子项 默认的宽度 由内容撑开默认的高度 等于父项的高】 如果你修改了 主轴的方向 以上的效果 反过来 flex-direction: column;
子项 默认的宽度 等于父项的宽度子项的高 由内容撑开
设置子项侧轴对齐方式
文本居中 text-align：center； line-height:100px；；
使用flex布局的方式
把span看成父项
把span中的文字看成子项
display：flex；
justify-content：center；
align-ittems:center:
设置子项的单独修改的方式
<style>
div{
width: 600px;
height: 600px;
background-color: skyblue;
margin: 200px auto;
display: flex;
}
span{
border: 1px solid #000;
height: 100px;
background-color: pink;
flex: 1;
}
span:nth-child(2){
flex: 2;
/* 子项垂直居中 */
align-self: center;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<span>动作片</span>
<span>纪录片</span>
<span>爱情片</span>
<span>战争片</span>
<span>古装片</span>
<span>玄幻片</span>
</div>
伸缩比
使用flex ： 属性修改弹性盒子伸缩比
属性：flex : 值; 取值分类：数值（整数） 注意：只占用父盒子剩余尺寸
用于设置子项占父项宽度的比例
flex：1； 代表设置每一个子标签宽度都占一份
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div{
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1){
width: 50px;
}
.box div:nth-child(2){
/* 占用父盒子剩余尺寸 */
/* 剩余尺寸：减去1和3的子级占位 */
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
当有两个盒子都出现flex属性
.box div:nth-child(2){
/* 占用父盒子剩余尺寸 */
/* 剩余尺寸：减去1和3的子级占位 */
flex: 1;
}
.box div:nth-child(3){
/* 同时两个子级都有flex的属性，那就相于1+1两个属性值，减去1的占位 剩余尺寸由2和3分成相等的两份占位 */
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
占用份数
.box div:nth-child(2){
/* 占用父盒子剩余尺寸的3份 */
flex: 3;
}
.box div:nth-child(3)
/* 占用父盒子剩余尺寸的1份 */
flex: 1;
}
子项案例知识
ul{
margin: 100px auto;
list-style: none;
width: 1000px;
height: 300px;
background-color: skyblue;
display: flex;
/* 设置换行 */
flex-wrap: wrap;
/* 设置主轴对齐方式 两侧间隔 比中间间隔小 */
justify-content: space-around;
/* 设置测轴对齐方式 多行*/
align-content: space-around;
}
li{
width: 23%;
height: 45%;
background-color: #ccc;
border: 1px solid #000;
display: flex;
/* 设置主轴方向 上下 */
flex-direction: column;
/* 水平方向 侧轴 */
align-items: center;
/* 垂直方向 主轴 平均 */
justify-content: space-evenly;
/* 设置内边距可以挤压空间 */
padding: 10px 0;
}
span{
width: 50px;
height: 50px;
background-color: #fff;
}
移动适配可视口新单位
新单位 VW VH
vw = 屏幕的宽度 =viewport width 视口的宽度
vh = 屏幕的高度 =viewport height 视口的高度
vw 是相对长度的单位 （都是要找到参照物的） 相对于屏幕的高度
必备知识 工作上经常用
1、vw / vh = 屏幕的宽度/ 高度 * 0.01 即是 1/100 ,
屏幕宽度的一半
width ：50vw ；
作用： 移动端的屏幕适配 （手机屏幕越大 看见的元素就越大）
vw单位尺寸 ：
**确定设计稿对应的vw尺寸 （1/100视口宽度） **
vh同样计算方式 （1/100视口高度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
宽高的单位要么都是 vw 要么都是vh 不能混用
适配公式
要适配的手机中的div的宽度=（要适配的手机的屏幕 100vw）* 设计稿中的宽度/ 设计稿中div宽度（100）
要适配的手机中的屏幕（750）/设计稿中的宽度（375）= 要适配的手机中的div的宽度（200）/设计稿中div宽度（100）
a/b=c/d
(a/b)*d=c
c=(ad)/b=手机屏幕的宽度设计稿中div的宽/设计稿宽度
=100vw * 100 /375
运算符两侧 必须加 空格 否则不生效 语法错误
计算示例 1 ：
width: calc(50vw * 100/375);
height: calc(30vw * 100/375);
计算示例 2 ：
width: calc(50vw - 200px +100px - 200px 100px);
rem移动适配单位
1rem=1html标签字号
rem单位的尺寸 N * 37.5 = 68 → N = 68 / 37.5 如 （设计稿375 HTML37.5 用宽度除以HTML字号37.5 = rem的单位）
rem单位的尺寸 = px单位数值 / 基准根字号 */
rem的屏幕适配方案
屏幕宽度改变 -> html的fontsize 发生改变 页面中使用了rem单位元素大小发生改变
1、引入一段 手机淘宝写好的js代码 （ flexible.js ）
脚本：（ script src="../练习/js/flexible.js" ）（ /script ）
在html 的最后一个位置加上这个js 可以自动适配各个窗口的大小
less语法
1、 less 是什么东西
less 是一种提高我们编写css效率的基数 = > css预处理器 （ less ， scss ， stylues 技术名词 ）学会其中一个也够用 效果差不多
less 工作流程
1、 我们写样式代码 直接写在 less 文件中
2、通过插件 来把 less 文件 编译成 我们熟悉的 css文件
3、网页中 来引入 编译好的 css 文件
使用less的过程
1、新建一个less文件 （后缀名就是 .less）
2、会按照less的语法要求 在 less文件中编写代码
3、通过 easy less vscode 插件 来编译less文件
4、会自动生成对应的 css文件
5、在网页中 直接引入 编译好的css文件即可
less的用法
1、默认的css 不支持运算 使用 calc 才可以
2、less 支持运算
在less文件下直接填写css代码
3、less 的语法
1、变量 方便快速的去修改样式
2、运算 less 支持数学运算
4、混合 mixin
把一大段代码 都堆一起 方便使用
嵌套 让我们按照html的嵌套结构 来编写css嵌套
less嵌套中
1、嵌套后代 变成子代选择器 >
2、用伪元素 要在冒号前面加 & 连接符 才能生效 &::before
5、如何制定 编译好的css文件存放在哪里
1、使用easy less 指定生成的css目录位置 这个技术以后工作中用不到
2、 后期会有其他的编译工具统一处理cs生成的目录 常用
当我们要修改主题颜色的时候， 只需要改一个地方即可
懂得使用less 变量技术 就可以做到改一个地方即可
固定语法 @+任意的名称 （有语义的英文） 变量： 作用 把一些css 的睡醒设置在一个地方 ，实现一改全改
@color:aqua;
// 统一设置网页文字大小
@font-size:5.3333vw;
.box{
width: 5.3333vw;
height: 13.3333vw;
background-color: @color;
}
.front{
color: @color;
font-size: @font-size;
}
示例
需求 有三个 元素 想要使用同一张精灵图
1、A元素 图片位置 x y （ -300px， 30px）
1、B元素 图片位置 x y （ -100px， 50px）
1、C元素 图片位置 x y （ -500px， 30px） */
混合 定义一个mixin
使用 less 的mixin来解决 （用法有点类似变量）
.aaaaaa(@a1,@a2) {
// 存放你想要用到的一坨代码
background-size: 100%;
background-image: url(../../图片/你的名字.jpg);
background-repeat: no-repeat;
// 背景图片的位置
background-position: @a1 @a2;
}
less的嵌套关系
.one{
.aaaaaa(-50px,30px);
// background-position: -100px 30px;
// 用伪元素 要在冒号前面加 & 连接符 才能生效
&::before{
content: '123';
}
}
媒体查询
媒体查询 可以根据屏幕宽度的不同 去使用不同的css
@media(width:400px){
body{
background-color: red;
}
}
/* 不只是针对屏幕宽度 高度也可以 （很少用 了解） */
/* 高度600 颜色变绿 */
@media screen and (height:600px){
body{
background-color: green;
}
}
@media screen and (height:599px){
body{
background-color: green;
}
}
/* 最小300px 及以上 可以变色 小于300没有 */
/* @media screen and (min-width:300px) {
body{
background-color: pink;
}
}
/* 最大600px 及以下 可以变色 大于600没有 */ */
/* @media screen and (max-width:600px) {
body{
background-color: skyblue;
}
} */
/* 300到600之间可以变色 */
@media screen and (min-width:300px) and (max-width:600px) {
body{
background-color: skyblue;
}
}
如何实现导航栏滚动
在父级元素添加 overflow-x: auto;
（ X代表水平（ 左右 ）方向滚动 Y 代表垂直（ 上下 ）方向滚动 ）
实现上下滚动需要设置body的高度
body{
height: 100vh;
display: flex;
flex-direction: column;
}
.box{
width: 30vw;
border: 1px solid #000;
background-color: aqua;
margin: 26.6667vw auto;
/* 实现水平方向滚动 */
overflow-x: auto;
}
Bootstrap 全局 CSS 样式
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
以前写代码 要么只写pc端(一套)，要么只写移动端(一套)
响应式:
只写一套代码，可以在pc端运行(体验不错)，还可以在移动端上运行(体验不错)
3 响应式 vs code 官网 就是响应式
4 在真实的开发当中 想要开发出来 需要用到响应式的网站 使用第三方的ui框架来实现 是学习前端生涯当中的第一个 UI框架!! bootstrap
1bootstrap将屏幕按照宽度分成四种
1、大屏幕 （1g） > 1200px
2、 中等屏幕 （md） 992px-1200px
3 、小屏幕 （sm） 768px-992px
4、 极小屏幕 （xs） < 768px
<div class="container">
<div class="row">
<!-- 在大屏幕下 每一列占一份 -->
<!-- 在大屏幕下 每一列占三份 -->
<!-- 在大屏幕下 每一列 占2份 -->
<div class="col-1g-2">1</div>
<div class="col-1g-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-2">5</div>
<div class="col-1g-2">6</div>
</div>
</div>
固定用法
1、先外层写一个 类 名字是固定 container
2、里面写一个类 row固定
3、根据需求 (在什么样的屏幕下一行 显示几个元素)
bootstrap 默认将一行 划分成了12份 12列 1列就占一份
3、 如何根据需求来编写合理的栅格系统的代码
1、你要自己去观察 当前的页面在不同宽度下的表现
观察出来 大屏幕下 每一列占几份 col-1g-4
观察出来 中等屏幕下 每一列占几份 col-md-4
观察出来 小等屏幕下 每一列占几份 col-sm-12
观察出来 极小屏幕下 每一列占几份 col-xs-12
2、极小屏幕下 一列占二份
3 变成 中等屏幕
仅仅是因为 bootstrap自己额外做了设置而已自动设置了
让较大屏幕 去沿用较小屏幕的设置
如果一行超过了12份和浮动的特性一样 往下掉
container 居中的版心
宽度会跟随屏幕宽度的变化而变化(不用管多少px版心会自动调整大小就可以了)
有些时候 网页设计 根据屏幕分为两种
1、需要版心 container
2、全面屏 container-fluid
1、栅格系统 方便我们 编写 代码 在不同的宽度下 不同表现的代码 容器而已!
2、 栅格系统的核心 也是 媒体查询
3 、应用 ： 我们要根据栅格系统对于 不同屏幕的宽度的分类 来找到 当前需求 如何实现
4 、比如
1、定版心的容器
Bootstrap 编译并压缩后的 CSS、JavaScript 和字体文件。
方便布局 在网站中也可以找到对应功能 粘贴复制修改
依次引入样式
在 Bootstrap 里找到 全局css样式 组件 JavaScript插件
可以在里面做好的代码中找到我们需要的一些代码进行复制粘贴 再微调
栅格系统是bootstrap封装好的一种技术(媒体查询)，更加方便的方式来让我们使用
1、做引入框架的铺垫1引入 样式
2、引入 jquery.js
3、引入 bootstrap.js
2、 写栅格代码
1、先容器 container(版心) 或者 container-fluid(版心)
2、再写行 row
3、根据屏幕的种类 以及每一列占的分数
元素设置高度
1 在最外层来设置
2 由里面来撑开
3 优先级 权重的问题
4 只要是使用第三方的ui框架190%代码人家写好
2 10%代码 需要我们自己去重置去调试去调整
5 认真去对待调试!!! 开发人员 必须要熟练的技术!!
6 旧项目使用的boostrap的版本和新的项目的bootstrap版本不一致 才导致 效果没有对应上!!
7 1、旧的项目 用的旧的 bootstrap
2、新的项目 用的新的 bootstrap
3、我们没有自己改动过代码 但是效果却对应不上!!找到了原因，有可能引入的第三方库的版本不相同导致!!
4、总结从中学习到了什么
使用第三方的ui框架
1、我们对于它不熟悉 调试错误的范围 更加大!所以我们随便改的地方都有可能出错!不可避免(对于没有怎么使用过的同学来说)
2、最好的学习过程 ，加一点代码 看一下效果 等写完一个模块了 ， 简单总结 避免下次再次出现 ，重复以上的过程 我们对于框架来说就越来越熟悉 自然就知道哪些能改哪些不能改 我们调整能力也得到加强!
