css
CZBBhkrx
这个作者很懒,什么都没留下…
展开
-
CSS 最佳实践 + 套路(二) -- height width
文档流文档内元素的流动方向内联元素 ==> 从左向右依次流动,若 width 不足,则换行块级元素 ==> 从上到下依次流动,每个块级元素独占一行脱离文档流将会影响其祖先元素(块级元素)的 height脱离文档流的三种方式:position: fixed 相对于窗口定位position: absolute 相对于定位包含框定位(position:原创 2018-01-27 16:13:49 · 271 阅读 · 0 评论 -
CSS 最佳实践 + 套路(九) -- Bootstrap
概述Bootstrap 是一个用于前端开发的开源工具包,Bootstrap 可以适配所有设备,主要就是采用了媒体查询功能,当我们知道它是怎么实现的了,那么它也就不那么神秘了。当我们在使用 Bootstrap 时,主要需要掌握的就是栅格布局,剩下的就是复制粘贴了。英文官网中文官网准备工作开始使用 Bootstrap 之前我们需要引入 Bootstrap原创 2018-01-30 13:45:53 · 236 阅读 · 0 评论 -
CSS 最佳实践 + 套路(八) -- BFC
概述BFC(Block Formatting Context)块级格式化上下文。我并不知道 BFC 是什么,但是只要写出样式,我就知道这是不是 BFC。BFC 没有明确的定义,只有特征或功能。形成 BFC 条件浮动(float: left | right)绝对定位元素(position: absolute)非块盒的块容器(displa原创 2018-01-30 13:44:04 · 152 阅读 · 0 评论 -
CSS最佳实践+套路(七) - 布局
概述在我们平时布局的时候,一般都是选择浮动布局和Flex布局。如果项目需要支持IE8,那么推荐选择浮动布局,如果不需要支持IE8,那么尽量选择Flex布局,当我们不需要支持IE8的时候,那么我们就能使用很多高级的语法,例如:计算值()原则写不要死width状语从句:height尽量选择flex,calc如果是IE,那么上述两点全部推翻,能写死就写死浮布局原创 2018-01-30 13:42:50 · 272 阅读 · 0 评论 -
CSS 最佳实践 + 套路(六) -- flex
概述CSS 弹性盒子(Flexible box 或 Flexbox)是一种用于在页面上布置元素的布局模式,它的目的是允许容器可以让其子项目(子元素)能够改变宽度、高度、顺序等等,以最佳的方式填充空间(父元素)弹性盒布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用的显示空间最佳的填充能力特点与方向无关实现空间的自动分配,自动对齐适用于简单的线性布局原创 2018-01-30 13:41:39 · 147 阅读 · 0 评论 -
CSS 最佳实践 + 套路(五) -- icon
概述icon 有很多做法,主要的做法有img 标签background-image 属性CSS Spritesfontsvg纯 CSS 实现在这些方法中,目前最值得推荐的就是 svg 方法,其他的大家可以了解一下。img 标签1此种方法可以自适应宽高,只需要给 img 一个 width 属性或者一个 h原创 2018-01-29 11:35:48 · 185 阅读 · 0 评论 -
CSS 最佳实践 + 套路(四) -- 移动端适配
概述手机上显示网页是将整个网页缩小,模拟页面宽度 980px ,可以使用 document.documentElement.clientWidth 来获取到页面宽度为 980px。在移动端加上 标签才是自适应,否则就是 980px ,即网页整体缩小。meta 标签1说明:width=device-widt原创 2018-01-27 16:24:32 · 276 阅读 · 0 评论 -
CSS 最佳实践 + 套路(一) -- 概述
CSS 最佳实践 + 套路(一) -- 概述资源Google: 关键词 MDNCSS TricksGoogle: 阮一峰 css张鑫旭的 240 多篇 CSS 博客Codrops 炫酷 CSS 效果CSS揭秘CSS 2.1 中文 specMagic of CSS 免费在线书引入CSS内联样式 ==> style属性 ==> style= 'color: red;原创 2018-01-27 15:58:01 · 208 阅读 · 1 评论 -
CSS 最佳实践 + 套路(三) -- 堆叠上下文
条件文档中的层叠上下文由满足以下任意一个条件的元素形成:根元素(HTML)z-index 不为 auto 的 absolute/relative一个 z-index 值不为 auto 的 flex 项目,即父元素 display: flex/inline-flexopacity 属性值小于 1 的元素transform 属性不为 none 的元素mix-blend-mode 属性值原创 2018-01-27 16:17:12 · 349 阅读 · 0 评论 -
CSS 最佳实践 + 套路(十) -- 混合篇
概述本文章主要就是将之前几篇文章中没有提到的,但是个人认为比较重要的 CSS 的最佳实践和套路居中水平居中:内联元素:父元素加 text-align:center;块级元素(固定宽度):margin: 0 auto;元素不是上述两种情况:1. 将元素变成内联元素 ` display: inline-block; ` + ` text-align:cent原创 2018-01-30 13:48:05 · 242 阅读 · 0 评论