重看css权威指南 part6
2017-02-04 13:15
225 查看
上一部分结束得有点突兀,没有给什么例子,因为关键的概念已经讲得很清楚了。
由于该书的写作方式,没法每次把一个点的内容全讲完(渗透在每个章节中),只先这样一部分一部分总结了。
关于display的值,inline-block是混合了块元素的行内元素的一种特殊存在,这个大家都知道。但是有一点你可能不知道,当他像行内元素一样与文本排列在一行时,表现出的布局方式和替换元素一样。也就是说,margin,padding,border会影响它行内框的高度。
还有一个混合了行内元素和块元素的属性。run-in,支持性貌似不太好。为一个块元素声明该属性之后,他会表现为紧跟它之后的块元素的第一个行内框。也就是说,这样写
<h1 style="display:run-in">sss</h1>
<div>eeeeeeeeee</div>
和这样写
<div><span>sss</span>eeeeeeeeee</div>
效果是差不多的。注意两点1.使用了run-in后只有它后面的第一个元素是块元素才有效。2.例子中的h1仍会继承父元素的样式,而不会继承它后面的div的样式。
内边距,边框和外边距
内边距和外边距前面说过了,这里说下边框。边框的颜色默认为文本的颜色,若没有文本,则为父元素文本的颜色。
边框的样式:border-style(单边样式:border-top-styoe | ...)
值:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
继承性:无
默认值:none(此时无论设置宽度为多少,都将变为0)
可以像margin一样,为各个边应用不同的样式时使用简便写法。对于边框的宽度,颜色也是同样。
由于该书的写作方式,没法每次把一个点的内容全讲完(渗透在每个章节中),只先这样一部分一部分总结了。
关于display的值,inline-block是混合了块元素的行内元素的一种特殊存在,这个大家都知道。但是有一点你可能不知道,当他像行内元素一样与文本排列在一行时,表现出的布局方式和替换元素一样。也就是说,margin,padding,border会影响它行内框的高度。
还有一个混合了行内元素和块元素的属性。run-in,支持性貌似不太好。为一个块元素声明该属性之后,他会表现为紧跟它之后的块元素的第一个行内框。也就是说,这样写
<h1 style="display:run-in">sss</h1>
<div>eeeeeeeeee</div>
和这样写
<div><span>sss</span>eeeeeeeeee</div>
效果是差不多的。注意两点1.使用了run-in后只有它后面的第一个元素是块元素才有效。2.例子中的h1仍会继承父元素的样式,而不会继承它后面的div的样式。
内边距,边框和外边距
内边距和外边距前面说过了,这里说下边框。边框的颜色默认为文本的颜色,若没有文本,则为父元素文本的颜色。
边框的样式:border-style(单边样式:border-top-styoe | ...)
值:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
继承性:无
默认值:none(此时无论设置宽度为多少,都将变为0)
可以像margin一样,为各个边应用不同的样式时使用简便写法。对于边框的宽度,颜色也是同样。
相关文章推荐
- css权威指南(下)
- [读书笔记] CSS权威指南1: 选择器
- CSS权威指南-id选择器
- CSS权威指南-line-height缩放因子
- css权威指南学习笔记 —— css选择器
- css权威指南(8):内边距、边框和外边距
- css-css权威指南学习笔记6
- CSS权威指南-属性选择器
- css权威指南学习笔记--第6章
- css权威指南第一章-css和文档-读书笔记(2011/08/28)
- CSS权威指南的一些总结
- 重看css权威指南 part3
- css权威指南(5):字体
- css权威指南中的定位原理
- CSS权威指南学习笔记--Chapter4 值和单位
- css权威指南第五章-字体-读书笔记(2011/09/01)
- CSS权威指南-选择相邻兄弟元素
- HTML&CSS特性(CSS权威指南)
- css权威指南-基本视觉格式化(水平与垂直)
- css权威指南(上)