CSS
万少博
2016-2026走好职业生涯技术道路十年的每一步,用技术改变生活。
展开
-
CSS三列布局中间自适应
最新更新时间:2020年08月01日09:09:51《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:本文汇总了常见的六种布局方案:浮动、绝对定位、flex、calc函数、圣杯布局、双飞翼布局两侧左右浮动,中间设左右margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2020-08-01 10:20:42 · 428 阅读 · 0 评论 -
CSS伪元素巧用
最新更新时间:2020年07月28日09:28:37《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:css伪元素有四个::first-line 伪元素用于向文本的首行设置特殊样式、:first-letter 伪元素用于向文本的首字母设置特殊样式、:before 伪元素可以在元素的内容前面插入新内容、:after 伪元素可以在元素的内容之后插入新内容:first-line 和 :first-letter 只能用于块级元素:before 和 :after 的display属性默认是inl原创 2020-07-28 11:44:24 · 697 阅读 · 0 评论 -
顶部(左侧)元素固定高度(宽度),内容(下方/右侧)元素撑满剩余高度(宽度)
最新更新时间:2019年08月12日10:42:15《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:css布局相关知识顶部元素固定高度,下方内容元素撑满剩余高度dom结构如下<body> <div id="parent"> <div id="child1"></div> <div id="chi...原创 2019-08-12 11:03:00 · 535 阅读 · 2 评论 -
css实现缕空遮罩层
最新更新时间:2019年05月13日13:41:01《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩常规遮罩层<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2019-05-13 14:18:09 · 3383 阅读 · 0 评论 -
CSS3动画
360°循环旋转.App-logo { animation: App-logo-spin infinite 20s linear; height: 60px;}@keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}原创 2018-08-04 22:58:11 · 503 阅读 · 0 评论 -
CSS面试集锦
更新时间:2017年3月31日14:46:04一.布局原理:元素浮动 || 绝对定位 均可以使元素脱离常规文档流方案:尺寸和定位,即所有与尺寸和定位有关的属性,都可以用来布局。“浮动”,可形象化理解为,当你将木块压入水下,它会向水面浮动,直到浮力等于重力,对于浮动元素而言,当两个元素的border接触时浮动终止。注意:浮动≠布局,浮动起初仅仅用于文字环绕的样式,而布局是一个设计原创 2017-01-09 15:03:08 · 678 阅读 · 0 评论 -
CSS百问
最近更新时间:2018年3月16日15:08:21 当已经适应了工作状态时,时间是可以自由支配的,因此可以学习一些自己没有用到的技术汇总。1、css实现一条有两种颜色的线条#line{ border-left: 50px solid red; border-right: 200px solid #ccc; height: 2px; wi...原创 2017-09-15 16:53:14 · 337 阅读 · 0 评论 -
CSS文字排版
时间:2017年4月27日13:35:27 对于前端开发人员来说,虽然大部分时间用来处理 页面布局 和 业务逻辑 问题,但对于细小的环节也需要学习和研究。最近发现,文字排版 也是一个值得关注的话题,因为与文字排版相关的CSS属性比较多。 与文字排版相关的属性如下:letter-spacing:normal | length | inherit;增加或减少原创 2017-04-27 13:52:53 · 1647 阅读 · 0 评论 -
CSS-样式重置+公共样式
最近更新时间:2017年7月6日11:01:29 作为前端工程师,需要不断的去总结和积累有共性的代码,这对于开发来说事半功倍。在书写样式文件时,公共样式和样式重置(样式初始化)每次都会用到。1、公共样式//按钮公共样式.btn{display: inline-block; font-size: 30rpx; border-radius: 4rpx; col原创 2017-07-06 11:26:41 · 3157 阅读 · 0 评论 -
前端布局问题汇总
在实际项目的开发过程中,经常会遇到很多很庞杂的问题需要实时处理,加上项目时间节点的控制,处理问题的效率和最优方案的选取是程序员需要不断提升的技能。因此,每一位程序员都需要建立自己的学习记录文档或知识点汇总文档,方便自我能力提升的循序渐进。1.常见复选框的设计方案,HTML结构如下:合并2.判断复选框是否选中的jQuery代码如下:if ( elem.checked ){}else{原创 2017-01-04 09:36:18 · 743 阅读 · 0 评论 -
CSS布局方案
时间:2017年4月27日09:26:24 如果,唱歌的基本功是好嗓音,舞蹈的基本功是身体的柔韧性,那么前端工程师的基本功之一就是页面布局,实现同一效果的布局方案很多,没有绝对的对与错,只有相对而言的合理与紊乱。本文宗旨,汇总优良页面元素布局方案。思想有深度,文章有温度,感谢您的阅读和分享。 理论: 与布局有关的CSS属性:float-浮动,pos原创 2017-04-27 13:11:47 · 421 阅读 · 2 评论 -
CSS-颜色属性+颜色函数+自定义变量
时间:2017年5月8日16:08:13 离开校园踏入职场,不是到达人生巅峰,而是人生才刚刚开始。校园里学的知识远不足工作需求,而且校园里的学习深度也比较浅显。因此,对于刚毕业前三年的工程师来说,马不停蹄不分昼夜的学习和汲取工作中需要用到的知识,是一个硬功夫,需要练就。兴趣是第一老师,有了兴趣工作才有激情和动力,因此,选择自己喜欢的一份工作比任何选择条件都要优先,永远将 喜欢 放在首原创 2017-05-08 16:56:01 · 16755 阅读 · 0 评论 -
PC端自适应的可交互的经典布局详解
时间:2017年5月8日08:55:22 作为一名Web前端开发工程师,基本功就是扎实的CSS布局功底,做过整站开发的工程师都知道,第一步不是盲目搭建页面框架,而是对设计稿进行分析和规划。本文以一个通用性较高的实际项目,进行深入分析和探讨。1、设计稿,如下图所示2、需求分析 页面整体分为五部分: 第一部分,在任何情况原创 2017-05-08 13:09:02 · 6364 阅读 · 0 评论 -
CSS兼容性汇总
时间:2017年3月9日15:01:50 随着现代浏览器发展速度太快,种类多,版本多,以至于出现浏览器的渲染规范和css的渲染规范出现不兼容性,表现为同样的代码在不同浏览器下的显示效果出现差异化。但作为一款产品,必须要在不同设备上显示效果相同,因此,在css编码过程中需要加入兼容性代码,也就是css hack。 兼容性解决方案:在css属性前加入浏览器前缀:-webkit-原创 2017-03-09 15:25:15 · 2746 阅读 · 0 评论