了解HTML 元素分类

2024-06-04 06:11:33

　　HTML中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不同造成的结果.

　　块级元素

　　在HTML中, <div>, <p>, <h1>, <form>, <ul>, <ol>, <li>等标签就是块级元素, 每个块级元素一般都具有相同的特点.

　　1, 每个块级元素都从新的一行开始, 并且其后的元素也另起一行. (也就是块级元素就要自己占一行, 后面的也得让路)

　　2, 元素的高度, 宽度, 行高以及顶和底边距都可设置.

　　3, 元素宽度在不设置的情况下, 是它本身父容器的100%, 也可以单独进行的设置.

　　内联元素

　　区别于块状元素, <span>, <a>, <label>, <strong>, <em>就是典型的内联标签(行内元素)元素, 大家在使用过程中其实在布局上面是没太大的变化的, 它们修改的只是行内的一些视觉或者点击效果等等.

　　当然, 内联元素也有自己的一些特点, 这些和块级元素都是一一对应的.

　　1, 内联元素和其他元素都是在一行上, 而不会排挤其他的元素,

　　2, 元素的高度, 宽度以及顶部底部边距不可设置(因为元素都是行内紧挨着, 你如果设置这些, 那么元素不就都乱了).

　　3, 元素的宽度就是它包含的文字或图片的宽度, 不可改变.

　　内联块状元素

　　这种元素非常少, 它们同时具备两种元素的特点, <img>, <input>这两个标签就是内联块状元素. 就不多做介绍了.

　　

　　这三种元素是可以互相转化的, 也就是说可以通过css强制修改其元素类型, 只需要设置display的属性即可, 假如想要将内联元素<span>类型修改为块级元素, 代码如下

　　span{

　　　　display:block;

　　}

　　同理其他的也是一样的属性值不同而已, 修改为块级元素:block, 修改为内联元素:inline, 修改为内联块状元素:inline-block.

　　这三种元素一定要非常准确的掌握, 因为在div + css布局中, 它们占了举足轻重的地位.

　　

转载于:https://www.cnblogs.com/JianweiWang/p/5188886.html

了解HTML 元素分类相关推荐

2017-1-7 html元素分类（1）
html元素分类结构性元素 section 在web页面应用中,该元素也可以用于区域的章节描述 header 页面主体的头部 footer 页面的底部 nav 专门用于菜单的导航.链接导航的元素 a ...
阅读类型HTML,W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)
HTML4中,元素被分成两大类: inline(内联元素)与block(块级元素).但在实际的开发过程中,因为页面表现的需要,前端工程师经常把inline元素的display值设定为block(比如a ...
html元素分类以及嵌套规则
2019独角兽企业重金招聘Python工程师标准>>> 一.html元素分类 html元素分为块级元素和内联元素. block(块)元素的特点: ①总是在新行上开始: ②高度,行高以 ...
深入css布局 (1) — 盒模型元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
css知识笔记（一）——基础知识、选择器、元素分类
CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{f ...
html:(38):元素分类和块级元素
元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
C++学习之路 | PTA乙级—— 1075 链表元素分类 (25 分)（精简）
1075 链表元素分类 (25 分) 给定一个单链表,请编写程序将链表元素进行分类排列,使得所有负值元素都排在非负值元素的前面,而 [0, K] 区间内的元素都排在大于 K 的元素前面.但每一类内部元 ...
html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
CSS快速学习5：文本溢出和XHTML元素分类
文本溢出 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会出现在元素框之外: ...
那些是html5新增元素类型,HTML5 元素分类
HTML5 元素分类发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...

最新文章

热门文章