HTML中块状,内联内联块元素区分

html的元素可分为三种:块状,行内,内联块

1、块状元素
特点:
1)一个块级元素独占一行
2)元素的高度,宽度,行高以及顶部和底部边距都可以设置
3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)除非设定一个宽度
如:div,h标签,p,form,ul,li

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

3、内联块元素
就是同时具备内联元素和块元素的特点
1)和其他元素都在一行上
2)元素的高度,宽度,行高以及顶部和底部边距都可以设置
如:img,input

4、display属性值
block:块级元素
inline:内联元素
inline-block:内联块元素

原文地址:https://www.cnblogs.com/chen-wei123/p/12527163.html

时间: 2024-08-09 19:47:13

HTML中块状,内联内联块元素区分的相关文章

18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 margin相关技巧 1.设置元素水平居中: margin:x auto;2.margin负值让元素位移及边框合并 外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合

html常见的块元素与内联(行内)元素用法说明(一)

html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身大小的元素,不会占用一行.主要用于选中文本设置样式. div块元素仅仅只用于进行页面布局,它自身不带任何默认样式. span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式. 一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素. a元素可以包含任意元素,除了其本身. p

web前端入门到实战:html常见的块元素与内联(行内)元素用法说明

html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身大小的元素,不会占用一行.主要用于选中文本设置样式. div块元素仅仅只用于进行页面布局,它自身不带任何默认样式. span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式. 一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素. a元素可以包含任意元素,除了其本身. p

3.3 块元素 内联元素 内联块元素

元素就是标签,布局中常用的有三种标签,块元素 .内联元素.内联块元素 3.3.1 块元素 块元素,也可以称为行元素,布局中常用的标签有:div \ p\ ul\ li \h1-h6\ dl\ dt\ dd等都是块元互:它在布局中的行为: a.支持全部的样式 b.如果没有设置宽度,那么默认的宽度为父级宽宽的100% c.盒子占据一行,即使设置了宽度 3.3.2 内联元素 内联元素,也可以称为行内元素,布局中常用的标签如:a  pan  em  b  strong  i等,它们在布局中的行为: a.

巧用CSS居中未知高度的块元素

在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .parent { width: 200px; height: 200px; margin: auto; border: 1px solid red; position: relative; } .child { position: absolute; width: 100px; height: 50%; to

【HTML入门】Html中块状元素和内联元素解析

[HTML入门]Html中块状元素和内联元素解析 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,内联元素(inline element)一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素 我们先来分析一下块级元素.内联级元素的定义和解析: 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“fo

html中的块元素和内联元素的区别

一.定义 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,可设置高度.宽度和边距等. 内联元素一般都是基于语义级的基本元素,它只能容纳文本或其他内联元素,主要特点是:和其他元素位于同一行上,高度.宽度和边距不可改变. 二.分类 块元素(block element) * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易,也是css layout的主要标签 * dl - 定义列表 * fi

html中内联元素和块元素的区别、用法以及联系

昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" style="width:300px;"> <li><a href="javascript:__doPostBack('BulletedList1','0')">课程更新</a></li><li><a

2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit