元素的显示模式

元素的显示模式就是元素以生么方式进行显示，比如<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. 【vue 开发】Vue中splice的使用

    splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组) index:数组开始下标 len: 替换/删除的长度 item:替换的值,删 ...

  2. 【Weex笔记】-- Animate.css的使用

    animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用. 一,安装辅助依赖 np ...

  3. 【Android开发】EasyPermissions 请求权限

    安卓6.0以后,开发应用的时候,仅在AndroidManifest.xml中申请权限已经不可以了,需要在代码中动态申请. 现在看一个google推出的机制:EasyPermissions 引入步骤: ...

  4. 微信支付之微信H5支付(坑,ajax不支持重定向跳转)

    这里讲的是  微信h5支付,    是微信以外的手机浏览器调用微信h5支付  h5支付: H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起 ...

  5. MAUI VS Preview 2.1 win 下无法调试ios, 目前无解

    Microsoft Visual Studio Community 2022 (64 位) - Preview 版本 17.2.0 Preview 2.1 报错 严重性 代码 说明 项目 文件 行 禁 ...

  6. pip——重新安装

    原因 没有用管理员的权限安装.导致失败. 并且pip还被卸载了. 使用环境 win10 重新安装pip python -m ensurepip 更新pip 管理员打开cmd python -m pip ...

  7. formdata收集数据

    通常在收集表单的时候我们都要涉及到绑定上传附件,这时候就可以用formdata的形式携带文件流上传给服务器. formData是ajax2.0(XMLHttpRequest Level2)新提出的接口 ...

  8. sourceCRT设置全局字符集为utf-8

    以前刚打开服务器crt字符集都会默认是default模式,搞得每次都要手动设置成UTF-8. 烦躁. 将CRT全局字符集设置成UTF-8格式方法: 设置窗口不会断掉: 即每100s发送一次ls \n ...

  9. linux修改中文字符集

    //修改系统配置 cd /etc/profile //末尾加如下代码 export LC_ALL="zh_CN.GBK"export LANG="zh_CN.GBK&qu ...

  10. partOne讲解思路

    讲解思路   分解:把一个复杂的大问题,拆解成更可执行.更好理解的小步骤. 模式识别:找出相似模式,高效解决细分问题. 抽象:聚焦最重要的信息,忽视无用细节. 算法:设计一步一步的解决路径,解决整个问 ...