元素的显示模式

元素的显示模式就是元素以生么方式进行显示，比如<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元素的几种显示模式的更多相关文章

Css - 元素的显示模式
Css - 元素的显示模式块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除前面的话我们可以通过计算样式来读取伪元素的样式信息 ...
CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
CSS 隐藏页面元素的几种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
课时92.CSS元素显示模式转换（掌握）
我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...
使用CSS隐藏HTML元素的四种常用方法
CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

随机推荐

将项目导入eclipse中出现的jsp页面报错
图片摘自百度经验,实在是每次都会忘了步骤,每次都得重新百度,所以索性自己总结到博客中,下次如果还记不住就直接从博客中看.原谅我实在学渣,呜呜~~~~(>_<)~~~~
Java JDK 动态代理实现和代码分析
JDK 动态代理内容一.动态代理解析 1. 代理模式 2. 为什么要使用动态代理 3. JDK 动态代理简单结构图 4. JDK 动态代理实现步骤 5. JDK 动态代理 API 5.1 java ...
JavaScript遍历表单元素
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
【深度学习论文篇 01-1 】AlexNet论文翻译
前言:本文是我对照原论文逐字逐句翻译而来,英文水平有限,不影响阅读即可.翻译论文的确能很大程度加深我们对文章的理解,但太过耗时,不建议采用.我翻译的另一个目的就是想重拾英文,所以就硬着头皮啃了.本文只 ...
Shiro+springboot+mybatis(md5+salt+散列）认证与授权-02
代码延续地址:Shiro+springboot+mybatis(md5+salt+散列)认证与授权-01 1.创建t_role角色表(比如管理员admin,普通用户user等),创建t_pers权限表 ...
Spring Boot配置druid监控页功能
1.导入坐标 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http ...
Blazor Bootstrap 组件库语音组件介绍
Speech 语音识别与合成通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...
条件表达式和switch语句
一,条件表达式相当于(相当于if-else) 1.条件表达式 ? : 由条件运算符组成条件表达式的一般情况为: 表达式1?表达式2:表达式3: 求值规则:如果表达式的值为真,则以表达式2的值作为条件的 ...
攻防世界-MISC:SimpleRAR
这是攻防世界新手练习区的第十题,题目如下: 点击下载附件1,是一个RAR文件,解压一下,得到flag.txt文件,激动的点进去看一下好吧,就知道没有这么简单,用010editor打开这个RAR文件, ...
JS 中对象基础认识
俗话说:"万物皆对象",在 Javascript 中除了原始值几乎所有的东西都可以看做对象: 布尔是对象( new 关键词定义) 数字是对象( new 关键词定义) 字符串是对象 ...

CSS元素的几种显示模式