hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

浅谈块状元素和内联元素之间的区分_WEB前端开发

2019-12-01后端开发ki4网30°c
A+ A-
html中的标签元素大致被分为三种差别的范例:块状元素、内联元素(又叫行内元素)和内联块状元素。那末块状元素和内联元素区分是什么?下面给人人引见一下。

内联元素

在html中,<span>、<em>、<a>、<p>等标签是典范的内联元素。固然块状元素也能够经由过程设置display:inline;显现为内联元素,从而使块级元素具有内联元素的特性。

p{
  display:inline;
}
...<p>我要变成内联元素!</p>

内联元素的特性:

1、和其他元素在统一行上,不独有一行;

2、元素的高度、宽度及顶部底部边距不可设置;

(ps:内联元素的顶部底部边距margin-top及margin-bottom属性不起作用,而margin-left及margin-right属性能够起作用。padding属性top、bottom、left、right也可起作用,然则padding-top属性最多只能撑到浏览器顶部,padding-top高于浏览器顶部,元素不会下移。当为行内元素增加背景时能够运用padding,然则背景色会掩盖四周元素。)

3、元素的宽度就是元素所包括的图片或笔墨的宽度,不可设置;

*:当行内元素之间有“回车”、“tab”、“空格”时就会涌现间隙。

解决方法:写在一行,中心不要有空格、回车之类的标记。

块状元素

在html中<p>、 <p>、<h1>、<form>、<ul> 和 <li>就是块状元素。内联元素能够经由过程设置display:block;显现为块状元素。

如:a{display:block;}

块级元素的特性:

1、每一个块状元素都重新的一行入手下手,而且厥后的元素也另起一行(独有一行);

2、元素的高度、宽度、行高以及顶和底边距都可设置;

3、元素宽度在不设置的情况下,占它本身父容器的100%(和父元素宽度一致);

内联块状元素

内联块状元素(inline-block)就是同时具有内联元素、块状元素的特性,代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这类内联块状标签。

内联块状元素特性:

1、和其他元素都在一行上;

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

引荐进修:HTML视频教程

以上就是浅谈块状元素和内联元素之间的区分的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
浅谈块状元素和内联元素之间的区分_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>