一、典型代表

  • span
  • a
  • ,strong
  • em
  • del,
  • ins

二、特点：

  • 在一行上显示
  • 不能直接设置宽高
  • 元素的宽和高就是内容撑开的宽高。
<style type="text/css">

        span{

/*无效

            width: 600px;

            height: 600px;

*/

/*            color: red;*/

        }

        .box{

            width: 500px;

            height: 500px;

            background-color: #888;

        }

        .box span{

            background-color: red;

        }

    </style>

</head>

<body>

   <span>行内标签,不能直接设置宽高</span> <br>

   <a href="#">超链接</a>

   <strong>强调</strong>

   <em>强调</em>

   <del>删除</del>

   <ins>下划线</ins><br>

<!--   给行内元素定义宽高的方法-->

  <div class="box">

      <span>行内元素的宽高不随父元素变化，元素的宽和高就是内容撑开的宽高。</span>

  </div>

CSS行内元素的更多相关文章

  1. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  2. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

  3. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  4. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

  5. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  6. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  7. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

  8. css 行内元素设置宽高

    有2中实现方法: 1.设置display:block   inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...

  9. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

随机推荐

  1. 如何大幅提高百度云文件的下载速度？油猴+user-agent-switcher+PanDownload使用教程

    最近尝试了提高百度云下载速度的方法,最后效果还不错,提供给大家参考.效果如图: 第一步:下载油猴插件 (截图来自word文档,所以是反的^_^||) 第二步:在油猴中添加新插件 搜索百度网盘  添加插 ...

  2. (四) Docker 使用Let's Encrypt 部署 HTTPS

    参考并感谢 周花卷 https://www.jianshu.com/p/5afc6bbeb28c 下载letsencrypt镜像(不带tag标签则表示下载latest版本) docker pull q ...

  3. nginx.conf配置demo

    #user nobody; worker_processes 4; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  4. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  5. 英文FRAUNCE法国FRAUNCE单词

    France Alternative forms Fraunce In Fraunce, the inhabitants of one city were driven out and forced ...

  6. nepenthes用法

    安装 # apt-get install nepenthes 配置文件 # vi submit-file.conf submit-file { path "/var/lib/nepenthe ...

  7. VSCode 控制台面板输出乱码 字符编码问题 PHP --已解决

    首先上一张效果图,看看是不是你想要的效果. 第一步: 按F1,输入settings.json,添加 "code-runner.runInTerminal": true, 第二步:将 ...

  8. Apache 正向代理与反向代理配置

    Apache提供了 mod_proxy 模块用于提供代理服务,能够支持的包括正向代理.反向代理.透明代理.缓存.负载均衡,HTTP代理.FTP代理.SSL代理等若干强大的功能. 配置代理方法很简单那, ...

  9. 多线程之美6一CAS与自旋锁

    1.什么是CAS CAS 即 compare and swap 比较并交换, 涉及到三个参数,内存值V, 预期值A, 要更新为的值B, 拿着预期值A与内存值V比较,相等则符合预期,将内存值V更新为B, ...

  10. MySQL/MariaDB数据库的mysqldump工具备份还原实战

    MySQL/MariaDB数据库的mysqldump工具备份还原实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.mysqldump概述 1>.逻辑备份工具 mysq ...