outline这个属性平时用的不太多，最近被问及专门研究一下这个属性的作用。

CSS2加进来的outline属性，中文翻译过来是外轮廓。

神马是轮廓？

轮廓，指边缘；物体的外周或图形的外框。

那这样的话外轮廓就是在外部的边框咯。

看一下正式的定义：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。

看一下比较实际的体会：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。

暂时说完大概理解，下面继续分析。

CSS2中outline是这样设置的：

p{

  outline-style:dotted;

}

看起来跟border没有什么区别。

看一下支持度

看起来形势一片大好，不过老式的IE6-7貌似不兼容，所以想用outline替代border的童鞋可能要失望了。可能就是这个原因所以平时用的比较少了。

outline还有一个不太常用的属性，outline-offset，设置外轮廓相对的偏移量，这里的相对可以理解为W3C上面标准的盒模型（border之内）

div {

        height: 100px;

        width: 100px;

        margin: 50px auto;

        outline: 10px solid rgba(255,255,0,9);

        background: black;

        outline-offset: 10px;

        border:5px solid blue;

    }

比如这样设置之后的效果是这样的

黄色的是outline，设置了outline-offset之后往外面偏移10px，露出了后面body的背景色红色，蓝色的是border。

outline与background的关系

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Examples</title>

     <style type="text/css">

     div {

         height: 100px;

         width: 100px;

         margin: 50px auto;

         outline: 10px solid yellow;

         background: gray;

     }

     body {

         background: red;

     }

     </style>

 </head>

 <body>

     <div>

         啦啦啦啦啦啦

     </div>

 </body>

 </html>

结果就是这样的，在body设置类背景色红色在body里面的div设置了黄色外轮廓色，外轮廓色在background上面。

块级元素、内联元素的outline

与border一样，可以同时设置内联元素或者块级元素的outline和border

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Examples</title>

 <style type="text/css">

     span{

         outline:1px solid red;

         border:1px solid blue;

     }

     p{

         outline:1px solid yellow;

         border:1px solid gray;

     }

 </style>

 </head>

 <body>

     <p>刘延东与国家<span>体育总局局长刘鹏、北京市市长王安顺等12人将向国际奥委会进行陈述，向全世界展示北京举办2022年冬奥会的实力和信心。全会开幕 不记名投票选出冬奥举办地国际奥委会第128次全会昨晚在吉隆坡会展中心隆重开幕。国际奥委会委员、2022年冬奥会申办</span>城市代表等出席开幕式。国际奥委会委员、马来西亚奥委会主席伊姆兰，国际奥委会主席巴赫和马来西亚总理纳吉布先后致辞。

         　　国际奥委会第128次全会的一项<span>重要议程</span>是以不记名投票方式选出2020年冬青奥会和2022年冬奥会的举办城市。

 　　本次全会将持续到8月3日。在为期四天的会议中，国际奥委会委员们还将围绕《奥林匹克2020议程》进行讨论，并听取里约奥运会、平昌冬奥会、东京奥运会以及未来两届青奥<span>会筹备工作进展的报告。此外，全会还将选举一名国际奥委会执委和若干名委员。

     　　国际奥委会全会是国际奥委会一年一度的内部会议</span>。参加会议的人员为国际奥委会委员，相关国际单项体育联合会、国家（地区）奥委会代表等。 据新华社电

 </p>

 </body>

 </html>

虽然不太好看，不过勉强看着先把。

其实内联元素的outline和块级元素的outline的层级是不一样的。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>块级元素与内联元素outline作用的不同</title>

         <style>

             img{

                 width: 100px;

                 height: 100px;

             }

             div.pic1{

                 outline: 60px solid rgba(255,255,0,0.5);

             }

             img#picture3{

                 outline: 55px solid red;

             }

         </style>

     </head>

     <body>

         <div class="pic1">

             <img id="picture1"  src="zhege4(1).jpg" alt="picture" />

         </div>

         <div>

             <img id="picture2"  src="zhege8(1).jpg" alt="picture" />

         </div>

         <div class="pic3">

             <img id="picture3"  src="zhege4(1).jpg" alt="picture" />

         </div>

         <div>

             <img id="picture4"  src="zhege8(1).jpg" alt="picture" />

         </div>

     </body>

 </html>

