CSS3标签显示模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。 霸道
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊)
注意:
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
- 链接里面不能再放链接。
*块级元素和行内元素区别
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。
行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
标签显示模式转换 (display)
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
CSS3标签显示模式的更多相关文章
- CSS 标签显示模式
标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高 ...
- CSS——标签显示模式(display)
非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...
- 0014 标签显示模式:display(重点)
目标: 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式 什么是标签的显示模式? 标签以什么方式进行显示, ...
- html 标签 显示模式
1.html 标签模式分为三类:块级标签,行内标签(内联),行内块标签 a. 块级标签 典型代表:div.h1~h6.p.ul.ol.li.dl.dt.dd等. 特点:可以设置宽高,独占一行 b.行内 ...
- 标签显示模式(display)
非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...
- ie支持CSS3标签
让IE6/IE7/IE8浏览器支持CSS3属性 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/w ...
- css3标签
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表chrome.safari私有属性 -o代表opera私有属性 border-radius:2em; 向div ...
- css3标签学习总结文章
1. :nth-child和 :nth-of-type 区别 比如: p:nth-child(2) 满足条件:1.必须是p标签:2.必须是父元素的第2个子元素:P:nth-of-type(2) 满足条 ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
随机推荐
- 使用 docker compose 安装 tidb
目标 : 单机上通过 Docker Compose 快速一键部署一套 TiDB 测试集群 前提条件: 1.centos版本在7.3 以上 2.安装git 3.安装docker Docker versi ...
- Win7 VS2017简单编译FFMPEG播放器FFPlay
Win平台简单编译FFPlay播放器,顺便纪念下雷霄骅,一年前刚学FFMPEG时还看过他的博客,昨晚再次搜FFMPEG文章时才知道人已经走了... 做成了视频放到B站 https://www.bili ...
- 【MVC】bootstrap-paginator 分页
[MVC]bootstrap-paginator 分页http://www.cnblogs.com/stoneniqiu/p/4000041.htmlhttp://www.cnblogs.com/Le ...
- excel中vba将excel中数字和图表输出到word中
参考:https://wenku.baidu.com/view/6c60420ecc175527072208af.html 比如将选区变为图片保存到桌面: Sub 将选区转为图片存到桌面() Dim ...
- 学以致用四----centos7.2 安装python3.6
基础配置弄好后,开始搭建环境 本次的目的是安装 python 3.6 一.安装相关的依赖包 在之前的博客里有安装python3.6的步骤,为了避免做重复的步骤.需事先准备好依赖包 yum instal ...
- 上传文件夹+php
最近公司做工程项目,实现文件夹上传 网上找了很久,发现网上很多代码大都存在很多问题,不过还是让我找到了一个符合要求的项目. 对项目的文件夹上传功能做出分析,找出文件夹上传的原理,对文件夹的传输模式深入 ...
- python计算机硬件基础以及变量常量常量池,解释器编译器比较,python的两种运行方式
1.什么是编程语言 语言是一个事物与另外一个事物沟通的介质 编程语言是程序员与计算机沟通的介质 2.什么是编程 编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来 表达的结果就是 ...
- redis状态监控可视化工具RedisLive使用
首先,别人写的工具,赞一下 github地址 https://github.com/nkrode/RedisLive 然后,fork一下,自己加点功能 gui介绍(直接copy的github图片) ...
- 20169207《Linux内核原理与分析》第五周作业
这周的任务主要分为两个方面,第一方面,学习MOOC网上视频第三讲并完成配套的实验.第二方面,学习课本的第四章和第六章. 首先从实验开始讲起,前期我们对Linux内核的源码做了一个简单的了解.包括Mai ...
- 第32讲:List的基本操作实战与基于模式匹配的List排序算法实现
今天来学习一下list的基本操作及基于模式匹配的排序操作 让我们从代码出发 val bigData = List("hadoop","spark") val d ...