HTML中的元素分类
HTML中有很多的标签(元素),可以按照这些元素在网页中所占的空间情况进行分类。具体可以这样简单的分类:
1.块级元素:指的是在网页中该元素独自占据网页的一行显示区域,即当使用了该元素后,该元素会使下一个元素在下一行展示,也就是产生换行;根据资料的定义是:标签的display属性值为block;
2.行级元素:指的是网页中该元素不会独自占据网页的一整行区域,使用该元素后,还可以直接在该元素的后面显示另一个元素,也就是不会换行;或者根据资料的定义是:标签的display属性值为inline;
3.行内块元素:这类元素的display=“inline-block”,它们的效果是:同样不会换行,可以直接在后面显示其他的元素。
具体代表:
1.块级元素:
2.行级元素:
3.行内块级元素:
使用小技巧:
1.一般情况下,不要使用行内元素嵌套块级元素;
2.在布局中,可以使用元素的display属性,改变元素的默认类别。例如:将a 元素的display设为block后,可以作为块级元素使用,这样可以让链接和其他的元素一起放在同一个块中。
HTML中的元素分类的更多相关文章
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- html标签元素分类
元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...
- CSS学习笔记之元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...
- HTML标签元素分类(HTML基础知识)
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML之元素分类(HTML基础知识)
HTML之元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素). a.块级元素(独占一行) 块级元素:其最明显的特征 ...
- JavaScript中数组元素删除的七大方法汇总
原文链接:https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中,除了Object之外,Array类型恐怕就是最常 ...
随机推荐
- 【disruptor】1、关于disruptor中的SequenceBarrier对象
首先这个类的uml结构在disruptor中是这样的,里面只有部分的属性对象和函数内容,具体有什么作用,用到了再说,用不到我也不会... 1.那么这个对象有什么用呢? 注意我们这个类中有哪些属性: 我 ...
- Centos 7 开启BBR
# 升级内核 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.elrepo.org/elr ...
- linux文件权限说明
# ll total 0 drwxr-xr-x. 2 root root 6 Aug 28 11:07 test1 drwxr-xr-x. 2 root root 6 Aug 28 11:07 tes ...
- IIS:IIS 8.5下设置404错误页
IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...
- ElasticSearch入门3: Spring Boot集成ElasticSearch
第一步:创建项目elasticsearch 编写pom文件 <?xml version="1.0" encoding="UTF-8"?> <p ...
- bower 和 npm 的区别
前端技术和工程实践真的是突飞猛进啊,想当年,我这个半业余前端吭哧吭哧做页面的时候,哪有这么多东西可以用啊,现在先进到我都完全看不懂了.本文主要讲一下同是包管理器的bower和npm的差别. 主要也是在 ...
- jQuery WeUI实现分页功能
使用前记得先引入:weui.min.css.jquery-weui.min.css.jquery-weui.min.js 第一步:将下面的代码放在body结束标签上面(这个位置可以自己按需求放) &l ...
- [java初探05]__数组的简单认识及Arrays类的常用方法
数组是具有相同数据类型的一组数据的集合.在程序设计中,这样的集合称之为数组.数组的每个元素都具有相同的数据类型,在Java中数组也被看为一个对象. 在里,了解了数组的定义之后, 我们知道了,数组并不是 ...
- Java设计模式学习记录-抽象工厂模式
前言 上篇博客介绍了简单工厂模式和工厂方法模式,这次介绍抽象工厂模式,抽象工厂模式和工厂方法模式的区别在于需要创建对象的复杂程度上. 抽象工厂模式 抽象工厂模式是围绕着一个超级工厂创建其他工厂.这个超 ...
- unity 中Canvas MatchHeight
设置了 UI Scale Mode = Scale With Screen Size, Reference Resolution = X 1334, Y 750, Screen Match Mode ...