关闭

CSS回顾系列0之杂谈

标签: css
155人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6982次
    • 积分:175
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:7篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论