前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >block、inline和inline-block

block、inline和inline-block

作者头像
大忽悠爱学习
发布2021-11-15 15:17:41
6990
发布2021-11-15 15:17:41
举报
文章被收录于专栏:c++与qt学习c++与qt学习

block、inline和inline-block


行内元素和块级元素

代码语言:javascript
复制
行内元素:又叫内联元素,
特点是行高以及底边距不可改变,只占内容的宽度(高度就是内容文字或者图片的宽度);
行内的元素都会在同一条直线上,也就是水平布局的;
默认不会换行(不强制换行)。
代码语言:javascript
复制
常见的行内元素有:<span>、<br>、<em>、<input>、
<a>、<label>、<img>、<strong>、<select>、<textarea>、<sub>、<sup>、<small>等。
代码语言:javascript
复制
块级元素:是一个元素,占用了全部宽度,在前后都是换行符。
可以设置width、height、padding、margin等属性。
代码语言:javascript
复制
常见的块元素有:<h1~6>、<p>、
<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。

block

  • block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • block元素可以设置margin和padding属性。

inline

  • inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  • inline元素设置width,height属性无效。
  • inline元素的margin和padding属性,水平方向的padding-left, padding-right,margin-left, margin-right都产生边距效果;
  • 但竖直方向的padding-top, padding-bottom, margin-top,margin-bottom不会产生边距效果。

inline-block

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。 比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。


行内元素和块级元素的区别

  • 块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行
  • 块级元素可以设置width和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行
  • 块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果。

常见用法 display

代码语言:javascript
复制
(1)其中块级元素对应display:block
(2)行内元素对应display:inline。
(3)可以通过修改元素的display属性来切换行内元素和块级元素。
(4)display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,
可以让padding和margin生效,又可以和其他行内元素并排。

举个栗子

代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>other</title>
		<style>
			/*将内联元素转成块级元素   将一行变两行*/
			/*span{
				display: block;
			}*/
			ul{
				margin: 0 auto;
				text-align: center;
			}
			/*将块级元素转换成内联元素*/
			ul li{
				line-height: 50px; /*与height设为一致 则字体垂直居中显示*/
				width: 80px;
				display: inline-block;
				height: 50px;
				text-align: center;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
        <p>块级元素</p><p>lalala</p>
        <span style="width: 50px; float: left;">北京</span>
        <span>天安门</span>
        <br />
        <div style="width: 20%;float: left;">济南</div><div style="width: 20%;float: left;">泉城广场</div>
        <br>
        <b>Alubbar</b>
        <a href="#">超链接</a>
        <ul>
        	<a href="#"><li>News</li></a>
        	<li>Sport</li>
        	<li>Read</li>
        	<li>War</li>
        	<li>Games</li>
        </ul>
	</body>
</html>
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-08-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • block、inline和inline-block
  • 行内元素和块级元素
  • block
  • inline
  • inline-block
  • 行内元素和块级元素的区别
  • 常见用法 display
  • 举个栗子
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档