CSS - 文章分类 - 晴明桑

[css] transform matrix

摘要：概述上面两行 css 代码其实什么变换都不会做，因为那是变换的默认状态，即没有变换。但是其中使用到了，翻译成中文叫做：矩阵。更多的时候，我们使用类似如下语法：如上代码所示，一目了然，要做什么变换一看就知道了。但其实，这只是一个语法糖，其底层依然使用的是。向量什么是向量向量：空间中的箭阅读全文

posted @ 2018-06-20 22:09 晴明桑阅读(747) 评论(0) 推荐(0)

[css] 一些兼容性(奇怪)问题

摘要：垂直居中偏移问题 line-height 在安卓中出现往上偏移的现象。(在ios可能会出现下掉....暂不知晓原因) 原因：可能是使用了奇数字号。可能是字号小于12px。本质原因: 可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHea 阅读全文

posted @ 2018-02-04 19:48 晴明桑阅读(1298) 评论(0) 推荐(0)

[css] line-height 、 vertical-align

摘要：line height 行高、行距行高是指文本行基线间的垂直距离。基线（base line）并不是汉字文字的下端沿，而是英文字母“E”的下端沿。意味着中文没有基线，也就更难(视觉)底部对齐。图中两条红线之间的距离就是行高（line height），上一行的底线和下一行的顶线之间的距离就是行阅读全文

posted @ 2018-01-28 21:06 晴明桑阅读(1035) 评论(0) 推荐(0)

[css] grid 初探

摘要："示例" 1表示Grid lines 2表示Columns 3表示rows 4表示cells 间距（gap）网格区域(Grid area) 声明容器是一个网格(栅格)容器 grid template columns 第一列的宽度是150px，第二个是20px，第三个是150px，以此类推，设置了五阅读全文

posted @ 2017-08-17 19:10 晴明桑阅读(247) 评论(0) 推荐(0)

[css] flex 实例

摘要：元素布局网格布局基本网格布局平均分布百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。圣杯布局输入框的布局在输入框的前方添加提示，后方添加按钮。悬挂式布局主栏的左侧或右侧添加一个图片栏。固定的底栏让底栏总是出现在页面的底部。流式布局每行的项目数固定，会自阅读全文

posted @ 2017-04-18 19:00 晴明桑阅读(268) 评论(0) 推荐(0)

[css] 选择器

摘要：基本选择器通用元素选择器，匹配任何元素标签选择器，匹配所有使用E标签的元素 class选择器，匹配所有class属性中包含info的元素 id选择器，匹配所有id属性等于footer的元素多元素的组合选择器多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔。后代元素选择器，匹配阅读全文

posted @ 2017-04-07 18:41 晴明桑阅读(211) 评论(0) 推荐(0)

[css] BEM

摘要：国内许多翻译的资料与官方文档对比有许多出入之处，多以概念理解为主 Block A functionally independent page component that can be reused. In HTML, blocks are represented by the class attr 阅读全文

posted @ 2017-02-10 11:36 晴明桑阅读(179) 评论(0) 推荐(0)

[css] 积累

摘要：在工作过程中遇到某个属性的使用，浏览器渲染效果与预期效果不符，不能只通过死记硬背避免或应用这种效果，不知晓背后的原理，用'就是这样的'的借口来搪塞自己。 #上下margin黏连两个margin是邻接的必须满足以下条件：必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC 阅读全文

posted @ 2017-02-09 19:04 晴明桑阅读(329) 评论(0) 推荐(0)

[css] flex 详解

摘要："详细的demo" flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。如下情况每个元素的计算宽是多少将容器的宽度改成1500px flex grow b,c将按照1:3的比率分配剩余空间 flex shrink a,b,c将按照1:1:3的比率来收缩空间 flex basis 阅读全文

posted @ 2017-02-04 18:19 晴明桑阅读(507) 评论(0) 推荐(0)

[css] css 几种设计模式(规范)

摘要：OOCSS (Object Oriented CSS) 两个原则：独立的结构和样式独立的容器和内容创建OOCSS的关键部分: 创建一个组件库独立的容器和内容，并且避免样式来依赖位置独立的结构和样式使用类名为扩展基本对象坚持以语义类来命名类名 BEM(Block,Element,Modi 阅读全文

posted @ 2017-01-25 18:07 晴明桑阅读(617) 评论(0) 推荐(0)

[css] flex (old)

摘要：flex none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>none： none关键字的计算值为: 0 0 auto<' flex-grow '>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里阅读全文

posted @ 2016-04-29 16:52 晴明桑阅读(244) 评论(0) 推荐(0)

[css] transform

摘要：demo matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d( 阅读全文

posted @ 2016-04-25 17:58 晴明桑阅读(430) 评论(0) 推荐(0)

[css] LESS简单使用

摘要：混入变量阅读全文

posted @ 2016-03-18 00:18 晴明桑阅读(252) 评论(0) 推荐(0)

[css] 自定义浏览器滚动条样式

摘要：目前只有chrome浏览器支持高度设置似乎是无效的 cursor: pointer; 似乎也是无效的阅读全文

posted @ 2016-02-18 21:53 晴明桑阅读(306) 评论(0) 推荐(0)

[css] css&html 实现聊天气泡 demo

摘要：<html> <head> <style type="text/css"> .arrow { width: 0; height: 0; font-size: 0; border: solid 10px #000; } .arrow2 { width: 0; height: 0; font-size: 阅读全文

posted @ 2016-02-18 16:01 晴明桑阅读(860) 评论(0) 推荐(0)

[css3] css&html 实现 loading 加载图 demo

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>circleLoading</title> <style type="text/css"> .sk-circle { margin: 40px auto; width: 40px; 阅读全文

posted @ 2016-02-17 17:54 晴明桑阅读(277) 评论(0) 推荐(0)

[css]IE版本判定

摘要：<!doctype html>   <!--[if gt IE 8]> 阅读全文

posted @ 2016-02-16 01:26 晴明桑阅读(178) 评论(0) 推荐(0)

[css3] display:box 实现子元素居中与宽比排列

摘要：△ box-flex主要让子容器针对父容器的宽度按一定规则进行划分。//可能已被display:flex 更新了用法box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。box-direction用来确定父容器里的子容器排列顺序。box-align表示父... 阅读全文

posted @ 2015-11-16 00:50 晴明桑阅读(166) 评论(0) 推荐(0)

[css]相对路径

摘要：./当前文件所在目录 ../当前文件所在目录上级目录阅读全文

posted @ 2015-11-16 00:23 晴明桑阅读(115) 评论(0) 推荐(0)

[css] 积累(old)

摘要：<h?>标签里不可再嵌套h ul li 清除链接外框 a {outline: none;} 鼠标不允许点击：cursor:not-allowed; 强制不换行：white-space:nowrap; 自动换行：word-wrap: break-word;word-break: normal; 强制英阅读全文

posted @ 2015-06-21 04:56 晴明桑阅读(359) 评论(0) 推荐(0)

文章分类 - CSS

公告