结果是这样滴，看不懂？毛有关系，慢慢来。

首先是四个div包裹四张图片，图片就不说了。给div加了一个黄色的有点透明度的outline，给图片加了一个红色的outline。

然后捏，有木有发现，黄色的outline可以把下面的图覆盖了，二红色的outline可以把上面的覆盖却不能覆盖下面的outline。

这就是内联元素和块级元素outline覆盖的不一样。

块级元素的outline可以将上面下面元素的内容都覆盖了，而内联元素的只可以覆盖上面的元素。

看到这里累了的童鞋可以冲杯咖啡，休息一下，下面的才是重点。

下面讨论outline的层级问题（或者可以说是层叠问题）

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Examples</title>

<style type="text/css">

    div{

        height:100px;

        padding:10px;

        margin:20px;

        border:10px solid #ff00ff;

    }

    div:nth-child(1){

        background:yellow;

    }

    div:nth-child(2){

        background:gray;

        outline:100px solid rgba(0,255,0,1);

    }

    div:nth-child(3){

        background:green;

    }

</style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

结果是中间的outline覆盖了上面和下面的内容、背景、边框部分，如果给outline一个足够大的值的话，可以覆盖除了自己之外的全部屏幕。类似图中那样，如果绿色继续延伸，那么就可以铺满屏幕了。

但是如果给上面和下面两个div也加上outline的话

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Examples</title>

<style type="text/css">

    div{

        height:100px;

        padding:10px;

        margin:20px;

        border:10px solid #ff00ff;

    }

    div:nth-child(1){

        background:yellow;

        outline:10px solid rgba(255,0,0,1);

    }

    div:nth-child(2){

        background:gray;

        outline:100px solid rgba(0,255,0,1);

    }

    div:nth-child(3){

        background:green;

        outline:10px solid rgba(255,0,0,1);

    }

</style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

结果变成了这样

后面一个div的outline覆盖了前面一个div的outline

这里就不难想到outline是怎么样的了，outline如同相框的框，在内容（照片）上面。而且在页面靠后的元素的outline会覆盖前面一个的outline。

或者可以这么理解：页面绘制Render Tree（渲染树，或者说呈现树那里)，按照绘制的先后顺序绘制轮廓（outline），其实其他样式如果特殊性一样，也是后面的会覆盖前面的样式，一样的道理。

如果浮动了呢？

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Examples</title>

 <style type="text/css">

     div{

         height:100px;

         padding:10px;

         margin:20px;

         border:10px solid #ff00ff;

     }

     div:nth-child(1){

         background:yellow;

         outline:10px solid rgba(255,0,0,1);

     }

     div:nth-child(2){

         background:gray;

         outline:100px solid rgba(0,255,0,1);

         float:left;

         width:100px;

     }

     div:nth-child(3){

         clear:both;

         background:green;

         outline:10px solid rgba(255,0,0,1);

     }

 </style>

 </head>

 <body>

     <div></div>

     <div></div>

     <div></div>

 </body>

 </html>

上图第二个div是浮动的，神奇的是第一个div的outline居然出来了。跟最后一个div一样的情况。这里尝试加点文本进去，结果是文本是在outline之上的。

也就是说此时outline是在普通background和border上面，在普通的outline和内容的下面。

如果定位了呢？

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Examples</title>

 <style type="text/css">

     div{

         height:100px;

         padding:10px;

         margin:20px;

         border:10px solid #ff00ff;

     }

     div:nth-child(1){

         background:yellow;

         outline:10px solid rgba(255,0,0,1);

     }

     div:nth-child(2){

         background:gray;

         outline:100px solid rgba(0,255,0,1);

         position: relative;

         width:100px;

     }

     div:nth-child(3){

         clear:both;

         background:green;

         outline:10px solid rgba(255,0,0,1);

     }

 </style>

 </head>

 <body>

     <div></div>

     <div></div>

     <div></div>

 </body>

 </html>

