- 博客(27)
- 收藏
- 关注
RSS订阅原创 grid网格布局总结
grid网格布局diaplay：；gridinline-grid容器（父元素）属性：划分行：grid-template-rows单位：px%fr重复：repeat（行数，fr）划分列：grid-template-columns单位：px%fr重复：repeat（列数，fr）综合写法：grid-template：repeat（行数，fr）/repeat（列数，f...
2020-03-26 22:11:42
224
原创 移动端rem、vw布局案例1
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=...
2020-03-25 23:06:20
229
原创 多张图片实现gif动画animation效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-24 19:45:02
1588
原创 利用伪类选择器：nth-of-type实现多个列表的小图标
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-24 19:25:58
551
原创 flex实现图文布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-24 19:22:18
448
原创 利用flex弹性盒实现圣杯布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-24 19:19:31
192
原创 移动端视口及vw+rem布局知识总结
视口：浏览器显示页面内容的屏幕区域视口分为：布局视口 视觉视口 理想视口布局视口：一般移动端设备的浏览器都默认设置了一个布局视口，为了解决早期pc端页面在移动端上的显示问题苹果 安卓基本上设置这是视口的分辨率980px视觉视口：你看到的网页区域，指的是网址的区域通过缩放去操作视觉视口不会影响布局视口理想视口：1：是网站在移动设备浏览器中最理想的一种状态（浏览和阅读宽度设定的）...
2020-03-24 19:11:30
223
原创 多列布局实现瀑布流结构布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-23 21:58:33
353
原创 利用flex实现两栏布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-23 21:48:25
795
原创 flex子元素属性、多列布局、响应式布局的优缺点及媒体查询
flex 项目（子元素）属性：order：；项目的优先排列顺序，数值越大，越靠到后边去 （可以为负数）flex：1； 剩余的空间都给指定子元素（综合写法）flex-grow： 数字不带单位，定义项目剩余的宽度进行扩张（放大）flex-shrink： 数字不带单位，，项目总宽度超出容器时的缩小设置 0 本身的大小，不缩小也不放大 1 平均分配flex-basis：...
2020-03-23 21:45:06
376
原创 用flex弹性盒子实现骰子各个面
原来我们骰子的各个面，可以用定位position来做。当我们学习了弹性盒子，我们就可用flex来实现。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi...
2020-03-21 17:11:56
462
原创 calc() 函数、pointer-events、怪异盒模型、弹性盒知识总结
calc（x - y）函数calc() 函数用于动态计算长度值每个运算符前后都需要留一个空格pointer-events：一般用于遮罩层autonone：你让点击无效 穿透当前元素（一般用于遮罩层）怪异盒模型标准盒模型：宽高是独立的，内边距是独立的，会把元素撑大，边框是独立的注：宽高不包含内边距和边框怪异盒模型： box-sizing：border-box；宽高包含内边距和边...
2020-03-21 11:09:43
158
原创 文本阴影、盒子阴影、字体图标、背景及背景图扩展、css圆角知识总结
文本阴影：text-shadow:水平阴影 垂直阴影 模糊度 颜色多组阴影时：text-shadow：第一组阴影，第二组阴影，第三组阴影；在单词内部换行word-wrap：；normol 默认值，不允许在单词内部换行break-word 允许单词在内部换行word-break：；（比较粗暴强制） break-all 允许单词内部换行 keep-all 允许在换行点换...
2020-03-19 23:09:39
143
原创 属性选择器、伪类选择器、层级选择器
渐进增强：（作用范围：从小到大）先保证最基本的功能 > 用户体验提升优雅降级：（作用范围：从大到小）先针对版本较高的设备进行项目构建，保证用户体验的完美牺牲一些效果，保证最基本的功能选择器（选择符）：id class 类型（div span） 后代选择器 伪类选择器 伪元素选择…属性选择器： e[attr]{} 选中e元素，且e元素有attr属性， e[a...
2020-03-19 01:06:52
176
原创 css3实现动图效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-14 23:23:05
215
原创 css-3d、动画相关总结
倾斜：transform：skew（水平倾斜）；transform：skew（水平,垂直）；transform：skewX（）；transform：skewY（）；目标选择器：选择器：target{} 当元素被点击时的指向，发生样式的改变URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素。:target 选择器可用于选取当前活动的目标元素。c...
2020-03-13 23:20:42
115
原创 css折扇效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
2020-03-13 22:03:58
152
原创 学习总结：浏览器兼容性、渐变、过渡、css3中的2d变形
css3属性:预览版，还没有一个正式的最终版，多以有很多的兼容性问题，浏览器不识别浏览器为了使这些浏览器兼容，每一个浏览器厂商都会提供一个专属于自己的浏览器语法规则，浏览器兼容前缀主流浏览器：谷歌 火狐 苹果 欧朋 IE浏览器前缀-weklit- 谷歌-moz- 火狐-ms- IE-o- 欧朋box-shadow:水平偏移量 垂直偏移量 模糊度 阴...
2020-03-12 23:28:10
840
原创 关于psd文件切图流程和重置css的有关代码
psd文件切出png图流程1：设置移动工具，勾上自动选择2：选中指定的图片区域3：背景眼睛点暗，指定图层背景为透明4：正常切图5：点黄选中区域，如果有多个时，应该按下shift按键6：保存的格式为png-24css重置代码@charset “utf-8”;/申明编码集/html,body,button,code,dd,div,dl,dt,fieldset,figure,form...
2020-03-11 23:10:00
128
原创 表格相关属性、表单、bfc问题
表格：thead 表头tbody 表体（浏览器默认加上，在书写时一定要写上）tfoot 表尾<colgroup span="2"></colgroup> 给列表的列分组 span是几就分几组caption 表格标题border-spacing 单元格之间的间距，必须给table添加 border-collapse 单元格之间的间距...
2020-03-10 22:46:30
90
原创 宽高自适应，清除浮动
宽度自适应默认宽度为100%的元素 width：单位为%百分比高度自适应不设置height高度，让内容撑起来 height:;设置百分比，（前提是设置HTML，body{width：100% height：100%}）最小高度min-height 大于等于最大高度max-height 小于等于最小宽度min-width 大于等于最大宽度max-height 小于等于问题：父...
2020-03-09 23:44:42
124
原创 定位。锚点
普通流：从上至下，从左至右浮动流：元素添加了float；定位流：添加了定位属性定位position static 默认值， 设置坐标无效 absolute 绝对定位 特征 1：脱离文档流，不占位置 2：默认参考html的00点（浏览器零点） 3：如果有父级，且父级有定位，那就参考父级...
2020-03-09 09:11:29
68
原创 overflow、white-space、text-overflow以及元素类型和类型转换
span元素需要设置float，才能用margin，padding移动overflow 文本溢出设置hidden 超出隐藏scroll 超出时，滚动查看（未超出也会有滚动机制）auto 超出时，滚动查看（自适应，超出时才有滚动机制）inherit 继承父级的overflow设置 white-space 文本空白 normal 默认值 pre 保留原格式，不会强...
2020-03-06 09:00:43
1537
原创 ps切图与版心页面布局注意问题
版心是页面内容的展示区域有具体宽度 width：px；左右居中 margin{0 auto}Ps切图方式 方式一 矩形选框工具选中区域 > ctrl+c > ctrl+n > ctrl+shift+alt+s 存储 方式二 切片工具 > 选中区域 > ctrl+shift+alt+s 存储页面布局时同级元素之间只能使用margin...
2020-03-05 08:44:04
1048
原创 盒模型中的magin和padding学习
margin 外边距：改变元素外边的间距padding 内边距：改变元素与内容的间距padding:10px;一个值 控制四个方向的值padding：10px 20px;两个值，上下 左右；padding：10px 20px 30px；三个值， 上 左右 下；padding：10px 20px 30px 40px；四个值， 上 右 下 左；顺时针方向改变； padding...
2020-03-03 17:48:12
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人