块元素、内联元素、内联块元素

最新推荐文章于 2022-05-18 21:01:02 发布

小脑斧123

最新推荐文章于 2022-05-18 21:01:02 发布

阅读量132

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/106909906

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

块元素

元素就是标签，不居中常用的三种标签，块元素，内联元素，内敛块元素，了解这三种元素的特性，才能熟练进行页面布局

地元素，也可以成为行元素，不居中常用的标签如：

div
p
ul
li
h1 - h6
dl
dt
dd

都是块元素，他们在布局中的行为：

支持全部的样式
如果没有设置宽度，默认的宽度为父级宽度100%
盒子占一行、即使设置了宽度

内联元素

内联元素，也可以成为内元素，不居中常用的标签如：

a
span
em
b
strong
i

等等都是内联元素，他们在布局中的行为：

支持外部分样式（不支持宽、高、margin 上下、padding 上下）
宽度由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用 text - align 属性设置子元素水平对齐方式

解决内联元素间隙的方法

解决内联元素间隙的方法：

去掉内联元素之间的换行
将内联元素的父级.box设置 font - size 为 0 ，内联元素.box div自身在设置 font - size: 16px;

内联块元素

内联块元素，也叫行内块元素，是增加的元素类型，现在元素没有归于此类别的。img 和 input 元素的行为类似这种元素，但是也归类于内联元素，我们可以用 display 属性将块元素或者内联元素转换为这种元素。他们在布局中表现的行为：

支持全部样式
如果没有设置宽高，宽高由内容决定。
盒子并在一起
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用 text - align 属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转换，不过实际开发中，块元素用的比较多，所以我们经常把内联元素转换为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转换了。

display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置
block 元素以块元素显示
inline 元素以内联元素显示
inline - block 元素以内联块元素显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 300px;
			border: 1px solid #000;
			margin: 50px auto 0;
			font-size: 0;  /*解决内联块元素间隙2.1*/
		}

		.box div{
			width: 100px;
			height: 100px;
			margin: 10px;
			background-color: gold;
		}

		.box a{
			background-color: green;
			width: 100px;
			height: 50px;
			text-align: center;
			font-size: 16px;  /*解决内联块元素间隙2.2*/
			display: inline-block;  /*将块元素或者内联元素内联块元素*/
		}


	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<a href="#">链接文字1</a>
		<a href="#">链接文字2</a>
		<a href="#">链接文字3</a>
	</div>
</body>
</html>

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内块元素</title>
	<style type="text/css">
		.menu{
			width: 694px;
			height: 50px;
			font-size: 0px;
			margin: 15px auto 0;
		}

		.menu a{
			width: 98px;
			height: 48px;
			background-color: #fff;
			display: inline-block;  /*内联块元素*/
			border: 1px solid red;
			font:bold 16px 'Microsoft Yahei';  /*加粗 16 雅黑*/
			margin-left: -1px;  /*去掉双竖线*/
			text-align: center;  /*水平居中*/
			line-height: 48px;  /*垂直居中*/
			text-decoration: none;  /*去掉下划线*/
			color: blue;  /*字体颜色*/
		}


	</style>
</head>
<body>
	<div class="menu">
		<a href="#">首页</a>
		<a href="#">公司简介</a>
		<a href="#">解决方案</a>
		<a href="#">公司新闻</a>
		<a href="#">行业动态</a>
		<a href="#">招贤纳才</a>
		<a href="#">联系我们</a>
	</div>
</body>
</html>

小脑斧123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块元素、内联元素、内联块元素

块元素元素就是标签，不居中常用的三种标签，块元素，内联元素，内敛块元素，了解这三种元素的特性，才能熟练进行页面布局地元素，也可以成为行元素，不居中常用的标签如：div p ul li h1 - h6 dl dt dd都是块元素，他们在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度100% 盒子占一行、即使设置了宽度内联元素内联元素，也可以成为内元素，不居中常用的标签如：a span em b strong i等等都是内联元素，他
复制链接

扫一扫