- 博客(21)
- 收藏
- 关注
RSS订阅转载 一文读懂CSS布局（二） -- Grid布局
简介Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局正文gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即container -> item注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素下面从容器属性和项目属性==两大块来记录grid布局中的相关属性..
2021-06-21 15:42:42
605
转载 一文读懂CSS布局（一） -- flex布局
简介Flex布局，也叫"弹性布局"，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}复制代码对于行内元素也可以使用行内flex布局注意：这个点之前面试被面到过，可以留意一下.box{ display: inline-flex;}复制代码使用时应该注意些什么？对于部分浏览器有兼容性问题，需要做兼容性处理。（IE：“你直接报我身份证算了”） 在父级元素设置为flex布局后，子元素的fl
2021-06-21 15:03:45
646
转载 CSS ::marker 让文字序号更有意思
本文将介绍 CSS 中一个比较有意思的伪元素::marker，利用它，我们可以让我们的文字序号变得更加的有意思！什么是 ::markerCSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。正常而言，我们有如下结构：作者：chokco..
2021-06-21 09:30:58
395
翻译 css3动画属性解析:【transform -变形】
前面几篇文章我们已经一起学习了animation和transition 的使用，今天我们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是很多初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，所以我把它们放到一块来写了，小伙伴们可不要混淆啊。...
2021-06-19 15:34:26
701
翻译 css3动画属性解析:【animation -动画】
二：css3动画之--------animation语法（简写方式）：animation: name duration timing-function delay iteration-count direction play-state;div{ animation:mymove 2s ease-in-out 3s infinite alternate running;}那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示...
2021-06-19 10:53:50
1582
原创 纯css3 制作loading转圈效果
CSS部分：首先设置div的长和高为120px，然后将border-radius:设为50%，使其变为圆形，用border: 16px solid #f3f3f3设置圆圈的宽度和颜色，最后通过 border-top属性，设置一个可以滚动的部分。基本样式完成以后，就是用CSS3中的animation动画，让其无限循环转动，具体代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-.
2021-04-23 09:04:27
933
原创 spread和剩余参数rest的区别
当我们在代码中看到"..."时，它要么是 rest 参数，要么就是 spread 语法。有一个简单的方法可以区分它们：若...出现在函数参数列表的最后，那么它就是 rest 参数，它会把参数列表中剩余的参数收集到一个数组中。 若...出现在函数调用或类似的表达式中，那它就是 spread 语法，它会把一个数组展开为列表。使用场景：Rest 参数用于创建可接受任意数量参数的函数。 例如，我们需要把所有的参数都放到数组args中：（Rest 参数必须放到参数列表的末尾）...
2021-04-15 09:42:01
162
原创 css样式li不显示的原因：
用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候， list-style不起作用，不显示前面的点、圈等样式。解决办法：在ul或li内加入样式：list-style-position: inside; 即可。注意适当调节padding位置使之最适合。列表的样式：disc : CSS1 实心圆circle :CSS1 空心圆square :CSS1 实心方块decimal : CSS1 阿拉伯数字lowe
2021-03-10 17:03:43
1057
原创 map标注引入图片及修改引入图片的大小
map.centerAndZoom(point, 15);var myIcon = new BMap.Icon("${systemConfig.cssUrl}/static/kzguicom/wap/images/mapIcon.png",newBMap.Size(28,34),{//图片大小 anchor: new BMap.Size(10,10) //标注相对point的偏移位置});myIcon.setImageSize(new BMap.Size(28...
2021-03-09 11:23:03
452
原创 jq获取元素距顶部距离
//元素到文档顶部距离$('element').offset().top;//当前窗口滚动条的高度$(window).scrollTop();
2020-12-22 14:45:31
1409
原创 css如何使图片固定为正方形 div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？
一个元素要为正方形，height = width就可以了#box { width: 100%; height=width; }显然这样是不行的；那要怎木样布局呢？ #divBox { width: 100%; height: 0; padding-bottom: 100%; position: relative; border:1px solid #eee; } #divBox img { positi.
2020-12-17 08:44:56
1029
翻译 css overflow 与锚点定位
长文警告！！！锚点，通俗点的解释就是可以让页面定位到某个位置的点。其在高度较高的页面中经常见到，如百度百科页面中标题条目的快速定位效果，如图 1 所示。点击其中任意一个标题链接，比如说“发展历程”，页面就会快速定位到“发展历程”这一块内容，同时地址栏中的 URL 地址最后多了一个#1，如图 2 所示。我所知道的基于 URL 地址的锚链（如上面的#1，可以使用 location.hash 获取）实现锚点跳转的方法有两种，一种是<a>标签以及 name 属性，还有一种就是使用
2020-12-09 10:11:27
699
翻译 关于浏览器的滚动条的几个小而美的结论。
（1）在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签。验证很简单，新建一个空白页面，此时<body>标签的默认 margin 值是.5em，如果滚动条是由<body>标签产生的，那么效果应该如图 1 所示这般边缘留有间隙。但是最后实现结果却是图 2所示的这样没有间隙。图 1 <body>产生滚动条的假想效果 图 2 实际效果无间隙，滚动条由<html>产生所以，如果我们想要去除页面默认
2020-12-09 08:32:48
409
翻译 CSS 世界的结界 ——BFC
BFC 全称为 block formatting context，中文为“块级格式化上下文”。“结界”这个词大家应该都理解的，指通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力。BFC 的特性表现如出一辙。大家请记住下面这个表现原则：如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的；BFC 元素也可以用来清除浮动的影响，因为如
2020-12-08 17:30:55
110
原创 css实现元素展开收起时能有明显的高度滑动效果
传统实现可以使用 jQuery 的 slideUp()/ slideDown()方法，但是，在移动端，因为 CSS3 动画支持良好，所以移动端的 JavaScript 框 架都是没有动画模块的。此时，使用 CSS 实现动画就成了最佳的技术选型我们的第一反应就是使用 height + overflow:hidden 实现。但是，很多时候，我们展 开的元素内容是动态的，换句话说高度是不固定的，因此，height 使用的值是默认的 auto， 应该都知道的 auto 是个关键字值，并非数.
2020-12-08 11:30:15
1188
原创 生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10.
2020-12-08 09:18:18
245
原创 css用border来绘制三角形
div { width: 0; height: 0; border: 72px solid; border-color: transparent transparent transparent orange; }
2020-12-08 08:46:44
75
原创 锚链接平滑跳转并且去掉#
$(function(){ $('a[href*=#]').click(function() { console.log(this.pathname) if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(...
2020-12-08 08:29:11
258
原创 js回到顶部或者跳转到页面某个位置高度平滑跳转
window.scrollTo({ top: 750, behavior: "smooth" });
2020-12-08 08:27:21
926
原创 js如何直接打开百度地图app进行导航
只需要知道自己要到的目的地的经纬度，就可以直接打开地图；注意：经纬度位置不要写反了window.location.href ="http://api.map.baidu.com/marker?location=29.539792,106.519852&title=泉州xx科技有限公司&content=泉州xx科技有限公司&output=html"...
2020-12-08 08:14:55
1500
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人