HTML学习之块级元素和行内元素的特征和区别（一）

这几天在学习HTML，这里总结一下块级元素和行内元素的特征和区别，本文也是来自于其他同行的一些文章，在这里感谢一下那些作者，下面先把这些原文粘贴出来

http://www.cnblogs.com/Jackie0714/p/4923639.html

http://blog.csdn.net/yuyanqiao/article/details/8558118

一，下面从概念的角度来说一下块级元素和行内元素

1.块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

2.行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。

块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

二。块级元素和内联元素的区别

1.块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3.块级元素可以设置margin,padding属性，行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

这里做一些小小的总结。

HTML学习之块级元素和行内元素的特征和区别（一）相关推荐

零基础学习HTML(7)——块级元素和行内元素
文章目录官方资料学习正文注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc. ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
5、HTML块级元素及行内元素
在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
22 块级元素和行内元素
学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素块级元素比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内 ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
块级元素和行内元素，行内块元素
在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签.而某些不会独占一行,典型如 <span> 标签.其实这是因为 CSS 的标签是有区分元素类型的 ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
html块级元素和行内元素吗,块级元素和行内元素有什么区别
块级元素和行内元素的区别:行内元素可以与其它行内元素并排,块级元素独占一行,不能与其他任何元素并列:行内元素不能设置宽高,块级元素可以设置宽高. 本文操作环境:windows10系统.html 5.宏 ...

HTML学习之块级元素和行内元素的特征和区别（一）

HTML学习之块级元素和行内元素的特征和区别（一）相关推荐

最新文章

热门文章