随笔分类 - css
摘要:背景 在复习Grid布局的时候.需要完成一个三列布局.其中两侧固定,中间自适应. 在这一过程中发现grid-template-columns中auto属性与预期不符.于是查阅了相关资料. 具体布局在下面代码中. 首先是MDN中关于auto的解释:如果该网格轨道为最大时,该属性等同于 <max-con
阅读全文
摘要:背景 在移动端下经常会有如下图的需求. 文字描述 : 用户可以横向滚动屏幕查看内容.但是默认情况下会出现一个灰色的滚动条. 如何删除滚动条? 有一种思路:设置父元素超出隐藏内容 , 让子元素刚好比父级元素的高度大一点.这样最下面的内容就可以隐藏掉,达到隐藏其滚动条的效果. 另外一种做法是直接对齐滚动
阅读全文
摘要:水平垂直居中的十种方案 兼容性 代码以及注释 参考 "CSS实现水平垂直居中的1010种方式 " "vertical align"
阅读全文
摘要:事先需要了解的内容 需要预先了解移动端的基本知识,以及对rem有清晰的了解.演示代码使用的是less. 网上关于这些知识已经很多了.本文尝试从简单的角度切入了解到rem原理.. CSS计量单位-MDN. rem的原理解析-颜海镜(知乎), 移动端布局最佳实践,学不会算我输系列之二-bilibili
阅读全文
摘要:``` H5标准声明,使用 HTML5 doctype,不区分大小写 标准的 lang 属性写法 声明文档使用的字符编码 优先使用 IE 最新版本和 Chrome 页面描述 页面关键词 网页作者 搜索引擎抓取 为移动设备添加 viewport iOS 设备 begin 添加到主屏后的标题(iOS 6 新增) 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 添加智能 App 广告条
阅读全文
摘要:``` Formal syntat:||; - flex元素上的属性 - flex-basis与flex-shrink,flex-grow就是改变了布局空白(available space)的行为 - 默认行为是flexbox有盈余,留在后面不做处理. - 上面三种元素的简写:flex - 元素间的对齐和空间分配 - flexbox的一个关键特性就是能够设置flex元素沿主轴或者交叉轴的对齐方式,
阅读全文
摘要:方法一 (使得元素水平垂直都居中) 如果 中的 没有设置,元素将会是垂直居中. 如果 中的 没有设置,元素将会是水平居中. 代码如下图:
阅读全文
摘要:为什么会有浮动 在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序. 而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一个元素添加float属性时,元素就会脱离标准文档流. 例如在如图中有一个需求是:将P_tag_one
阅读全文