ccs元素分类 gcelaor

ccs元素的分类与特点

内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置行内元素:在html中,<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行内元素
     display:inline

—. 块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

1.块级元素(即使内容不满一行时,也会强制独占一行;不会和其他元素公用一行),以下这些都是在网页中经常看到和用到的块级元素:​

div -最常用的块级元素

dl - 和dt dd搭配使用的块级元素

form - 交互表单

h1 - 大标题

hr - 水平分隔线

ol - 排序表单

p - 段落

ul - 非排序列表​

2.行内元素​(在内容不满一行时,会和邻近的其他行内元素公用一行):​​        

a - 锚点

b - 粗体(不推荐)

br - 换行

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

label - 表格标签

select - 项目选择

small - 小字体文本

span - 常用内联容器,定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线​​​

*之所以能不同地显示,是由默认的display属性造成的,通过修改标签的dispaly属性可以将块级元素变成行内元素,将行内元素变成块级元素,所以元素的显示方式是可以修改的,不是固定的。​

区别:块级元素各据一行,行内元素水平排列;​块级元素可以包含行内元素和块级元素,但行内元素不能包含块级元素。     

二 替换元素和非替换元素(根据元素内容是否直接显示在页面上进行分类)

从元素本身的特点来讲,可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;

原文地址:https://www.cnblogs.com/gcelaor/p/gcelaor.html