CSS回顾系列0之杂谈

原创 2016年05月31日 16:55:08

pre-first

CSS不需要编译,属于浏览器解释型语言,可以直接由浏览器执行。之前看的w3school教程入门CSS,这段时间我看了看Doye的手册,遇到不太理解的地方的话就去查阅一些资料并在codeopen上面做一些实践,下面我来讲讲我认为一些比较重要的收获。

body-go

1. 定位

position:可以取值static、absolute、relative、fixed、center、page、sticky,后三者是css3新增属性值,center和page所有浏览器都暂时不支持,应该和absolute有点含义叠加,所以不被实现。
css3position含义:
css3position含义
css3position实现情况:
css3position实现情况
以上两张图片涉及到ie方面的兼容性问题,以后一系列的css问题会越来越少地兼顾ie css tricks,因为全世界包括ms自身都在尽全力加速淘汰ie。
z-index:当position的值为非static时,其层叠级别通过z-index属性定义。auto:元素在当前层叠上下文中的层叠级别是0。有一点提一下,当z-index未定义或者值为auto时,在IE6,7下会创建新的局部层叠上下文,而在高级浏览器中,按照规范不产生新的局部层叠上下文。
dIsplay:IE6,7只支持inline元素设置为inline-block,其它类型元素均不可以。
float
如果float不是none,当display:inline-table时,display的计算值为table;当display:inline | inline-block | run-in | table-* 系时,display的计算值为block,其它情况为指定值;
float在绝对定位和display为none时不生效。
对应的脚本特性为styleFloat(IE)或cssFloat(非IE)。(注意这里为styleFloat或cssFloat,而不是float)。虽然说html、css、js要分离,但是有时候这些小细节可能必须要用上。

————————————-我是身材苗条的完美分割线—————————

上面的内容主要来自于手册,我想了想,这样讲好像没什么意思,还是主要来讲讲css3以及一些自己做的慕课笔记吧。

2. css3部分

border

border-color

如果你设置了border的宽度是3px,那么你就可以在这个border上使用3种颜色,每种颜色显示1px的宽度,如果颜色种类数量小于宽度像素数量,那么最后一个颜色将被添加到剩下的宽度。目前只有ff支持,加上-moz前缀可以实现边框渐变色效果;这是我在codepen上面的一个小demo

border-image

需要注意有个特殊的相关属性:border-corner-image:border-top-left-image , 取值有none、(使用绝对或者相对url地址指定背景图像)、(边框宽度用固定像素值表示)、(边框宽度用百分比表示)、[stretch | repeat | round](拉伸 | 重复 | 平铺,default is stretch)
浏览器兼容性:
这里是border-image的兼容性
这里有张鑫旭前辈的一些使用经验还有这个
border-image参数有三个:图片border-image-source、裁剪位置border-image-slice、重复性border-image-repeat,类似于css2的background。裁剪位置类似于css的clip属性,重复性类似于background,但是区别较大,还有round、stretch–default,张前辈用九宫格模型来阐释了border-image-repeat。宽度和展示方式。说实话没想到border-image还有这么大讲究。

3. vertical-align和line-height

首先给出空白间隙问题:zxxzsh
前段时间在慕课看到了zxx前辈的有关视频教学,在这里翻到了15年8月份他在自己空间里面写的一篇原文
他们之间的好基友关系展示如下:

{
  line-height: 30px;
  vertical-align: -10%;
}

等同于

