您的位置: 翼速应用 > 业内知识 > web前端 > 正文

一起聊聊CSS a是不是行内元素

CSS a是行内元素吗?答:是的。行内元素一般是内容的容器,宽度和高度依据内容而定,不可以设置,可以和其它元素和平共处于一行。而a元素用于设置超链接,不会独占一行,可以和其他行内元素在一行上显示;且a元素的宽度和高度依据内容而定,height和width属性无法起作用,外边距属性margin-top和margin-bottom也无法起作用。


一起聊聊CSS a是不是行内元素


本文适用于windows7系统、CSS3&&HTML5版、Dell G3电脑。


一起聊聊CSS a是不是行内元素


CSS a是行内元素。行内元素一般是内容的容器,没有自己的独立空间,它是依附于其他块级元素存在的。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和高度依据内容而定,不可以设置,可以和其它元素和平共处于一行。行内元素适合显示具体内容。


行内元素的特点:


●  和其他元素都在一行上;


●  高度、行高和顶以及底边距都不可改变;


●  宽度就是它的文字或图片的宽度,不可改变。


总的来说,行内元素一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他行内元素,通常被包括在块元素中使用,常见行内元素有“a、span、b、br”等。


a不会独占一行,它和其他元素都在一行上:


<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
             a{
                background-color: red;
            }
        </style>
    </head>
 
    <body>
        <a href="#">a标签</a> <a href="#">a标签</a><span>span标签</span>
    </body>
 
</html>


 a不会独占一行,它和其他元素都在一行上


a的高度、行高和顶以及底边距都不可改变:


<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
             a,p{
                background-color: red;
                height: 100px;
                width: 100px;
                margin-top: 50px;
                margin-bottom: 50px;
            }
        </style>
    </head>
 
    <body>
        <a href="#">a标签</a> <a href="#">a标签</a><span>span标签</span>
        <p>p标签</p>
        <span>span标签</span>
    </body>
 
</html>


a的高度、行高和顶以及底边距都不可改变


a和p标签设置了同样的样式,但a是行内元素,height、width、margin-top、margin-bottom属性都无法起作用;而p是块状元素,这些属性可以起作用。


关于CSS a是不是行内元素的相关内容到这里就结束了,翼速应用平台内有更多相关资讯,欢迎查阅!


我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题