元素的显示模式

元素的显示模式就是元素以生么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素。

块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<li>等，其中<div>是最典型的块元素。

特点

  • 块元素独占一行。

  • 高度、宽度、外边距以及内边距都可以控制。

  • 宽度默认是容器（父级元素）的100%。

  • 是一个容器及盒子，里面可以放行内或块级元素。

注意

  • 文字类的元素内不能使用块元素。

行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点

  • 相邻的行内元素在一行上，一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是他本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。

注意

  • 链接里面不能放链接。
  • 特殊情况链接<a>里面可以放块级元素，但是需要转换为块级模式。

行内块元素

在行内元素中有几个特殊的标签，<img/>,<input/>,<td>他们同时拥有块元素和行内元素的特点。

特点

  • 相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。
  • 默认宽度就是它本省内容的宽度。
  • 高度，行高，外边距以及内边距都可以控制。

a标签元素显示模式的转换

a元素是行内元素，但是特殊情况下我们可以进行元素模式的转换。

给a标签设定样式display即可完成转换。

  • display: block 转换为块元素。
  • display: inline 转换为行内元素。
  • display: inline-block 转换为行内块元素。
<style>

    a {

		display: block;

    }

</style>

<body>

    <a herf="#">转换为块元素</a>

</body>

CSS元素的几种显示模式的更多相关文章

  1. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

  2. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  3. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  4. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  5. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  6. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

  7. CSS“隐藏”元素的几种方法的对比

    本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...

  8. 课时92.CSS元素显示模式转换（掌握）

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  9. 使用CSS隐藏HTML元素的四种常用方法

    CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

随机推荐

  1. 【Android开发】【布局】各种TabLayout样式

    Demo

  2. 记住用户名和登录密码+虚拟机没有root权限解决办法

    今日所学: 记住用户名和登录密码 用adb查看保存文件内容 如何使用adb 如何安装adb-百度经验 遇到的问题: 用adb查看文件时,没有权限访问data文件 出现原因:google play虚拟机 ...

  3. numpy教程01---ndarray的创建

    欢迎关注公众号[Python开发实战], 获取更多内容! 工具-numpy numpy是使用Python进行数据科学的基础库.numpy以一个强大的N维数组对象为中心,它还包含有用的线性代数,傅里叶变 ...

  4. 面试官：请分析一条SQL的执行

    最近一直在写<手撕MySQL系列>文章,我发现自己的切入点有一些问题,虽尝试深入探究MySQL中的一些关键特性,但对于MySQL的知识掌握不太能够形成较好的体系化的知识网络.我感到在对全局 ...

  5. [已解决] 含gorm、sqlite3包的go程序构建失败 C:\Program Files\Go\pkg\tool\windows_amd64\link.exe: running gcc failed: exit status 1

    gorm官方文档教程实例,构建出现错误.C:\Program Files\Go\pkg\tool\windows_amd64\link.exe: running gcc failed: exit st ...

  6. 2021.08.06 P4392 Sound静音问题（ST表）

    2021.08.06 P4392 Sound静音问题(ST表) [P4392 BOI2007]Sound 静音问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 序列a,求 ...

  7. petite-vue源码剖析-逐行解读@vue-reactivity之effect

    当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行. // ./effect.ts export ...

  8. Intellij IDEA 高效使用教程 (插件,实用技巧) 最好用的idea插件大全

    安装好Intellij idea之后,进行如下的初始化操作,工作效率提升十倍. 一. 安装插件 1. Codota 代码智能提示插件 只要打出首字母就能联想出一整条语句,这也太智能了,还显示了每条语句 ...

  9. Springmvc01-什么是Springmvc

    首先,我们回顾一下什么是MVC 1.什么是MVC   MVC是模型(model),视图(View),控制器(Controller)的简写,是一种软件基本规范 Model(模型):数据模型,提供要展示的 ...

  10. Nginx编译安装及常用命令

    一个执着于技术的公众号 前言 前面我们已经了解Nginx基础入门知识,今天就带大家一起学习下Nginx编译安装部署 准备工作 一台linux机器(本次实验以CentOS 7.5为例) 到Nginx官方 ...