随笔分类 -  Html&CSS

跟页面表现相关的内容
h5处理键盘弹出对页面的影响
摘要：1. 键盘弹出触发window.resize，对页面产生挤压，造成定位紊乱 在页面初始化完成的时候，固定外部容器的宽高，resize的时候也不影响内部dom的相对位置。例如，以body为容器： <style type="text/css"> html,body{ width: 100%; heigh 阅读全文
posted @ 2020-07-23 23:42 前端大兵 阅读(2627) 评论(0) 推荐(0)
解决安卓字体偏移：页面整体缩放
摘要：在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。下图来自于网友的分享，从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓： 可能 阅读全文
posted @ 2018-10-10 15:20 前端大兵 阅读(1605) 评论(0) 推荐(0)
Element隐藏组件：scrollbar
摘要：scrollbar是用来替代浏览器原生滚动条的组件，element的文档中并没有对scrollbar的描述。 使用方法：以<el-scrollbar/>包裹要滚动的元素，并设置固定高度。在外部引入的css中自定义样式（写在scoped中无效）。 阅读全文
posted @ 2018-09-27 11:39 前端大兵 阅读(1295) 评论(0) 推荐(0)
酷炫的SVG 动态图标
摘要：在 loading.io 上能看到好多效果惊艳的loading图标。它们都是用svg写成的，寥寥几行代码，比img图片更精细更节省体积，比纯dom实现要更灵活和高效。 怎么画这些圆和方块？怎么着色？怎么动起来？ 先看看svg的基础知识，然后将上面第一个图标画出来。 一、基本图形元素 svg有一些预定 阅读全文
posted @ 2018-07-18 10:06 前端大兵 阅读(23245) 评论(7) 推荐(11)
CSS 样式初始化
摘要：去除浏览器对html的附加样式，避免不同浏览器之间的样式差异，给前端开发提供统一的样式基础。附加样式： .clearfix - 清除浮动 .wordsBreak - 允许文本在任意位置的换行 .ellipsis - 超长文本截断，以省略号显示 阅读全文
posted @ 2018-07-10 14:56 前端大兵 阅读(256) 评论(0) 推荐(0)
CSS3 选择器用法小结
摘要：表单选择器： 属性选择器： 次序选择器： :first-child 选取属于其父元素的首个子元素 :last-child 选取属于其父元素的最后一个子元素 :nth-child(n) 选取父元素的第n个子元素 :nth-last-child(n) 倒序选取父元素的第n个子元素 :first-of-t 阅读全文
posted @ 2018-07-07 15:28 前端大兵 阅读(237) 评论(0) 推荐(0)
text-overflow修剪文本，以省略号显示
摘要：overflow: hidden; 必须设置，不然无法修剪文本 white-space: nowrap; 规定段落中的文本不进行换行 text-overflow: ellipsis; 当文本溢出包含元素时显示省略号 注意：文本的修剪不受高度影响，只要文本长度超过容器宽度就会被修剪，不会换行。 阅读全文
posted @ 2018-07-07 10:47 前端大兵 阅读(190) 评论(0) 推荐(0)
Flex Box 简单弹性布局
摘要：弹性盒子模型有两种规范：早起的display:box 和后期的display:flex。它可以轻易的实现均分、浮动、居中等灵活布局，在移动端只考虑webkit内核时很实用。 一、display:box 二、display:flex 阅读全文
posted @ 2018-07-06 21:31 前端大兵 阅读(309) 评论(0) 推荐(0)
CSS 0.5px 细线边框的原理和实现方式
摘要：细线边框的具体实现方法有：伪元素缩放或渐变，box-shadow模拟，svg画线，border-image裁剪等。要实现小于1px的线条，有个先决条件：屏幕的分辨率要足够高，设备像素比要大于1，即css中的1个像素对应物理屏幕中1个以上的像素点。 对于普通电脑，屏幕物理像素和css像素一一对应，显示 阅读全文
posted @ 2018-07-05 19:29 前端大兵 阅读(7827) 评论(0) 推荐(1)
合理选择css3动画实现方式
摘要：使用css3实现动画，比js控制DOM属性的方式要高效很多、流畅很多，主要分transition和animation两大方式。 transition适用于一次性变换 animation适用于循环动画和多层动画 涉及DOM缩放、旋转、移动、旋转时，优先以transform属性实现 结合class的ad 阅读全文
posted @ 2017-06-09 02:39 前端大兵 阅读(341) 评论(0) 推荐(0)
display:table-cell实现水平垂直居中
摘要：如果查看css手册，会发现display有许多带table字样的可选属性，有table、inline-table、table-row-group、table-row、table-cell等10个之多，可以赋予div类似于<table>等标签的布局特性。大多数浏览器（IE6/7除外）对其支持良好，其实 阅读全文
posted @ 2017-06-08 02:28 前端大兵 阅读(46265) 评论(2) 推荐(6)