html+css知识点全面总结（三）
前期文章：
html+css知识点总结回顾（一）
html+css知识点总结回顾（二）
html+css知识点总结回顾（三）
文章目录
-
- html+css知识点总结回顾（三）
-
-
- 1.标签的嵌套（拓展）
- 2.Chrome调试工具-（拓展）查错流程
- 3.盒子模型-组成
- 4.外边距折叠现象 – ① 合并现象
- 5.外边距折叠现象 – ② 塌陷现象
- 6.行内元素的margin和padding无效情况
- 7.结构伪类选择器
- 8.伪元素(☆)
- 9.标准流
-
- 9-1.脱标
- 10.浮动
-
- 1.浮动的目的：
- 2.浮动的特点：
- 3.注意点
- 11.清除浮动
-
- 11-1.直接设置父元素高度
- 11-2.额外标签法
- 11-3.单伪元素清除法
- 11-4.双伪元素清除法
- 11-5.给父元素设置overflow：hidden
- 12.flex布局(拓展？)
- 13定位
- 1.网页常见布局方式
-
- 1-1定位常见的应用场景
- 2.定位步骤
- 3.定位分类
-
- 3-1.静态定位：static
- 3-2.相对定位：relative
- 3-3.绝对定位:absolute (重要！)
-
- 3-3-1.子绝父相
- （案例）子绝父相水平居中案例-解决方法
-
- 3-3-2.绝对定位居中
- 3-4.固定定位：fixed
- 4.元素层级问题
-
- 4-1 更改定位元素的层级
- 5.装饰-垂直对齐方式 vertical-align
-
- 5-1 了解基线
- 5-2 垂直对齐方式
- 5-2-1 （拓展）项目中 vertical-align 可以解决的问题
- 6.装饰-光标类型
- 7.装饰-边框圆角
- 8.装饰-overflow溢出部分显示效果
- 9.装饰-元素本身隐藏
- 10.元素整体透明度
- 11.表格边框合并
- 12.用css画三角形技巧（面试题）
- 13.选择器拓展
-
- 13-1 链接伪类选择器
- 13-2 焦点伪类选择器
- 13-3 属性选择器
- 14.精灵图
- 15.背景图片大小
- 16.background连写拓展
- 17.盒子阴影
- 18.transition过渡
- 19.SEO简介
- 20.（拓展）有语义的布局标签
- 21.(拓展补充)CSS书写顺序
- web移动端：
-
- 拓展：文字过多显示省略号
- day01
-
- 1.移动端特点介绍
-
- 1.移动端和pc端的区别
- 2.分辨率
-
- 1.逻辑分辨率
- 2.物理分辨率
- 3.视口
- 4.二倍图
- 2.字体图标
-
-
- 基本使用
-
- 3.transform平面转换
-
- 3-1 位移：translate
- 位移-绝对定位居中
- 3-2 旋转
- 3-3 多重转换
- 3-4 缩放
- 3-5 倾斜
- 4.渐变背景background-image
- 5.动画
-
- 5-1 动画属性
- 案例-设置动画轮播图-无缝切换
- 使用step实现逐帧动画
- day02
-
- 1.3d空间转换 transform
- 2.透视
- 3.立体呈现
- day03
-
- 1.百分比布局\流式布局
- 2.flex布局/弹性布局/伸缩布局（☆）
-
-
- 弹性盒子特点：高度弹弹弹
- 2-1.flex主轴对齐方式（☆）
- 2-2.flex侧轴对齐方式（☆）
-
- 1.align-items 写在父级
- 2.align-self 写在子级
- 2-3.flex伸缩比
- 2-4.改变主轴方向
- 2-5.弹性盒子换行
-
- day04 移动适配方案
-
- 1.rem
-
- 1-1 rem移动适配-媒体查询
- 1-2适配原理
- 1-3flexible
- 1-4 rem和em的区别
- 2.less
-
- 2-1 运算
- 2-2 变量
- 2-3 嵌套
- 2-4 函数
- 2-5 less导入
- 2-6 导出
- 3.vw/vh
- 4.rem和vw/vh的区别
- 5.媒体查询
-
- 5-1 媒体查询书写顺序
- 5-2 媒体查询link写法
- 5-3 媒体查询隐藏
- 5-4 拓展 min-height和min-width
- 6. BootStrap框架
-
- 6-1 BootStrap栅格系统
-
1.标签的嵌套（拓展）
在网页布局中需要注意的标签嵌套关系：
p标签里不能嵌套其他块级元素
a标签不能互相嵌套，a标签可以嵌套其他任意标签
2.Chrome调试工具-（拓展）查错流程
1.右击检查
2.哪里不会点哪里
- 在elements找到对应的元素
3.看styles中有没有自己设置的选择器
- 如果没有，一般是选择器写错了
- 常见原因1：选择器单词拼错
- 常见原因2：选择器结构写错
4.如果选择器有，但是样式没出来
- 看是否有删除线（没生效）
- 常见原因1：样式被注释
- 常见原因2：样式被覆盖
- 看是否有小三角形（报错）
- 常见原因1：属性值后没有分号
- 常见原因2：出现中文标点
- 常见原因3：属性名或者属性值单词拼错
3.盒子模型-组成
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
1.内容的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
2.边框（border）
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框颜色 | border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
border 连写形式：
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
➢ 快捷键：bd + tab
边框（border）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值
3.盒子实际大小计算公式
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
box-sizing:content-box —W3C 标准盒子模型
内容content的宽高是设置的width和height 盒子的实际大小是width+border+padding
box-sizing:border-box —怪异盒子模型 内减模式
盒子的实际的宽高就是设置的width和height
4.外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
只给其中一个盒子设置margin即可
5.外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- // display:flex
- 转换成行内块元素
- 子元素设置浮动
- 设置定位
6.行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
也就是说行内标签的margin-top和bottom不生效，padding-top和bottom也不生效
要想改变垂直方向的布局 可以使用line-height
7.结构伪类选择器
| 选择器 | 说明 |
|---|---|
| E：first-child{} | 匹配父元素中第一个子元素，并且是E元素 |
| E：last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E：nth-child（n）{} | 匹配父元素中第n个子元素，并且是E元素 |
| E：nth-last-child（n）{} | 匹配父元素中倒数第n个子元素，并且是E元素 |
n的注意点：
1.n为：0、1、2、3、4、5、6…
2.通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到从第5个往后 | n+5 |
nth-of-type（n）{}结构伪类选择器（了解） 同类型中第几个
选择器：
| 选择器 | 说明 |
|---|---|
| E:nth-of-type（n） | 只在父元素的同类型（E）子元素范围中，匹配第n个 |
8.伪元素(☆)
作用：精简html结构
使用场景：不重要的内容，建议用伪元素
特点：js无法操作伪元素 具有行内元素特性
语法：
::before{content：“”} 在盒子内容的最前面添加伪元素(父级的第一个子级)
::after{content：“”} 在盒子内容的最后面添加伪元素
注意点：
- 伪元素需要给盒子加，表单类和图片没有伪元素，只有盒子有（div p span标签）
- 伪元素一定要写content，否则无效
- 伪元素是行内元素，设置大小无效！
- 双冒号之前是父级！！在父级的最前或最后添加元素
- 不可以直接设置宽高，但一般配合定位使用，可以不设置display了
9.标准流
哪些是标准流？
块，行内，行内块
标准流可以设置 margin:auto（水平居中） 其他流派不能使用
标准流子盒子的宽度默认是父盒子宽度？？
小技巧：盒子在父盒子最右侧：margin-left：auto
9-1.脱标
什么情况下元素会脱标？
- 元素设置position，并且position的值为fixed或absolute；
- 元素添加浮动float，并且float的值不为none；
脱标元素的特点：
- 可以随意设置宽高，宽高默认由内容决定。
- 脱标后的块元素宽高由内容自动撑开（标准流下默认占满父元素的宽度）
- 脱标后的行内元素宽高由内容撑开，但是可以设置宽高（标准流下默认由内容撑开，且不能设置宽高）
- 不再受标准流的约束。
- 不再给父元素汇报宽高数据，也就是不能将父元素撑开。
10.浮动
1.浮动的目的：
早期：文字环绕图片
几年前：布局（可以让块标签在一行排列，中间没有间隙，而且可以设置宽高）
缺点：
1.脱标
2.如果当前元素浮动，后面元素不浮动，后面元素把当前元素占据
3.一行放不下，会换行
2.浮动的特点：
- 脱标，在标准流中不占有位置，相当于从地面飘到了空中
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 （浮动的标签是顶部对齐的）
- 浮动有特殊的显示效果 ：一行可以显示多个且可以设置宽高（浮动后的标签具备行内块的特点）
3.注意点
浮动的元素不能通过text-align：center或者margin：0 auto居中。
11.清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
子元素浮动后脱标 → 不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局
受浮动影响的情况： 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置。
11-1.直接设置父元素高度
➢ 特点：
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 需要一直添加东西 高度不能固定。
11-2.额外标签法
➢ 操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
➢ 特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
11-3.单伪元素清除法
➢ 操作：用伪元素替代了额外标签 （和额外标签法类似）
1.基本写法：
.clearfix::after{
content:"";
display:block;
clear:both;
}
2.补充写法
.clearfix::after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
➢ 特点：
优点：项目中使用，直接给标签加类即可清除浮动
11-4.双伪元素清除法
➢ 操作：
.clearfix::before
.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both
}
➢ 特点：
优点：项目中使用，直接给标签加类即可清除浮动
11-5.给父元素设置overflow：hidden
➢ 操作：
- 直接给父元素设置 overflow : hidden
➢ 特点：
优点：方便
12.flex布局(拓展？)
display：flex
flex对自身没影响，让子元素在一行，子元素可以设置宽高，子元素装不下，也不会换行。行内块inline-block也可以让子元素在一行，但是行内块的儿子之间会有间隙。
/* 让亲儿子们水平排列 */
display: flex;
/* 让子元素们在水平方向两边贴齐，中间平均分 */
justify-content: space-between;
/* 让儿子们换行 */
flex-wrap: wrap;
/* 让子元素们在垂直方向两边贴齐，中间平均分 */
align-content: space-between;
/* 让flex元素垂直居中 */
align-items: center;
/* li的圆点去掉 */
list-style: none;
13定位
1.网页常见布局方式
-
标准流
块级元素独占一行 → 垂直布局
行内元素/行内块元素一行显示多个 → 水平布局
-
浮动
可以让原本垂直布局的 块级元素变成水平布局
-
定位
可以让元素自由的摆放在网页的任意位置
一般用于 盒子之间的层叠情况
1-1定位常见的应用场景
-
可以解决盒子与盒子之间的层叠问题
定位之后的元素层级最高，可以层叠在其他盒子上面 （电影评分 热门商品hot小角标）
-
可以让盒子始终固定在屏幕中的某个位置（滚动页面 导航栏固定显示）
2.定位步骤
-
设置定位的方式：position
定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed -
设置偏移值：水平+垂直就近各取一个
方向 属性名 属性值 含义 水平 left 数字+px 距离左边的距离 水平 right 数字+px 距离右边的距离 垂直 top 数字+px 距离上边的距离 垂直 bottom 数字+px 距离下边的距离
定位必备写法：
1.定位模式（3种）
2.偏移量（坐标，只需要x、y两个点就可以定住盒子）
3.如果left和right都有，以left为准，top和bottom都有，以top为准
top：往下走 bottom：往上走
left：往右走 right：往左走 right：负数：往右走
3.定位分类
3-1.静态定位：static
➢ 介绍：静态定位是默认值，就是之前认识的标准流。
➢ 代码： position：static
➢ 注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
3-2.相对定位：relative
➢ 介绍：自恋型定位，相对于自己之前的位置进行移动
➢ 代码： position：relative
➢ 特点：
- 占有原来的位置（移动后原来的位置还在，其他的盒子过不来）
- 仍然具有标签原有的显示模式特点
- 需要配合方位属性实现移动
- 改变位置参照自己原来的位置
- 可以压着其他盒子，但是不脱标（原来的位置还在）
➢ 应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
3-3.绝对定位:absolute (重要！)
➢ 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动。脱标！不占位置！
先找已经定位的父级，如果有这样的父级，就以这个父级为参照物进行定位，有父级，但父级没有定位，以浏览器窗口为参照进行定位。
➢ 代码： position：absolute
➢ 特点：
- 需要配合方位属性实现移动
- 改变标签的显示模式特点，具备了行内块的特点（在一行共存，且宽高生效）。
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标 （不给宽高，由内容决定 宽高可以设置）
绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0
➢ 应用场景：
- 配合绝对定位组CP（子绝父相）
3-3-1.子绝父相
➢ 场景：让子元素相对于父元素进行自由移动
➢ 含义：
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相好处：
• 父元素是相对定位，则对网页布局影响最小
（拓展） 子绝父绝特殊场景
➢ 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
➢ 原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
（案例）子绝父相水平居中案例-解决方法
-
子绝父相
-
先让子盒子往右移动父盒子的一半
left：50%
-
再让子盒子往左移动自己的一半
-
普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子宽度变化后需要重新改代码
-
优化做法：transform：translateX(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
-
3-3-2.绝对定位居中
绝对定位的盒子不能使用margin：auto左右居中
第一种：宽度高度随时变化的话 很不方便
.box {
position：absolute；
left：50% //移动了参照物的百分之五十 整个盒子移动到浏览器中间偏右的位置
top：50%
margin-left：-200px; //向左移动盒子的一半宽度
margin-top： -200px; //向上移动盒子一半高度
width:400px;
height:400px;
}
第二种
.box {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) //位移：自己宽度高度的一半
width:400px;
height:400px;
}
3-4.固定定位：fixed
1.脱标-不占位置 （可以放在代码里的任意位置 很随意）
2.改变位置 参考浏览器窗口 不是body body可能需要滚动条 很长
3.具备行内块特点
4.元素层级问题
➢ 不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
4-1 更改定位元素的层级
➢ 场景：改变定位元素的层级
➢ 属性名：z-index
➢ 属性值：数字
• 数字越大，层级越高。默认取值是0
注意：z-index必须配合定位才会生效。
5.装饰-垂直对齐方式 vertical-align
5-1 了解基线
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题
➢ 场景：解决行内/行内块元素垂直对齐问题
➢ 问题：当图片和文字在一行中显示时，其实底部不是对齐的
5-2 垂直对齐方式
➢ 属性名：vertical-align
➢ 属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
浏览器遇到行内和行内块标签当做文字处理，默认文字是按照基线对齐，居中对齐 要使用vertical-align：middle
5-2-1 （拓展）项目中 vertical-align 可以解决的问题
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果
6.装饰-光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 表示可以复制 |
| move | 十字光标，提示用户可以移动 |
7.装饰-边框圆角
场景：让盒子四个角变圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值看对角！
- 画一个正圆：
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半----border-radius:50%
- 胶囊按钮：
1.盒子要求是长方形
2.设置----border-radius：盒子高度的一半
8.装饰-overflow溢出部分显示效果
➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
➢ 属性名：overflow
➢ 常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
一般用overflow解决外边距塌陷、浮动的影响等问题
9.装饰-元素本身隐藏
➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
➢ 常见属性：
- visibility：hidden
- display：none
➢ 区别：
- visibility：hidden 隐藏元素本身，并且在网页中 占位
- display：none 隐藏元素本身，并且在网页中 不占位置
➢ 注意点：
- 开发中经常会通过 display属性完成元素的显示隐藏切换
- display：none；（隐藏）、 display：block；（显示）
10.元素整体透明度
➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
- 1：表示完全不透明
- 0：表示完全透明
➢ 注意点：
- opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
11.表格边框合并
➢ 场景：让相邻表格边框进行合并，得到细线边框效果
➢ 代码：border-collapse：collapse；
注意：一定要加给table标签：做细线表格
前端与移动开发学员学习情况
编号
编号
编号
编号
1
小姐姐
女
100
2
小姐姐
女
100
······
12.用css画三角形技巧（面试题）
➢ 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
➢ 实现原理：
- 利用盒子边框完成
➢ 实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
div {
/* width: 100px;
height: 100px; */
width: 0;
height: 0;
/* background-color: aquamarine; */
/* transparent 透明 */
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 40px solid gray;
}
13.选择器拓展
13-1 链接伪类选择器
➢ 场景：常用于选中超链接的不同状态
➢ 选择器语法：
选择器语法
功能
a:link{}
选中a链接 未访问过的状态
a:visited{}
选中a链接 访问之后的状态
a:hover{}
选中鼠标悬停的状态
a:active{}
选中鼠标按下的状态
➢ 注意点：
- 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
- 记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
- 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
13-2 焦点伪类选择器
➢ 场景：用于选中元素获取焦点时状态，常用于表单控件
➢ 选择器语法：
/* 获得焦点：把光标点到input里面 失去焦点：把光标从input中拿出来 */
input:focus{
/* 当获得焦点时 背景色变pink */
background-color: pink;
}
➢ 效果：
- 表单控件获取焦点时默认会显示外部轮廓线
13-3 属性选择器
➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
➢ 选择器语法：
选择器
功能
E[attr]
选择具有 attr 属性的 E 元素
E[attr=“val”]
选择具有 attr 属性并且属性值等于 val 的 E 元素
14.精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
background-position：改变背景图片的位置 （水平方向 垂直方向）
想要左侧移动，需要给一个负数。往左往上都是给一个负数。
使用步骤：
- 创建一个盒子
- 设置盒子大小为小图片大小
- 将精灵图设置为盒子的背景图片
- 修改背景图片的位置。通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
一般精灵图的照片要和文字一行展示 所以一般都用行内标签 span b i ，行内标签再display一下，转换模式，就可以显示宽高了
15.背景图片大小
作用:设置背景图片的大小。
语法:background-size:宽度 高度；
取值
场景
数字+px
简单方便、常用
百分比
相对于 当前盒子 自身的宽高百分比
contain
包含 图片等比缩放，但不会超出盒子的大小，宽或高其中之一和盒子宽或高大小相同，另一个方向就停止缩放，导致盒子可能有留白。
cover
缩放 图片等比缩放，直到刚好填满整个盒子，没有空白，宽或高和盒子尺寸完全相同，导致图片显示不全。
16.background连写拓展
完整连写： background：color image repeat position/size;
注意点：
background-size和background连写同时设置时，需要注意覆盖问题
解决：
- 要么单独的样式写连写的下面
- 要么单独的样式写在连写的里面
17.盒子阴影
作用：给文字添加阴影效果，吸引用户注意
属性名：box-shadow
取值：
参数
作用
h-shadow
必须，水平偏移量。允许负值
v-shadow
必须，垂直偏移量。允许负值
blur
可选，模糊度
spread
可选，阴影扩大
color
可选，阴影颜色
inset
可选，将阴影改为内部阴影
拓展： 阴影可以叠加设置，每组阴影取值之间以逗号隔开
18.transition过渡
过渡的属性名：transition
取值：
参数
取值
过渡的属性
all：所有能过渡的属性都能过渡、具体属性名如：width：只有width有过渡
过渡的时长
数字+s（秒）
注意点：
-
过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
-
transition属性给需要过渡的元素本身加
-
transition属性设置在不同状态中，效果不同
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
transition: all (所有的属性过渡) 1s （时间为1秒）
过渡只能是值与值之间过渡！！显示到隐藏转换不能用过渡，display：none是属性之间的。可以用opacity：0.。。。。
19.SEO简介
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- …
SEO三大标签
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
20.（拓展）有语义的布局标签
标签名
语义
header
网页头部
nav
网页导航
footer
网页底部
aside
网页侧边栏
section
网页区块
article
网页文章
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPbJerb2-1675650524890)(C:\Users\刘玉曼LIUYUMAN\AppData\Roaming\Typora\typora-user-images\1659594745713.png)]
- 注意点：
- 以上标签显示特点和div一致，但是比div多了不同的语义
21.(拓展补充)CSS书写顺序
顺序
类别
属性
1
布局属性
display、position、float、clear、visibility、overflow
2
盒子模型+背景
width、height、margin、padding、border、background
3
文本属性内容
color、font、text-decoration、text-align、line-height
4
点缀属性
cursor、border-radius、text-shadow、box-shadow
注意点：
- 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个
web移动端：
拓展：文字过多显示省略号
display: -webkit-box;
/* 文字显示两行 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow:hidden;
day01
1.移动端特点介绍
1.移动端和pc端的区别
1.屏幕不一样
2.操作方式
1.pc端有版心 可以随心所欲的操作
2.移动端操作区域小，不能设置版心，网页宽度多数为100%
2.分辨率
1.逻辑分辨率
逻辑分辨率是由软件（驱动）决定的，逻辑分辨率会有很多个值
2.物理分辨率
固定只有一个出场值。物理分辨率是生产屏幕时就固定的，它是不可被改变的
思考：制作网页参考物理分辨率还是逻辑分辨率？
逻辑分辨率
3.视口
默认状态下，手机端网页的宽度是980 视口：约束HTML网页的尺寸 跟设备尺寸一样
meta标签
目标：使用meta标签设置视口宽度，制作适配 不同设备宽度的网页
-
手机屏幕尺寸都不同，网页宽度为100%
-
网页的宽度和逻辑分辨率尺寸相同
-
4.二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
注意：二倍图使用在像素大厨开发中要选择2倍图
2.字体图标
目标：使用字体图标技巧实现网页中简洁的图标效果
➢ 字体图标展示的是图标，本质是字体。
➢ 处理简单的、颜色单一的图片
字体图标的优点：
➢ 灵活性：灵活地修改样式，例如：尺寸、颜色等
➢ 轻量级：体积小、渲染快、降低服务器请求次数
➢ 兼容性：几乎兼容所有主流浏览器
➢ 使用方便：
- 下载字体包
- 使用字体图标
- 图标库 Iconfont：https://www.iconfont.cn/
拓展：字体图标库
- 阿里 iconfont
- icoMoon
基本使用
使用字体图标 – 类名：
-
引入字体图标样式表
-
调用图标对应的类名，必须调用2个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名
3.transform平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面 转换
➢ 改变盒子在平面内的形态（位移、旋转、缩放）
➢ 2D转换
平面转换属性：
➢ transform
注意点：transform注意层叠的问题！！同一属性多次出现要用复合属性！！
3-1 位移：translate
目标：使用translate实现元素位移效果
语法 transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
➢ 像素单位数值
➢ 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
➢ translate()如果只给出一个值, 表示x轴方向移动距离
➢ 单独设置某个方向的移动距离：**translateX() & translateY() **（XY都是大写）
位移-绝对定位居中
目标：使用translate快速实现绝对定位的元素居中效果
//核心代码
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
//位移取值为百分比数值，参照盒子自身尺寸计算移动距离
注意：
-
注意层叠问题
transform: translateX（100px）;
transform: translateY（100px）;
x轴方向的位移无效 被层叠了
-
行内元素设置位移是无效的
-
位移不会影响其他的元素
-
当使用百分比的时候，是基于自身来移动的，其他的都是基于父元素
3-2 旋转
目标：使用rotate实现元素旋转效果
场景：一般适用于盒子旋转（抽奖转盘）
语法：
➢ transform: rotate(角度); 默认的旋转是基于中心点
transform：rotateX()
transform：rotateY()
注意：角度单位是deg
技巧：取值正负均可
➢ 取值为正, 则顺时针旋转
➢ 取值为负, 则逆时针旋转
转换原点
目标：使用transform-origin属性改变转换原点
语法：
➢ 默认圆点是盒子中心点
➢ transform-origin: 原点水平位置 原点垂直位置;
取值：
➢ 方位名词（left、top、right、bottom、center）
➢ 像素单位数值
➢ 百分比（参照盒子自身尺寸计算）
注意点：
-
行内元素设置旋转是无效的
-
旋转不会影响其他的元素
-
transform-origin：改变 旋转中心点 left、top、right、bottom、center
具体的值
3-3 多重转换
目标：使用transform复合属性实现多形态转换
多重转换技巧：transform：translate() rotate();
注意：
-
不能拆开分别写位移和旋转
错误示范
transform：translate(600px);
transform：rotate(360deg);
因为css属性的层叠性，只有最后的旋转
-
调换顺序会改变轴向
transform：rotate(360deg) translate(600px);
旋转会改变坐标的轴向，位移是始终沿着X轴移动的，就会受影响。
如果遇到旋转，最好往最后放
- 当旋转后，坐标轴也会随之改变。
- 注意层叠问题
3-4 缩放
目标：使用scale改变元素的尺寸
语法
➢ transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
➢ 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
➢ transform: scale(缩放倍数);
➢ scale值大于1表示放大, scale值小于1表示缩小
注意点：
- 放大缩小的时候，不会影响其他的元素
- 01缩小，1 放大
3-5 倾斜
transform:skew(30deg);
transform:skewY(30deg);
4.渐变背景background-image
目标：使用background-image属性实现渐变背景效果
(渐变不是background-color！！！！！！)
渐变是多个颜色逐渐变化的视觉效果 ，一般用于设置盒子的背景
语法：
background-image:linear-gradient(
颜色1,
颜色2,
...
)
//改变渐变角度
background-image:linear-gradient(
to right//从左到右渐变 （to bottom···）
颜色1,
颜色2,
...
)
//指定区间的渐变
background-image:linear-gradient(
颜色1 0%,颜色2 20%,
...
)
//重复渐变
background-image:repeating-linear-gradient(
颜色1 0%,颜色2 10%,
...
)
上边透明 向黑色过渡
background-image:linear-gradient(
transparent,
rgba(0,0,0,.6),
)
5.动画
目标：使用animation添加动画效果
思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现步骤：
-
定义动画
方式1：
@keyframes 动画名称{
from {
属性：属性值
}
to {
属性：属性值
}
}
方式2：分区间写法(常用)
@keyframes 动画名称{
0% {}
10% {}
15% {}
100% {}
}
@keyframes 动画名称{
0% {
transform：translateX(0px)
}
10% {transform：translateX(400px)}
15% {}
100% {}
}
百分比指的是移动总路程的百分比
-
使用动画
animation:动画名称 动画花费时长;
-
举例
div {
width: 200px;
height: 200px;
background-color: aqua;
animation: move 10s;
}
/* @keyframes move {
from{
transform: translate(0px);
}
to{
transform: translate(200px);
}
} */
//分区间写法
@keyframes move {
0% {
transform: translate(0px);
}
25% {
transform: translate(500px,0px);
}
50% {
transform: translate(500px,500px);
}
75% {
transform: translate(0px,500px);
}
//也可以不写 动画执行完毕后，默认会回到原来的位置。
100% {
transform: translate(0px,0px);
}
}
如果使用translateX 这种单方向的写法，要注意层叠性的问题
5-1 动画属性
目标：使用animation相关属性控制动画执行过程
animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意：
➢ 动画名称和动画时长必须赋值
➢ 取值不分先后顺序
➢ 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
infinite 无限循环
linear 匀速
alternate 反向运动
拆分写法：太复杂 了解即可
属性
作用
取值
animation-name
动画名称
animation-duration
动画时长
animation-delay
延迟时间
animation-fill-mode
动画执行完毕时状态
forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function
速度曲线
steps（数字）：逐帧动画
animation-iteration-count
重复次数
infinite：无限循环
animation-direction
动画执行方向
alternate为反方向
animation-play-state
暂停动画
paused为暂停，通常配合：hover使用
案例-设置动画轮播图-无缝切换
使用step实现逐帧动画
animation-timing-function 速度曲线 steps(数字)：逐帧动画
目标：使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
➢ 将动画过程等分成N份[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SX5OpjUO-1675650644184)(D:\feiqiu\AppData\Roaming\feiq\Recv Files\就业班素材\3d第二天 大飞哥\images\bg.png)]
//导入运动逐帧图片
day02
1.3d空间转换 transform
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
- 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- 空间转换也叫3D转换
- 属性：transform
语法
-
transform: translate3d(x, y, z)
-
transform: translateX(值)
-
transform: translateY(值);
-
transform: translateZ(值);
取值（正负均可）像素单位数 百分比
2.透视
目标：使用perspective属性实现透视效果
思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
➢ 答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
➢ 答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
-
属性（添加给父级）
-
perpective：值
-
取值：像素单位取值，数值一般在800-1200.
-
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
perpective：800px 一个物体以800像素的距离呈现给用户。
-
作用
- 控件转换时，为元素添加近大远小、近实远虚的视觉效果。
3.立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
➢ 添加 transform-style: preserve-3d;
➢ 使子元素处于真正的3d空间
➢ 默认值flat, 表示子元素处于2D平面内呈现
呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
注意
➢ 空间内，转换元素都有自已独立的坐标轴，互不干扰
day03
1.百分比布局\流式布局
目标：能够使用百分比布局开发网页
-
百分比布局也叫流式布局（浮动类型的布局都属于流式布局）
-
效果：宽度自适应，高度固定
百分比布局跟浮动布局基本没区别，只不过百分比布局子元素的宽度不是固定宽度，是自适应的。
百分比布局怎么使用？
1.float浮动起来
2.高度写死
3.宽度：根据内容占整个屏幕视口平均的份数
4.如果有图片：图片的高度设为100% 自适应
2.flex布局/弹性布局/伸缩布局（☆）
目标： 能够使用Flex布局模型灵活、快速的开发网页
Flex布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
作用
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式
- 父元素（亲爹 爷爷不行）添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
- 弹性容器 （父级）
- 弹性盒子 (子级)
- 主轴 （默认的 水平方向的轴，x轴横向，方向从左到右）
- 侧轴 / 交叉轴 （默认垂直方向的轴）
注意：
- 父级添加了display：flex后，子级水平排列，因为默认情况下，主轴在水平方向，所以子级水平排列。
- 子级排列方向和主轴方向一致。
- 如果默认方向被改变了，要遵从被改变的方向
- flex不存在行内或行内块 即使是span也能设置大小。
- 想让侧轴居中，一定要确保直接父元素有足够的高度（例如：li的父元素ul 要设置高度，li才能设置垂直居中）
弹性盒子特点：高度弹弹弹
如果是flex布局，给子级设置多少宽高就按照多少来显示（如果父元素足够的话，如果父级不够，就发挥弹性盒子的优势，宽高都能自动伸缩）。如果不写高度，flex布局默认侧轴是拉伸，盒子的高度拉伸到和父级一样大，如果设置了高度，按照所设置的高度显示，如果侧轴对齐方式设置了center，盒子的高度由内容决定。
2-1.flex主轴对齐方式（☆）
目标：使用justify-content调节元素在主轴的对齐方式
只是主轴！！并不是调节水平方向，只不过默认主轴是水平方向！！！
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
属性值
作用
flex-start
默认值, 起点开始依次排列 （左对齐）
flex-end
终点开始依次排列 （右对齐 盒子顺序不改变）
center
沿主轴居中排列
space-around
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子之间。距离父盒子没有间距（两边贴齐，中间均分）
space-between
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子两侧（子级之间的间距是父级两端间距的二倍）
space-evenly
弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等（各个地方的间距都相等）
2-2.flex侧轴对齐方式（☆）
目标：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
1.align-items 写在父级
（添加到弹性容器 父级）
属性值
作用
flex-start
默认值, 起点开始依次排列
flex-end
终点开始依次排列
center
沿侧轴居中排列
stretch
默认值, 弹性盒子沿着侧轴线被拉伸至铺满容器（需要去掉子级的高度才有拉伸效果）
align-items：stretch 默认拉伸到侧轴的最大高度，但是需要把子级的高度去掉才有拉伸的效果
- align-items 控制侧轴 单行
- align-content 控制侧轴 多行
2.align-self 写在子级
align-self： 写在子级，控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
2-3.flex伸缩比
目标：使用flex属性修改弹性盒子伸缩比
属性
flex : 值;
取值分类
数值(整数)
注意 :作用在子级 只占用父盒子剩余尺寸 可以跟stretch做对比，stretch是纵向拉伸，
flex:先计算父级剩余尺寸，看需要把父级分成多少份（把所有flex属性值相加），每个子级占用自己对应的份数
2-4.改变主轴方向
目标：使用flex-direction改变元素排列方向
- 主轴默认是水平方向, 侧轴默认是垂直方向
- 修改主轴方向属性: flex-direction
属性值
作用
row
行，水平（默认值）
column
列, 垂直
row-reverse
行, 从右向左
column-reverse
列, 从下向上
2-5.弹性盒子换行
目标：使用flex-wrap实现弹性盒子多行排列效果
- 弹性盒子换行显示 : flex-wrap: wrap;
- 默认值是nowrap 不换行
换行之后，行与行之间有默认间距。
-
调整行对齐方式 ：align-content
- 取值与justify-content（主轴方向的值）基本相同 还有stretch值
-
align-items 单行内容侧轴对齐方式
-
align-content 多行内容侧轴对齐方式
day04 移动适配方案
移动端布局：
flex布局、百分比布局、rem布局(rem+flexible.js+less)、vw布局、响应式
移动端适配：
1.rem+媒体查询
2.flexible.js+less+rem
3.vw
4.rem+vw
1.rem
目标：能够使用rem单位设置网页元素的尺寸
rem是单位，单位是以html根字体大小的改变而改变：默认的1rem=16px
- 网页效果
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
- px单位或百分比布局可以实现吗？
- px单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
- 适配方案
- rem
- vw / vh
- rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
注意点：rem是基于html的根字体大小 只和font-size的大小有关，和后面的属性值单位px无关
举例：html字体大小是1vw，则1rem就等于1vw的大小
1-1 rem移动适配-媒体查询
目标：能够使用媒体查询设置差异化CSS样式
-
思考
- 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
- 媒体查询
- 设备宽度不同，HTML标签字号设置多少合适？
- 设备宽度大， 元素尺寸大
- 设备宽度小，元素尺寸小
-
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
-
当某个条件成立, 执行对应的CSS样式
-
写法：
-
@media (媒体特性) {
选择器 {
CSS属性
}
}
@media (width:320px) {
html {
font-size:32px;
}
}
@media (min-width:1920px){
html{
font-size: 100px !important;
}
}
-
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
-
1.使用媒体查询添加不同的根字号，视口宽度的1/10
@media (width:320px) {
html {
font-size:32px;
}
}
@media (width:375px) {
html {
font-size:37.5px;
}
}
@media (width:414px) {
html {
font-size:41.4px;
}
}
2.设置box盒子尺寸，单位rem
.box {
width:5rem;
height:3rem;
}
1-2适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
rem单位尺寸
- 确定设计稿对应的设备的HTML标签字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
- rem单位的尺寸
- 目标：计算68px是多少个rem？(假定设计稿适配375px视口)
- N * 37.5 = 68 → N = 68 / 37.5
- rem单位的尺寸 = px单位数值 / 基准根字号
1-3flexible
目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- flexible.js是手淘开发出的一个用来适配移动端的js框架。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
1-4 rem和em的区别
em
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
rem中的r意思是root（根源），这也就不难理解了。
2.less
目标：使用Less运算写法完成px单位到rem单位的转换
- 目标：使用Less语法快速编译生成CSS代码
- Less是一个CSS预处理器, Less文件后缀是.less
- 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
2-1 运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
.box {
width:100+50px;
height:5*32px;
width:(100 / 4px);
height:100 ./ 4px;
}
@import "./base.less";
@import url(./normalize.less);
// 变量 ：根字号
@rootSize:37.5rem;
.fixtop {
height: 64/@rootSize;
}
- 注意：
- 表达式存在多个单位以第一个单位为准
2-2 变量
变量：存储数据，方便使用和修改。
使用：
定义变量:
@变量名：变量值;
使用变量:
元素{
CSS属性：@变量名;
}
@c:red;
@w:200px;
@h:100px;
.box {
width: @w;
height: @h;
background-color: @c;
}
什么时候需要定义变量？
这个值不断重复使用 就建议定义变量
2-3 嵌套
父选择器{
子选择器{
子选择器{
子选择器{
......
}
}
}
&父级的同级
}
.bigbox {
width: 200px;
height: 100px;
background-color: aqua;
.box {
width: 100px;
height: 50px;
background-color: green;
p{
color: pink;
}
}
&:hover {
background-color: black;
}
&::after{
content: "1234";
}
}
2-4 函数
函数存储代码块
方式一：
定义：
.函数名(){
代码块
}
调用:
元素{
.函数名()
}
方式二：
@fn(@w,@h,@c){
width:@w;
height:@h;
background-color:@c;
}
.bigbox{
.fn(100px,200px,blue)
}
.box{
.fn(50px,20px,red)
}
// 方式一：
.fn(){
width: 200px;
height: 200px;
}
.one {
.fn();
}
.two {
.fn()
}
// 方式二
.fn(@w,@h,@c){
width: @w;
height: @h;
background-color: @c;
}
.bigbox {
.fn(100px,200px,red)
}
.box {
.fn(50px,20px,blue)
}
2-5 less导入
// 在less文件中导入其他的less 后缀名.less可以省略
@import ‘./文件名.less’;
@import url(./文件名.less);
注意：
导入css也可以用这种方式，@important非less独有，less只能用@import，注意分号结尾
2-6 导出
方法1.实现所有Less有相同的导出路径
vscode配置EasyLess插件，在设置中搜索EasyLess，在setting.json中配置导出路径
"less.compile": {
"out": "../css/"
}
方法2.控制当前Less文件导出路径
在.less文件夹中，写在代码第一行！！
// out:./bbb/abc.css
// out:“./aaa/”
禁止导出：// out:false
3.vw/vh
目标：能够使用vw单位设置网页元素的尺寸
- 相对单位
- 相对视口的尺寸计算结果
- vw：viewport width
- 1vw = 1/100视口宽度
- vh：viewport height
- 1vh = 1/100视口高度
vw单位尺寸
- 确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
- vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
4.rem和vw/vh的区别
rem
vw/vh
市场比较常见：
1. 需要不断修改html文字大小
2. 需要媒体查询media
3. 需要 flexible.js
将来(马上)趋势
1. 省去各种判断和修改
代表：
b站…
5.媒体查询
- 开发常用写法
- 媒体特性常用写法
- max-width
- min-width
@media (媒体特性) {
选择器 {
样式代码;
}
}
媒体查询宽度取值：
width：表示指定宽度下生效
min-width：表示指定最小宽度范围
max-width：表示指定最大宽度范围
and关键字：用于连接多个媒体特性
/* 视口宽度小于768px 显示粉红色*/
@media (max-width:768px) {
body {
background-color: pink;
}
}
/* 视口宽度大于1200px 显示蓝色 */
@media (min-width:1200px){
body {
background-color: skyblue;
}
}
/* 多个条件之间用and连接 */
/* 实线768-1200之间变为绿色 */
@media (min-width:769px) and (max-width:1199px) {
body {
background-color: lightgreen;
}
}
5-1 媒体查询书写顺序
目标：能够根据设备宽度的变化，设置差异化样式
媒体查询也具有层叠性
min-width（从小到大写）
max-width（从大到小写）
5-2 媒体查询link写法
5-3 媒体查询隐藏
/* 如果检测到视口宽度小鱼768px 认为是手机端，left隐藏 */
@media (max-width:768px){
.left {
display: none;
}
}
5-4 拓展 min-height和min-width
min-height/min-width 和width/height的区别：
当内容没有占满盒子的时候，min-height和min-width显示的是设置时的大小
当内容超出了盒子，width和height中的内容会溢出
当内容超出了盒子，min-width和min-height会自适应变大来适应内容
6. BootStrap框架
移动端优先(按照小屏幕写 放大后布局跟随小屏幕的样式)
目标：使用 BootStrap框架快速开发响应式网页
使用步骤
- 引入： BootStrap提供的CSS代码
- 调用类：使用BootStrap提供的样式
6-1 BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
超小屏幕
小屏幕
中等屏幕
大屏幕
响应断点
<768px
>=768px
>=992px
>=1200px
类前缀
col-xs-*
col-sm-*
col-md-*
col-lg-*
容器宽度
100%
750px
970px
1170px
- .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
- .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
- 分别使用.row类名和 .col类名定义栅格布局的行和列。
- 注意:
- container类自带间距15px;
- row类自带间距-15px
你可能感兴趣的:(css,html,前端,javascript)