摘要: 一 前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性,可以让你更加深入的理解定位带来的一些特性,熟练使用CSS布局。 二 正文 1.文档流布局的概念 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
每个非浮动块级元素都独占一行, 浮动元素则按规定浮 阅读全文
posted @ 2020-06-05 11:16 热爱前端知识 阅读(283) 评论(0) 推荐(0) 编辑
摘要: 本文首发于我的博客 一直以来,CSS作为一种申明式的样式标记语言,很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现,我们可以像优秀的开源框架bootstrap那样,通过维护一个_variables.scss 阅读全文
posted @ 2020-06-05 10:24 热爱前端知识 阅读(1031) 评论(0) 推荐(0) 编辑
摘要: 使用css实现任意大小,任意方向, 任意角度的箭头 网页开发中,经常会使用到 下拉箭头,右侧箭头 这样的箭头。 一般用css来实现: { display: inline-block; margin: 72px; border-top: 24px solid; border-right: 24px s 阅读全文
posted @ 2020-06-05 09:25 热爱前端知识 阅读(1079) 评论(0) 推荐(0) 编辑
摘要: 对height 100%和inherit的总结 欢迎大家来我的博客留言:https://sxq222.github.io/CSS%...博客主页:https://sxq222.github.io 正文: 之前看到一篇相关的文章:http://www.zhangxinxu.com/wor... 在看这 阅读全文
posted @ 2020-06-05 08:31 热爱前端知识 阅读(639) 评论(0) 推荐(1) 编辑
摘要: 前端基础知识学习记录(三) 1.CSS 选择器的使用: (1):before与:after选择器的简介: :before选择器,即为在被选元素的内容前面插入内容,使用 content 属性来指定要插入的内容。:after选择器,即为在被选元素的内容后面插入内容,同样使用 content 属性来指定要 阅读全文
posted @ 2020-06-04 23:12 热爱前端知识 阅读(145) 评论(0) 推荐(0) 编辑
摘要: float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问题的,除了万恶的浏览器IE6,两层中间有缝隙 3px; 定位 在固定元素上加入绝对定位,自适应元素设 阅读全文
posted @ 2020-06-04 22:24 热爱前端知识 阅读(468) 评论(0) 推荐(0) 编辑
摘要: web语义化 web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义,如Microform 阅读全文
posted @ 2020-06-04 21:36 热爱前端知识 阅读(257) 评论(0) 推荐(0) 编辑
摘要: input ios 踩的大坑 前言:最近有个需求要将全平台的交易密码由原来的 6-16位 复杂密码改为6位纯数字交易密码,涉及到非常多的业务场景,但修改起来也无非两种:设置交易密码,使用交易密码 设置交易密码: 普通长条输入框、弹起数字键盘、支持明暗文切换查看 使用交易密码: 显示六个格子、弹起数字 阅读全文
posted @ 2020-06-04 20:52 热爱前端知识 阅读(2956) 评论(0) 推荐(0) 编辑
摘要: css 如何水平垂直居中,请尽量多说几种方法?很尴尬,我多次面试都被问到这个问题,fuck 定位(回答了)、table-cell布局、flex布局、translate+relative定位 w3c和ie盒模型区别 我回答反了 尴尬 jquery jquery中如何只实现一次事件绑定 $('dom') 阅读全文
posted @ 2020-06-04 20:11 热爱前端知识 阅读(572) 评论(1) 推荐(0) 编辑
摘要: 今天总结一下布局,之前校招面试的时候貌似很喜欢考布局,例如两栏自适应布局、三栏自适应布局等等,实现的方法多种多样,总结一下以后就不乱了。 两栏布局 这里我们讲的两栏布局一般是左定宽右自适应的 左float+右margin-left html, body { height: 80%; } .wrapp 阅读全文
posted @ 2020-06-04 19:18 热爱前端知识 阅读(163) 评论(0) 推荐(0) 编辑