相对定位relative之后就跑到上面来了，绝对定位absolute也是一样，固定定位fixed亦是一样。这里是没有设置z-index的情况下，如果设置了z-index则可以顺便更改div的层叠顺序，也就包含了outline的层叠顺序。

总结：outline的层级顺序是这样的

  1. outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。
  2. 通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）
  3. 如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）
  4. 如果页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素之后，显示正常的文档流，之后再显示定位的元素（不设置z-index情况下，设置的话等于浏览器又执行了其他命令），当然定位的元素可以用z-index属性把元素在前后挪来挪去，不过现在讨论的是在不设置z-index下默认浏览器对outline的显示情况。
  5. 其实outline大部分都不会像border那样用，outline的作用上面也说了，只是浏览器默认的那条小小的虚线而已，一般还要消除掉的。比如outline:none;

本文链接：点击这里

本文地址：http://www.cnblogs.com/manfredHu/p/4691385.html

转载请注明作者：Manfred Hu

That's all.Thanks

outline详解的更多相关文章

  1. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  2. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  3. Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解

    http://hi.baidu.com/ltb6w/item/3a51f11926fda60ce75c361d Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解 ...

  4. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  5. 详解Bootstrap按钮组件

    按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css    3131行~3291行 按钮 ...

  6. DIV使用tabindex获得事件详解 移动div

    添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...

  7. Eclipse或Myeclipse常用快捷键组合详解

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...

  8. 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高

    第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...

  9. Android群英传笔记——第十二章：Android5.X 新特性详解，Material Design UI的新体验

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

随机推荐

  1. tomcat启动报错:注释指定的bean类.与现有的冲突.相同的名称和类

    错误: Unexpected exception parsing XML document from ServletContext resource [/WEB-INF/business/config ...

  2. 剑指Offer——和为S的连续正数序列

    题目描述: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久, ...

  3. Pandas 如何通过获取双(多)重索引获取指定行DataFrame数据

    图片看不清楚的话,可以右键选择:“在新标签页中打开图片(I)” 参数 df.loc[(a,b),c]中第一个参数元组为索引内容,a为level0索引对应的内容,b为level1索引对应的内容 因为df ...

  4. 转载：futex同步机制详解

    在编译2.6内核的时候,你会在编译选项中看到[*] Enable futex support这一项,上网查,有的资料会告诉你"不选这个内核不一定能正确的运行使用glibc的程序", ...

  5. MySQL优化(一)：MySQL分库分表

    一.分库分表种类 1.垂直拆分 在考虑数据拆分的时候,一般情况下,应该先考虑垂直拆分.垂直可以理解为分出来的库表结构是互相独立各不相同的. - 如果有多个业务,每个业务直接关联性不大,那么就可以把每个 ...

  6. list文档

    文档 class list(object): """ list() -> new empty list list(iterable) -> new list ...

  7. git学习------>如何汉化GitLab？

    在上一篇博客中,已经正常安装好了GitLab,然而全部界面都是纯英文的,为了照顾整个团队的英文水平,因此这篇博客的目的是将纯英文的GitLab进行汉化. 纯英文界面 第一步: 确认GitLab版本号 ...

  8. JavaScript闭包和this绑定

    本文最主要讲讲JavaScript闭包和this绑定相关的我的小发现,鉴于这方面的基础知识已经有很多很好的文章讲过了,所以基本的就不讲了,推荐看看[酷壳](http://coolshell.cn/)上 ...

  9. Spark踩坑记：Spark Streaming+kafka应用及调优

    前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark streaming从k ...

  10. k8s-离线安装k8s

    1.开始 目标 coreos的igniton.json有很强的可配置性,通过安装时指定集群配置的ignition.json, 安装完成后打开https://{{Master_IP}}:6443/ui直 ...