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>

下面讲讲他们的各自特点:

块级元素特点:

1.每一个块级元素都从新的一行开始,并且其后的元素都另起一行。

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

3.元素宽度在不设置的情况下,是它本身父元素的100%,(和父元素的宽度一致),除非设置一个宽度。

内联元素的特点:

1.和其他元素都在一行上

2.元素的宽度,高度,及顶部和底部边距不可设置。

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

内联块状元素特点:

1.和其他元素都在一行上。

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

时间: 2024-11-08 22:29:37

css--元素分类的相关文章

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

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

css元素分类及区别

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 替换和不可替换元素 从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.例如

CSS元素分类

ps:[1]两种元素区别在于能不能设置宽width和高height,是不是独占一行 [2]把块元素转为内联元素,也可以把内联元素转化为块元素. 如p默认是p{display:block;},则可以这样p{display:inline;}转化为内联元素,反之亦然. 特例:图片img是像块元素的内联元素,可以设置width和height(自己的属性),但是不是独占一行. [3]思考题:可以使内联元素浮动,就能使宽高起作用. 版权声明:本文为博主原创文章,未经博主允许不得转载.

块状元素居中、元素分类(块状,内联,内联块状)、内联转块状

块状元素中的文字.图片居中显示: CSS设置:text-align:center <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 如图所

html的标签元素分类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML元素分类</title>    <style type="text/css">    /*浏览器默认样式(外边距和内边距)初始化(所有)*/       *{       margin: 0;       pa

css属性分类介绍

css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性 CSS属性分类 文本/字体/颜色/背景 字体类 font-family:指定字体 需要考虑客户端机器上是否装有字体 可以排列多个字体,用逗号分隔,

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

我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分类 HTML5中,元素主要分为7类: Metadata Flow Sectioning Heading Phrasing Embedded Interactive 这些分类集合互相之间也存在一定的交集(一个元素可以同时属于多个分类),其交集关系呈现为: 需要注意的是,HTML5中的这种元素分类与in

css元素类型详解

时间真是美妙呢!我居然转行学习web前端开发,靠着对她浓厚的兴趣和爱好,终于踏出第一步…… 言归正传,从一周的时间,慢慢学习了html以及css元素类型 一. 总体来说css对显示标签来分类,分为:块状元素  :内联元素(行内元素): 对于这里有一个争议点,分为:可变元素   行内快元素: 那么这些元素在默认的情况下有什么特点呢?块状元素特点:            1:在页面中以矩形区域显示.            2:自上而下排列,独占一行            3:可以直接添加宽高    

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&