1.分类:内联元素分为替换元素和非替换元素
MDN上对可替换元素是这么说的
翻译过来就是
这些特殊的行内元素,虽然不换行,但可以设置宽高,四周padding和margin
而普通的行内元素(非替换元素,向span,a等)不能设置宽高,四周margin无效,四周padding有效,
但上下padding比较特殊,不会撑大内容区,但会撑大行高(line-height),下面我们细说
!此处注意:虽然替换元素特殊,但也是行内元素,下面介绍行内元素的一些概念
每个行内元素都有一条基线,规则如下
1.非替换元素中的基线是英文字母x的下端,什么意思,如图,红色的就是这个非替换元素的基线
2.替换元素中的基线就是margin-bottom的外沿
有了基线的知识,我们现来说说一行的行内元素是怎么排列的,只有两步
1.找到本行第一个行内元素,确定它的基线
2.找到下一个行内元素,确定它的基线并与第一个基线对齐,以此类推,直到排完本行内的所有行内元素
等一行的行内元素都排完了,这一行的行框就确定了,为什么叫行框,那肯定是把一行的行内元素都包含进去的框嘛,所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。
line-height就是行内元素的内容区+padding,也就是一个行内元素的top line 到bottom line的距离
所以设置line-height为父盒子高度的一半就可以把元素挤到中间。
设置行内元素和本行框基线的对齐方式
伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection
:first-letter
指定一个元素第一个字母的样式
注意1:所有前导标点符号应与第一个字母一同应用该样式
注意2:只能与块级元素关联
注意3:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-letter中存在连接符的原因
:first-line
设置元素中第一行文本的样式
注意1:只能与块级元素关联
注意2:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-line中存在连接符的原因
:before(IE7-浏览器不支持)
在元素内容的最开始插入生成内容
注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用
:after(IE7-浏览器不支持)
在元素内容的最后插入生成内容
注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用
::selection(IE8-浏览器不支持)
匹配被用户选择的部分
注意1:firefox浏览器需要添加-moz-前缀
注意2:只支持双冒号写法
注意3:只支持颜色和背景颜色两个样式
下面是伪元素的速查表
【content属性】
content属性应用于before和after伪元素
【1】 <string>里面的内容会原样显示,即使包含某种标记也不例外。
注意1:如果希望生成内容中有一个换行,则需要使用\A
注意2:若是一个很长的串,需要它拆分成多行则需要用\对换行符转义
【2】 <uri>
【3】attr( <identifier>)
<补充>【quotes属性】
管理引号
【4】open-quote|close-quote
【5】counter
首字下沉
钉子效果
图片叠加效果
html元素表现的差异性:虽然html被称为一种标准,但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。
最终,通常的做法是:我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。
比如很多标签有初始的margin,或padding,或字的大小或粗细,斜体等等效果,则我们使用一些css设置将这些初始表现全部“清空”,比如:
这样之后,所有的每个标签所需要的表现,都需要我们自己来使用css设置。
实际应用中,我们一般都是使用一个通用的css文件来完成此工作。
写在<link rel="stylesheet" type="text/css"href="css/init.css" />
。。。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
以上就是12个:
除此之外,我们还有3个设置线的某方面特性的综合属性:
border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。
比如:border-style:solid dashed 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。
还有:4个设置每个方向边框的所有特性的综合属性:
最后,一个最大的综合属性:一次性设置4个方向的3个特性:
border: 线型 线宽 线颜色;
盒子还有背景属性。
背景分两种:
* 背景颜色:只能是纯色,全平铺——css3里面已经可以设置过度色。
background-color:颜色值;
* 背景图片:需要设置图片路径,还可以设置是否重复(平铺),怎么重复,怎么定位。
background:背景色值 背景图值 背景图重复性值 背景图定位值;
以上4个值,几乎可以任意省略(也就是任意使用其中某些)。
其实块盒子和行内盒子的所谓初始表现,并不是什么决定的东西,而只是一个属性的初始值问题:
对块盒子,其display属性的值默认是block
对行内盒子,其display属性的值默认是inline;
实际上,我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。