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还是得按一定顺序来慢慢总结,不然思路还是有点乱,移动端布局也得抽出机会作出一定总结。

相关文章推荐

HTML/CSS/Js/Jquery/PHP网站0基础开发到大神系列【飞鸽学院】

课程介绍 简  介 html,css,javascript,jquery,php+mysql,网站0基础开发涵盖前端到后端成就你的大神之路 学习目标 php高级开发工程师,具有一定的项目经验,能进入企...

Linux杂谈:解决配置静态ip后eth0网卡启动不了的问题

今天在看imooc上的《Linux网络管理》的课程中,在做一些实验时修改了下网络配置,发现了一些问题,就是保存网络配置后eth0网卡打不开,可能也会有很多人出现这类问题,我就在这里分享下自己的解决经验...
  • cffy625
  • cffy625
  • 2016年11月04日 11:02
  • 440

CSS技巧杂谈

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 ...

JAVA面试题解惑系列(六)——字符串(String)杂谈

Java 字符串杂谈

足球与oracle系列(2):巴西揭幕战预演,oracle体系结构杂谈

巴西:战术打法:4222不动摇,主力阵容构架无悬念 核心体系无异议,4222完整诠释,体系架构如此清晰 世界顶级球队:巴西 数据库技术核心团队:甲骨文 教练员:DBA ...

杂谈系列:Quality Center为什么走下神坛

既然提及Quality Center,就得先谈Mercury,而既然提及Mercury,就得先谈HP。毕竟是大环境的衰败造就了QC的没落,难道不是吗?   (一)因此,先说HP。   HP...

Unity学习系列笔记7:Unity杂谈。。。。

monoDevelop乱码问题 这个问题坑了爹很久... unity自带的monodevelop的项目视图在我电脑(win7)上一直乱码,项目名称,项目结构树,以及文件名称全部...
  • ldghd
  • ldghd
  • 2012年08月16日 20:50
  • 1391

字符集和字符集编码杂谈系列之wchar_t,char,代码页

前言这篇文章主要是解答内心的一些疑问。因为遇到和这些东西相关的情况不是一次两次了,彻底解决下。正式开始之前,简单的说下我遇到的一些情况,大家也可以思考下,如果自己面临这些情况如何解决? 在公司时曾经做...

live555杂谈系列(一)---source,sink简介

最近一段时间一直在学习live555,相信各位新手朋友们一开始肯定跟我一样,在网上查看各种资料,可是看完之后依然是一头雾水。 现在我把我这一段时间学习所得给大家分享一下,希望对新接触live555的...

css回顾系列1之选择器

上一篇文章写的特别混乱,现在重新把顺序捋一遍.说明一下,以后资料借鉴较多的地方来源于mdn-web-英文文档.建议大家还是看英文文档,因为中文文档翻译质量参差不齐,经常看着看着就一团浆糊了;而且最关键...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS回顾系列0之杂谈
举报原因:
原因补充:

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