html元素分类
目录
一、块级元素(block)
定义:默认情况下,独占一行的元素就是块级元素。
特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。
常见的块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
二、内联元素(inline)
定义:内联元素,也叫行内元素。默认情况下,和其他元素在同一行上,并且元素的高度、宽度等不能设置的元素就是内联元素。
特点:
- 和其他元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置;
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
常见的内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
三、内联块状元素(inline-block)
定义:默认情况下,和其他元素在同一行上,并且元素的高度、宽度等可以设置的元素就是内联元素
特点:
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置。
常见的内联块级元素:<img>、<input>
四、总结
不管是哪种元素,他们之间都可以通过css中的display属性进行相互转换。
html元素分类的更多相关文章
- 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.块级元素(独占一行) 块 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML之元素分类(HTML基础知识)
HTML之元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素). a.块级元素(独占一行) 块级元素:其最明显的特征 ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- PAT(B) 1075 链表元素分类(Java)
题目链接:1075 链表元素分类 (25 point(s)) 题目描述 给定一个单链表,请编写程序将链表元素进行分类排列,使得所有负值元素都排在非负值元素的前面,而 [0, K] 区间内的元素都排在大 ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
随机推荐
- 为smokeping添加日志开启debug
用包管理工具安装smokeping没有自带日志输出,为了定位问题开启日志就成为第一需求. 1.修改smokeping的配置 # vim /etc/smokeping/config.d/General ...
- netbeans工具使用xdebug断点调试php源码
对有有经验的程序员,使用echo.print_r().print_f().var_dump()等函数足以调试php代码,如果需要在IDE工具中使用断点调试,xdebug就是一个非常好的php调试工具. ...
- 加快android studio 编译速度
工程build一次太慢 经过各种搜索 整合以下 仅供参考 1.在下列目录中新建 gradle.properties 文件 /home//.gradle/ (Linux) /Users//.gradl ...
- 解题:HDU 4609 Three Idiots
题面 要求组合的方法显然我们需要对桶卷积,即设$F(x)=\sum\limits_{i=1}^{maxx}x^{cnt[i]}$,然后我们初步的先把$F^2(x)$卷出来,表示选两条边.然后我们发现如 ...
- 【位运算】判断一个数是否为2的n次方
import java.util.Scanner; /** * 功能:用位运算,判断一个数是否为2的n次方. * 思路:用1做移位操作,然后判断移位后的值是否与给定的数相同. */ public cl ...
- API Authentication Error: {"error":"invalid_client","message":"Client authentication failed"}
解决方法:https://github.com/laravel/passport/issues/221 In your oauth_clients table, do the values you h ...
- sqlalchemy多外键关联
一.前言 如果有张表A的多个字段关联另一张表B的一个字段,就如同一个客户表的账单地址和发货地址,同时关联地址表中的id字段. 二.事例 # -*- coding: UTF-8 -*- from sql ...
- unity抗锯齿(Antialiasing)
目前知道的有两种方式,下面依次介绍 一.系统菜单设置法. 这样只能简单去锯齿,要想效果特别明显,看下面的脚本吧. 二.为摄像机挂上一个去锯齿的系统脚本 导入后Assets资源下多了一个包 找到这个脚本 ...
- SMO详解
转自:简书https://www.jianshu.com/p/55458caf0814 SVM通常用对偶问题来求解,这样的好处有两个:1.变量只有N个(N为训练集中的样本个数),原始问题中的变量数量与 ...
- python中的常用模块
python中常用的模块 time: 1)time.localtime([secs]):将一个时间戳转换为当前时区的struct_time.secs参数未提供,则以当前时间为准. 2)time.gmt ...