2022年1月23日
前端基础进阶6
摘要： 前端基础进阶 长度单位 vw / vh 使用vw单位设置网页元素的尺寸 相对单位 相对视口的尺寸计算结果 vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度 <!DOCTYPE html><html lang="e 阅读全文
posted @ 2022-01-23 21:20 守漠待花开 阅读(42) 评论(0) 推荐(0)
前端基础进阶5
摘要： 前端基础进阶 移动适配 移动适配 rem ： 目前多数企业在用的解决方案 vw / vh：未来的解决方案 rem移动适配 使用rem单位设置网页元素的尺寸 长度单位 网页效果 屏幕宽度不同，网页元素尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应， 阅读全文
posted @ 2022-01-23 19:32 守漠待花开 阅读(228) 评论(0) 推荐(0)
前端基础进阶4
摘要： 前端基础进阶 Flex布局 主轴方向 使用flex-direction改变元素排列方向 Flex布局模型中，弹性盒子默认沿着哪个方向排列？ 水平方向。 如何实现内容垂直排列？ 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction <!DOCTYPE html>< 阅读全文
posted @ 2022-01-23 19:29 守漠待花开 阅读(168) 评论(0) 推荐(0)
2022年1月21日
前端基础进阶3
摘要： 前端基础进阶 移动端特点 头脑风暴 PC端网页和移动端网页的有什么不同？ PC屏幕大，网页固定版心 手机屏幕小， 网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 谷歌模拟器 使用谷歌模拟器调试移动端网页 屏幕尺寸 概念 指的是屏幕对角线的长度，一般用英寸来度量 分辨 阅读全文
posted @ 2022-01-21 22:18 守漠待花开 阅读(74) 评论(0) 推荐(0)
前端基础进阶2
摘要： 前端基础进阶 空间转换 使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换 属性：transform 空间位移 使用translate实现元素空间位移效果 语法 阅读全文
posted @ 2022-01-21 22:13 守漠待花开 阅读(66) 评论(0) 推荐(0)
2022年1月20日
前端基础进阶1
摘要： 前端基础进阶 字体图标 — Iconfond 使用字体图标技巧实现网页中简洁的图标效果 案例：淘宝购物车 布局标签 li > span * 3 字体图标 引入字体图标样式表 购物车和箭头span调用字体图标类名 <!DOCTYPE html><html lang="en"><head> <meta 阅读全文
posted @ 2022-01-20 22:30 守漠待花开 阅读(94) 评论(0) 推荐(0)
2022年1月18日
CSS补充样式
摘要： CSS补充样式 CSS精灵图 精灵图的使用步骤： 1、创建一个盒子，设置盒子的尺寸和小图尺寸相同 2、将精灵图设置为盒子的背景图片 3、修改背景图位置 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y <!DOCTYPE html><htm 阅读全文
posted @ 2022-01-18 19:33 守漠待花开 阅读(85) 评论(0) 推荐(0)
CSS定位装饰
摘要： CSS定位装饰 定位 网页常见布局方式 标准流 1、块级元素独占一行 → 垂直布局 2、行内元素/行内块元素一行显示多个 → 水平布局 浮动 可以让原本垂直布局的 块级元素变成水平布局 定位 1、可以让元素自由的摆放在网页的任意位置 2、一般用于 盒子之间的层叠情况 定位的常见应用场景 可以解决盒子 阅读全文
posted @ 2022-01-18 15:24 守漠待花开 阅读(19) 评论(0) 推荐(0)
2022年1月17日
CSS浮动
摘要： CSS浮动 结构伪类选择器 结构伪类选择器 通过标签的关系去找标签 注意点 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge 阅读全文
posted @ 2022-01-17 10:26 守漠待花开 阅读(55) 评论(0) 推荐(0)
2022年1月16日
CSS盒子模型
摘要： CSS盒子模型 CSS三大特性 优先级的介绍 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式： 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 注意点： 1、!important写在属性值的后面 阅读全文
posted @ 2022-01-16 17:15 守漠待花开 阅读(86) 评论(0) 推荐(0)