`

CSS元素分类

    博客分类:
  • CSS
阅读更多

在CSS中,html中的标签元素大体被分为三种不同的类型块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有
<img>、<input>

块级元素特点
设置display:block就是将元素显示为块级元素
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点
当然块状元素也可以通过代码display:inline将元素设置为内联元素
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素特点
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。

分享到:
评论

相关推荐

    jQuery和CSS3超酷元素分类过滤和排序插件

    这是一款使用上非常简单的jQuery和CSS3元素分类过滤和排序插件。这个分类过滤和排序插件使用CSS的matrix()函数来对元素进行排序转换。整个分类过滤和排序的动画过渡十分的平滑。

    CSS基础视频教程

    内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分类等 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    cSS盒模型与HTML元素分类及嵌套原则.pdf

    今天整理电脑时,发现点以前的课件,这是web前端开发html基础课件!以前拾伍用的,现在分享一下!希望有用!

    进一步理解CSS编程中的块级元素和行内元素

    当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。 Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以...

    css彻底设计研究css.pdf+源码

    在本书中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和折迭面板,以及各种...

    HTML5&CSS3网页制作:元素的类型.pptx

    在CSS中,根据它的分类我们可以把HTML元素分为三种类型: HTML 元素类型 块状元素(block) 内联元素(inline) 内联块状元素(inline-block) 块状元素 标签独自占据一行,相邻块状元素不会并列显示,且它的顺序是...

    基于HTML环保主题网页项目的设计与实现——环保垃圾分类(HTML+CSS+JScript).md

    HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】:https://blog.csdn.net/VX_WJ88950106?type=blog

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    《CSS设计彻底研究》【中文PDF+源代码】

    在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和...

    css的选择器

    css选择器,根据w3school整理分类

    CSS Scan 扫描-3.9.4.zip

    名称:CSS Scan 扫描 ... 可视化您立即悬停的任何元素的CSS,并通过单击复制其整个CSS规则。 描述: CSSScan是检查和复制CSS的最快方法。可视化您立即悬停的任何元素的CSS,并通过单击复制其整个CSS规则。

    HTML5&CSS3网页制作:关系选择器.pptx

    CSS3选择器--关系选择器 关系选择器 01 子代选择器(&gt;) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E&gt;F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(&gt;) 示例:设置 h1 ...

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。

    CSS Used-3.0.0.zip

    一键将所有 css 应用到选定的 web 元素及其子元素。 描述: 获取所选DOM及其子级使用的所有css规则。 一键将所有css应用到选定的web元素及其子元素。 --最近更新-- 1.新的。选项页面。 2.新的。保留相对URL的选项...

    CSS入门源代码 CSS入门源代码

    CSS入门源代码 CSS其他选择器(上) CSS其他选择器(下) css选择器 css选择器优先级 css样式设置 列表样式 使用外部样式表 伪类分类 伪类样式 伪元素选择器 文本类样式 字体类样式

    精彩绝伦CSS2

    在Html中人们用表格来制作文本周围的边框,但通过CSS来设置边框将有更出色的效果,而且可以应用于所有的元素。 边框分为上边框、右边框、下边框、左边框。 每个边框有3个方面:样式(或外观)、颜色、以及其宽度...

    详解CSS 去掉inline-block元素间隙的几种方法

    inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来...

    css揭秘,高清文字原版,带书签

    文字原版,高清,带书签,学习css的好资源 译者序 ix 序 xi 前言 xiii 致谢 xv 本书是怎样炼成的 xviii 关于本书 xx 第 1 章 引言 1 Web 标准:是敌还是友 2 CSS 编码技巧 7 ...36 自适应内部元素 173 ...按规范分类 230

Global site tag (gtag.js) - Google Analytics