css
奔跑吧、GZB
这个作者很懒,什么都没留下…
展开
-
flex-basis
Oh My God,CSS flex-basis原来有这么多细节为了演示方便,避免无谓的干扰,本文所有的尺寸均指水平尺寸,对应CSS均是宽度相关,例如width/min-width/max-width。以前的我对flex-basis不屑一顾,以为就是个浮于表面的CSS属性。最近深入研究后才发现,自己那是朱砂当红土,珍珠当泥丸,钻石当玻璃,檀木当柴火——完全不识货!在Flex布局中,...转载 2020-02-06 00:47:04 · 30909 阅读 · 1 评论 -
vue中css变量的使用
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="s...原创 2020-01-08 23:18:32 · 22491 阅读 · 3 评论 -
postcss的使用
目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器?应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。它们的出现可以说是恰逢其时,解决了css的一些缺憾:语法不够强大,不能够嵌套书写,不利于模块化开发 没有变量和逻辑上的复用机制,导致在css的属性值中只能...原创 2019-04-01 00:22:38 · 1560 阅读 · 0 评论 -
css规范
CSS 命名一般采用小写英文单词或组合命名,单词与单词间以"-"分割;英文单词不缩写,除非一看就能明白的单词。文本命名规范 index.css: 一般用于首页建立样式 head.css: 头部样式,当多个页面头部设计风格相同时使用。 base.css: 共用样式。 style.css: 独立页面所使用的样式文件。 global.css: 页面样式基...转载 2019-03-08 18:33:48 · 121 阅读 · 0 评论 -
BFC及清除浮动详解
一. BFCBFC 即 Block Formatting Contexts (块级格式化上下文),具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。就像js的函数作用域一样,BFC是页面上的作用域。1...原创 2018-09-24 00:26:58 · 1560 阅读 · 0 评论 -
用css制作箭头和三角形等图形
下面的代码就是一个三角形,但是,为什么呢?.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: ...原创 2018-10-27 23:46:03 · 166 阅读 · 0 评论 -
position、float与文档流
1.什么是文档流?将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序)2.position概述:position定位,它的作用就是把元素放到你想放的位置上。在css中牵扯到位置定位的一般就会有一个参照,position也不例外,它的取值有三个:...原创 2018-11-24 21:51:14 · 472 阅读 · 1 评论 -
高度100%的解决办法
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。而跟W3C的规范,百分...原创 2019-01-06 23:46:43 · 1354 阅读 · 2 评论