如何判断CSS里面的元素值

html-css013

如何判断CSS里面的元素值,第1张

Jquery css函数用法(判断标签是否拥有某属性) 判断一个层是否隐藏: ("#id").css("display")="none在所有匹配的元素中，设置一个样式属性的值: ("p").css("color","red")把一个“名/值对”对象设置为所有...

Jquery css函数用法(判断标签是否拥有某属性) 判断一个层是否隐藏: ("#id").css("display")="none在所有匹配的元素中，设置一个样式属性的值: ("p").css("color","red")把一个“名/值对”对象设置为所有...

相信大家对行内元素的认识大多是不换行，不能设置宽高，又或者是来自经典的垂直水平居中内联元素的面试题，把line-height设置成父盒子的高度，但在昨天练习切图的过程中，发现将一行内联元素在垂直方向上对齐很困难，特别是包含img元素，于是决定深入了解一下这行内元素的细节

     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为父盒子高度的一半就可以把元素挤到中间。

设置行内元素和本行框基线的对齐方式

1 css中块元素和行内元素的区别 ：行内元素会再一条直线上，是在同一水平线布局的  ； 块级元素各占一行，是垂直方向布局的。

2 第一步把概念说了一下，下面以实际的例子来看行内元素和块元素的区别：

<a>标签是一个行内元素 <p>是一个块元素。从下面的代码中可以看出，

两个<a></a>标签里面的内容明显是没有填满这一行的，所有就紧挨着显示。

<p>标签里面的内容也没有填满整行，但是<p>标签里面的内容却独占一行。

意思就是说：快不管元素里面的内容是什么，他都是独自占一行的。

3 下面是实例的代码，可以复制直接运行就看出效果了：

<!DOCTYPE HTML>

<html>

<body>

<a>123455</a>

<a>789</a>

<p>58962</p>

<a>34567</a>

</body>

</html>

4 块元素和行内元素是可以相互转换的。