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代码,则看不到图片的实际内容;

ccs元素分类 gcelaor的更多相关文章

  1. Web前端开发基础 第四课(CSS元素分类)

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  2. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  3. CSS学习笔记之元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

  4. HTML标签元素分类(HTML基础知识)

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

  5. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  6. HTML之元素分类(HTML基础知识)

    HTML之元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素). a.块级元素(独占一行) 块级元素:其最明显的特征 ...

  7. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  8. PAT(B) 1075 链表元素分类(Java)

    题目链接:1075 链表元素分类 (25 point(s)) 题目描述 给定一个单链表,请编写程序将链表元素进行分类排列,使得所有负值元素都排在非负值元素的前面,而 [0, K] 区间内的元素都排在大 ...

  9. 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

    我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...

随机推荐

  1. Codeforces 993A. Two Squares(暴力求解)

    解题思路(暴力解法) 平行于x轴的正方形和与x轴成45度倾斜的正方形相交的点中必定有整数点.即若两正方形相交,必定存在整数i,j,使(i,j)同时属于两个正方形. 我们把两个正方形中的整数点都找出来, ...

  2. 利用 js 获取地址栏参数

    1.aspx页面,进行页面跳转 window.location.href = "ProviderInfo.aspx?ProviderID="+ProviderID; 2.Provi ...

  3. 如何创建一个asp页面

    Active Server Pages(ASP)文件是以 .asp 为扩展名的文本文件,这个文本文件可以包括下列部分的任意组合: 文本 HTML 标记 ASP 脚本命令 创建 .asp 文件非常容易. ...

  4. 04《UML大战需求分析》之四

    在学习完顺序图之后,流程分析的三种图,我已经学习完了我,但是我还需要大量地锻炼,这样才可以更加熟练地掌握几种图的使用和方法.接下来,我学习了用例图,用来描述系统的行为. 虽然是一同学习的,但是对用例图 ...

  5. 页面定制CSS代码初探(三):设置正文最小高度

    前言 没想到再次写这篇,已经过去1年半了. 现在审美也发生了改变,一开始做的样式全删了,只保留了h2的样式.原先认为界面要宽,两边留太多空很浪费,看惯了知乎和简书,觉得默认最大1000px的排版也不错 ...

  6. Unity 手机屏幕翻转问题 横屏

    1920*1080的图在1080*1920的设备上观看效果: 如果要做横屏游戏,就要改Build中的Player Settings,强制左旋转或右旋转,默认是Auto 垂直于地面的手机在横屏下分辨率是 ...

  7. mysql中redo和binlog的区别

    影响MySQL中redo的配置参数: innodb_log_file_size:指定每个redo日志大小,默认值48MB innodb_log_files_in_group:指定日志文件组中redo日 ...

  8. Unity5.X 开发资源介绍

    Asset 资源 Category 类别 Publisher 开发商 Rating 评级 Version 版本号   Windows → Asset Store 资源商店 [Ctrl + 9]   U ...

  9. mount --bind

    [root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir1 [root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir2 ...

  10. 51nod 1576 Tree and permutation(树的重心+dfn序)

    乍一看我不会. 先不考虑加点. 先考虑没有那个除\(2\). 考虑每一条边的贡献,假设某一条边把这棵树分成大小为x,y的两个部分. 那么这条边最多可以被使用\(min(x,y)*2\)次(因为有进有出 ...