{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

zxx前辈引入了一个概念:
在HTML5文档声明下,块状元素内部内联元素的行为表现,就好像块状元素还有一个(更有可能是两个–前后)看不见没有宽度没有实体的空白节点,暂时称之为幽灵空白节点。引入一个图片下边缘留空隙的例子:

<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

说实话zxx前辈的那篇文章真是够长的,以前他写的文章真是够用心的,实在佩服。前辈尽可能列出解决问题的所有办法并试图阐明其真正原理,实际上肯定还有更多的办法。实际工作当中我们经常发现问题后很快找到一个轻巧的解决办法,但是如果该方法是没有认真思考而得出的结果的话,实际上还是很有可能会再次出现许多bug,所以分析问题得尽量看清其本质再动手。
谈到这个例子,首先我们得明确现有条件真实状况,分两方面一个是明确当前DOM元素特点:图片和文字都是内联元素;第二个是样式使用条件和含义,这个口说无凭,给出一些解决办法再结合手册看的话就更清楚许多。解决办法有:
1. 让vertical-align失效:vertical-align适用于图片这样的内联元素,所以可以让图片去inline,不带来其他影响的前提下,block化或者其他定位;
2. 告别vertical-align默认的baseline;
3. 告别line-height默认的normal–约为等于1.2,mdn-line-height
4. 间接手段,font-size设为0,line-height也就跟着变为0,不过这样文字不就消失了、、;

写了这么多,发现css还是得按一定顺序来慢慢总结,不然思路还是有点乱,移动端布局也得抽出机会作出一定总结。

量化杂谈

转载 【量化杂谈之基础篇1】获取所有股票的代码和名字——一个爬虫的简单例子 http://bbs.pinggu.org/thread-4145710-1-1.html 【量化杂谈之基础篇2】回测的那些...
  • xf_87
  • xf_87
  • 2017年04月15日 14:35
  • 198

竞速游戏经典之《极品飞车》系列完整回顾(图)

竞速游戏经典《极品飞车》系列   在汽车出现之后,就有很多的竞速爱好者试图将马力及车辆性能推向极限,并在通过终点线的那一瞬间缔造全新记录。所以,打从有游戏机问世之后,竞速游戏的出现,一点也不令人讶异。...
  • kof820
  • kof820
  • 2006年11月27日 10:45
  • 1449

你想要的生物信息知识全在这——生信宝典文章目录

培训 生物信息作图系列R、Cytoscape及图形排版和Python编程培训研讨班开课了 120分的转录组考题,你能得多少 维密摔倒不可怕,关键时有人搀一把,坚持走下去 生物信息作图系列 - R、网络...
  • woodcorpse
  • woodcorpse
  • 2017年12月10日 11:51
  • 197

CSS3回顾系列0

CSS媒体查询 媒体查询包括一种媒体类型(以及通过使用宽高,颜色等媒体特征来限制样式表作用域的表达式).作为新增在CSS3中的特性,可以使得内容个性定制化呈现在不同特定输出设备上面,而不必改变内容本...
  • qq_21342217
  • qq_21342217
  • 2016年06月10日 15:01
  • 145

数学之美系列完整版(最新全集列表)

数学之美系列完整版(最新全集列表)作者:吴军, Google 研究员 来源:Google黑板报 数学之美 一 统计语言模型 数学之美 二 谈谈中文分词 数学之美 三 隐含马尔可夫模型...
  • happylife1527
  • happylife1527
  • 2012年10月23日 09:15
  • 910

hdu 2045 不容易系列之(3)―― LELE的RPG难题

是一道递推找规律的题,首先易知f(1)=3;f(2)=6;f(3)=6;f(4)=18; 现在考虑n>3的情况,若第n-1个格子和第一个格子不同,则为f(n-1); 若第n-1个格子和第1个格子相...
  • u013008291
  • u013008291
  • 2014年10月14日 22:07
  • 1152

HDU 不容易系列之(4)——考新郎(组合错排)

题目:http://acm.hdu.edu.cn/showproblem.php?pid=2049 思想基础:全部元素错排参见http://blog.csdn.net/liuweiyuxiang/a...
  • liuweiyuxiang
  • liuweiyuxiang
  • 2016年04月03日 23:43
  • 674

四月杂谈

四月杂谈
  • gjj920318
  • gjj920318
  • 2016年04月01日 16:06
  • 1917

HDOJ 不容易系列之(3)—— LELE的RPG难题

问题及代码: /*不容易系列之(3)—— LELE的RPG难题 Problem Description 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE...
  • linan_141
  • linan_141
  • 2015年06月07日 10:16
  • 700

从0开始学习 GitHub 系列之「01.初识 GitHub」

1. 写在前面我一直认为 GitHub 是程序员必备技能,程序员应该没有不知道 GitHub 的才对,没想到这两天留言里给我留言最多的就是想让我写关于 GitHub 的教程,说看了不少资料还是一头雾水...
  • googdev
  • googdev
  • 2016年10月11日 14:01
  • 6868
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS回顾系列0之杂谈
举报原因:
原因补充:

(最多只允许输入30个字)