• 让CSS flex布局最后一行列表左对齐的N种方法
    作者 | 张鑫旭一、justify-content对齐问题描述在CSS flex布局中,justify-content属性可以控制列表的水平对齐方式,例如space-between值可以实现两端对齐。但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。其实实现的思路和display:inline-block的两端对齐是一样的。中间的gap间隙我们使用margin进行控制。例如:.container { display: flex; flex-wrap: wrap;}.list { width: 24%; height: 100px; background-color: skyblue; margin-top: 15px;}.list:not { margin-right: calc;}此时,布局效果是这样的:方法二:根据个数最后一个元素动态margin由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。然后,借助树结构伪类数量匹配技术,我们可以知道最后一行有几个元素。
  • CSS字体,从Level 1到Level 3
    Cascading Style Sheets, level 1CSS 1定义的字体属性包括:font-family、font-style、font-variant、font-weight、font-size和font。Cascading Style Sheets Level 2 Revision 1CSS 1奠定了字体属性的格局。CSS 2.1仅对CSS 1进行了补充和扩展。CSS 2.1则详细解读了serif、sans-serif、cursive、fantasy和monospace。另外,由于font简写属性会将所有没有明确给出的值重置为相应的初始值,所以上面的声明又相当于:font-family:Times;font-style:normal;font-variant:normal;font-weight:600;font-size:12px;line-height:normal;CSS Fonts Module Level 3我们知道,从CSS3开始,CSS规范被拆成众多模块单独升级,新的需求也会作为一个新模块来立项并标准化。但最终,CSS3 Fonts和CSS3 Web Fonts合并为CSS Fonts Module Level 3。后来,ML3中涉及字体加载的内容,又独立为CSS Font Loading Module Level 3。ML3进一步细化了CSS字体属性的内涵和外延。
  • 【CSS】340- 常用九宫格布局的几大方法汇总
    对,就是类似这样的布局~目录1margin负值实现2祖父和亲爹的里应外合3换个思路 - li生个儿子帮大忙4借助absolute方位值,实现自适应的网格布局5cloumn多栏布局6grid网格布局7display:table伪表格布局8css3选择器nth-child()除非特别说明,以下几种方式的通用html结构如下:<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>除特别说明,布局中用到的css reset代码如下:/* 基础 */ .box{ background: #e4f7fd61; border: 2px solid #0786ada1; border-radius: 8px; } ul{ padding: 0; } .box li{ list-style: none; text-align: center; line-height: 200px; background: rgba; border-radius: 8px; }方法一、margin负值实现原理原理:margin负边距关键点1. 最外层的包裹元素等于:li宽度*3+li右间距*22. 如果li是右间距,则ul的margin-right为负的li间距值。外边距方向和ul设置负值的外边距方向一致。
  • 【JS】341- 移动端滚动穿透的6种解决方案
    鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案。各方法操作难易不同,分别针对弹层和body是否超出一屏可滚动等不同情况。就能阻止滚动穿透。也就是禁止整个弹窗的touchmove的默认事件,以阻止滚动穿透。适用以下场景:1、body可滚动2、触发弹层出现的按钮可以在任意位置3、弹层可以滚动简单来说,就是适用任何场景解决方案:检测touchmove事件,如果touch的目标是弹窗不可滚动区域就禁掉默认事件,反之就不做控制。但是同样的问题是,需要判断滚动到顶部和滚动到底部的时候禁止滚动。
  • 【盛派内部分享资料】本期主题:使用JavaScript HTML CSS构建跨平台桌面应用
    先上录制视频友情提示:如果公众号内视频无法显示高清视频,您也可以在小程序内观看高清视频,点击下方按钮观看:本期主题:使用JavaScript HTML CSS构建跨平台桌面应用 本次活动由盛派技术人员伏允坤主持并分享,主要内容涵盖了关于Electron的优势:基于Node生态优势不需要重复造轮子,跨平台Mac、Windows和Linux,开源项目,社区活跃,以及开发环境搭建。“周三分享”是盛派网络约定的每周三晚上定时举办的内部分享活动,活动主要由技术人员分享各方面的技术主题,并由所有参与者围绕主题进行讨论。
  • 【CSS】343- CSS Grid 网格布局入门
    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。它还能使我们在不改变任何HTML的情况下,使用 CSS 来定位和调整网格内的每个元素。现在我们将通过 Grid 布局来实现 3×3 布局。CSS 代码:.game-board { display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px 200px;}在这里,我还使用了其他两个属性。grid-template-rows属性允许我们指定网格中的行数及行的高度。fr 单位(等分)fr是为网格布局定义的一个新单位。CSS 代码:.game-board{ display: grid; grid-template: repeat / repeat;}看,只需使用 2 行代码,就可以使用网格布局创建 3×3 网格。
  • 【第1721期】Element-UI 技术揭秘 — Layout布局组件的设计与实现
    前言Element-UI 技术揭秘系列第二篇。element-ui 也实现了类似 Bootstrap 的栅格布局系统,那么基于 Vue 技术栈,它是如何实现的呢?需求分析和 Bootstrap 12 分栏不同的是,element-ui 目标是提供的是更细粒度的 24 分栏,迅速简便地创建布局,写法大致如下:<el-row> <el-col>aaa</el-col> <el-col>bbb</el-col></el-row><el-row> ...</el-row>这就是二维布局的雏形,我们会把每个列的内容写在之间,除此之外,我们还需要支持控制每个 <el-col> 所占的宽度自由组合布局;支持分栏之间存在间隔;支持偏移指定的栏数;支持分栏不同的对齐方式等。了解了 element-ui Layout 布局组件的需求后,我们来分析它的设计和实现。了解了组件是如何渲染之后,我们来给 Layout 组件扩展一些 feature 。
  • 面试问我:在浏览器输入 URL 回车之后发生了什么?我竟然回答不上来...
    大致流程URL 解析DNS 查询TCP 连接处理请求接受响应渲染页面 01URL 解析 地址解析:首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词,并且根据你输入的内容进行自动完成、字符编码等操作。HSTS由于安全隐患,会使用 HSTS 强制客户端使用 HTTPS 访问页面。在建立连接前,会先进行 TCP 三次握手。否则服务器会按照规则把请求重写到 一个 REST 风格的 URL 上。05浏览器接受响应 浏览器接收到来自服务器的响应资源后,会对资源进行分析。
  • CSS字体:字体特性
    CSS Font Module Level 3新增了字体特性属性,用于扩展font-variant,以支持丰富OpenType字体特性,如连字。风格性的字体特性分两类:影响与周围字符关系的和影响字形选择的。为了支持这些字体特性,ML3扩展了font-variant,基于它增加了很多子属性用于控制相应的字体特性,比如font-variant-ligatures、font-variant-position、font-variant-caps、font-variant-numeric、font-variant-east-asian。因为这些字体特性都与风格有关,所以字体特性的英文也叫stylistic font features。none表示明确禁用任何形式的连字和上下文构形。all-petite-caps大写字母和小写字母都显示为短身大写字母。unicase大写字母转换为小型大写字母与小写字母混合显示。
  • CSS设置居中的方案总结-超全
    前几天面试一家公司,被问到垂直居中的方法,我只答出了margin、table-cell、flex三种。回来之后觉得特别惭愧,于是整理了一下居中的方案做个记录,希望对大家也有帮助。块级元素居中 html代码部分<divclass="parent"><divclass="child">child</div></div>行内元素居中 html代码部分<divclass="parent"><spanclass="child">child</span></div>水平居中01 行内元素 text-align: center;.parent{text-align:center;}02 块级元素 margin: auto;低版本浏览器还需要设置 text-align: center;.parent{text-align:center;}.child{width:100px;margin:auto;border:1pxsolidblue;}由于本文主要想记录的是垂直居中的方案,这里水平垂直的其他方案就不做过多记录了。.parent{padding:5%0;}.child{padding:10%0;background:blue;}06 块级元素:display: table-cell.parent{width:600px;height:200px;border:1pxsolidred;display:table;}.child{display:table-cell;vertical-align:middle;}或:这个方案是在知乎看到的,原文说是淘宝团队的方案:用 CSS 实现元素垂直居中,有哪些好的方案?
  • 【CSS】352- 有趣的CSS弹跳动画
    .box{position:relative;}.box:before{content:'';position:absolute;z-index:2;top:60px;left:50px;width:50px;height:50px;background:#c00;border-radius:2px;transform: rotate;}.box:after{content:'';position:absolute;z-index:1;top:128px;left:52px;width:44px;height:3px;background:#eaeaea;border-radius:100%;}CSS动画  画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。@-webkit-keyframes box{ 0%{top:50px;transform: rotate; /**/ } 20%{border-radius:2px; } 50%{top:80px; transform: rotate;border-bottom-right-radius:25px; } 80%{border-radius:2px; } 100%{top:50px;transform: rotate; }}  举一反三,我们也可以把角度反转,就会往另外一边弹跳  如果我们把动画里头添加linear,就会变成线性的连续方式喔。
  • 50个好用的前端框架,千万收好以留备用!
    不管是前端应用还是后端应用,也不论使用的是哪种框架,只要项目有一个 package.json ,即可进行管理。如果你的团队规模较小,但又想要和那些使用比较费力的主流方案的较大团队竞争,那么这是一个比较适合的前端框架方案。
  • 【CSS】364- 让CSS flex布局最后一行左对齐的N种方法
    具体方法有两个:方法一:最后一项margin-right:autoCSS代码如下:.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { background-color: skyblue; margin: 10px;}/* 最后一项margin-right:auto */.list:last-child { margin-right: auto;}最终效果如下GIF:方法二:创建伪元素并设置flex:auto或flex:1CSS代码如下:.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { background-color: skyblue; margin: 10px;}/* 使用伪元素辅助左对齐 */.container::after { content: ''; flex: auto; /* 或者flex: 1 */}最终效果如下GIF:这两个方法我合在一个demo页面了,您可以狠狠的点击这里:flex子元素宽度不固定最后一行左对齐demo四、如果每一行列数不固定如果每一行的列数不固定,则上面的这些方法均不适用,需要使用其他技巧来实现最后一行左对齐。
  • WebView适配文章黑夜模式
    为了能够让简书,掘金,CSDN,公众号的文章展示成黑夜模式,需要webview做相关适配。项目地址https://github.com/iamyours/Wandroid简书reader-night-mode简书网站是有黑夜模式的,所以实现起来相对简单。但是默认用webview加载简书文章时,它显示的是日间模式效果。猜测简书的黑夜模式和这个class样式有关,那我们可以通过WebView.setWebContentsDebuggingEnabled调试webview,在chrome浏览器上输入chrome://inspect,然后就可以调试web页面了。我们打开一篇简书文章,通过调试器我们将body的样式替换成reader-night-mode,就会发现当前文章已经变成黑夜模式的了。正则替换css通过刚刚的调试,发现这些效果对应的css样式是在当前html页面的head标签下,并不是通过css文件形式。
  • 我和我亲爱的祖国(用CSS来为祖国母亲庆生)
    相信大家最近已经被 《我和我的祖国》 这首歌给刷屏了,鱼头每次在听到这首歌的时候,总会感慨万千,我们伟大的新中国,这70年真的经历了太多太多了。但是就是在一代又一代的人不懈的努力下,如今的中国,已经成为了各个国家,乃至西方列强所无法忽视的强大存在。从辉煌到屈辱中国是世界上文明发达最早的国家之一,有将近5000年的有文字可考的历史。本文不打算详细讲解这个属性,有兴趣的可以通过MDN 或者 CSS clip-path 生成器 来深入了解。
  • 【CSS】367- 用 CSS3 制作导航条和毛玻璃效果
    简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果。导航条是梯形形状的。把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。transform-origin是用于指定元素的旋转中心点位置。注意以下几个问题:1.前四个问题与平行四边形导航条的制作思路基本相同。文字还是会按照默认效果显示。
  • 前端基础篇之CSS世界
    戳蓝字「前端技术优选」关注我们哦!在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。另外本文会随着作者对css的更深入理解而逐步更新,希望到最后能够文如标题展现出真正的css世界。流“流”又叫文档流,是css的一种基本定位和布局机制。无论内联元素还是块级元素,height: auto都是呈现包裹性,即高度由子级元素撑开。这就是流体布局的根本所在。内在盒子是决定元素内部一些属性是否生效的盒子。从表现来说,内联元素的典型特征就是可以和文字在一行显示。line-height是作用在行框盒子上的,并最终决定高度。
  • 【CSS】378- [译]44个 CSS 精选知识点
    写在前面一个周五的晚上,闲来无事整理下自己的 github,今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾过了一遍,其中一些是我们常用的一些知识点,另外也包含一些比较新的属性的应用,知识点挺多的,为了让大家看起来更方便些,然后又花了点时间翻译成中文。精选的有用CSS片段集合,您可以在30秒或更短的时间内理解这些片段。本 CSS 精选集合共分为5类 - 布局、视觉、动画、交互、其他。浏览器支持情况99.5%需要前缀才能获得全面支持。
  • 【CSS】381- 提升你的CSS选择器技巧
    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器。所以我就对CSS选择器进行了深入的回顾,并且遇到了一些有趣的,对我来说是新的或者以前不知道的一些用法。我还发现了一些很酷的新选择器,将来可用但尚未被广泛支持。接下来的两个伪类选择器匹配拥有取值范围的元素。最后, :placeholder-shown 匹配占位文字处于显示状态的元素,当输入内容后,占位文字不再显示时,该元素将不会被匹配;应谨慎使用此选择器,因为它尚未得到广泛支持。结构选择器结构选择器非常强大,它是基于元素在DOM中的位置进行匹配。
活跃用户
《中国银行保险报》是中国银行保险监督管理委员会主管唯一工作日报。
专注于.NET Core的技术传播。在这里你可以谈微软.NET,Mono的跨平台开发技术。在这里可以让你的.NET项目有新的思路,不局限于微软的技术栈,横跨Windows,Linux 主流平台
这里有技术、算法、职场、感悟、面经、资源,一线大厂干货,10万 + 程序员都在看,做一个有趣的帮助程序员成长的公众号,每天早上8点20,第一时间与你相约。
《前端剑解》 —— 是由海之林技术团队维护的前端公众号,关注前端技能的发展;【前端面试每日3+1】 —— 365天,每天早上5点发布面试题(html, css, js, 软技能),以面试题来驱动学习,提倡每日学习与思考,每天进步一点!
号主是来自后厂村的十年资深架构师,技术leader,著有两本技术畅销书,多个业界顶级技术大会的特邀演讲嘉宾和出品人。除了分享技术干货,还关注程序员的技术生活、职场晋升、逆袭成长,助力10万+程序员崛起。
Flink/Spark/Hadoop/数仓开发,干货,面试,资料下载,源码解读等
《科技日报》是富有鲜明科技特色的综合性日报,是面向国内外公开发行的中央主流新闻媒体,是党和国家在科技领域的重要舆论前沿,是广大读者依靠科技创造财富、提升文明、刷新生活的服务平台,是中国科技界面向社会、连接世界的明亮窗口。
华为技术有限公司官方微信帐号
每天分享 Java技术栈 干货,路虽远,行则必至。
“早春江上雨初晴,杨柳丝丝夹岸莺。画舫烟波双桨急,小桥风浪一帆轻”,这是机器通过学习中华诗词然后以”早春“为题所写的一首诗。很多人非常恐惧AI的发展对人类的冲击,但我坚信AI会让世界变得更加美好,生活是美好的,所以我们一起,勇敢AI吧!
一个专注侃侃计算机视觉方向的公众号。计算机视觉、图像处理、机器学习、深度学习、C/C++、Python、诗和远方等。
程序员职业规划:职场晋升之路;探讨程序员转化转管理之路。程序员学习管理之道:团队管理、项目管理、管理工具的推荐和使用经验。
乔哥是百度java工程师,专注Java相关技术:Java面试、Spring全家桶、微服务、Mysql、集群、分布式、中间件、Linux、网络、多线程等,致力于Java全栈开发!
西安交大品牌讲座“学而讲坛”创始人和负责人,致力于打造一个跨界融合的学术共同体。北大文学博士,西安交大国家大学生文化素质教育基地副主任,人文学院高培中心主任,著有《陕西文化产业实战研究》、《视觉素养导论》、《艺术导论》、《读图范式》等。
专注于分享互联网技术文章。笔者待过BAT等一线互联网公司,文笔流畅,酷爱写作与编码,期待你的关注!