CSS display常用属性实例以及block inline-block的区别

最新推荐文章于 2023-04-12 21:33:45 发布

必看吧

最新推荐文章于 2023-04-12 21:33:45 发布

阅读量133

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_43665697/article/details/98094240

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

none属性

display:none 后页面不再显示元素但是还是存在的

block属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	.d{
				/* block 块级元素 会自动换行   */
				/* block 块级元素 可以设置width height */
				/* a标签是行内标记 display: block  后会自动换行排列显示*/
				width: 100px;
				height: 100px;
				border: 1px solid black;
				display: block;
			}
        </style>
	</head>
	<body >
   <div align="center">
   		<a class="d" href="#">1111</a>
   	<a class="d"  href="#">2222</a>
   </div>
 
			
	</body>
</html>

显示效果如下:

inline属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	#d{
				/* inline 行内元素 以行形式排列   */
				/* inline 行内元素 不可以设置width height 设置了也没效果 */
				/* div是块标记 display: inline 后 本来自带换行效果也会失效*/
				width: 100px;
				height: 100px;
				border: 1px solid black;
				display: inline;
			}
        </style>
	</head>
	<body >
   <div align="center">
    <div id="d">1</div>
    <div id="d">2</div>	
   </div>			
	</body>
</html>

效果图如下:

inline-block

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	#d{
				/* inline-block 行内块元素 以行形式排列   */
				/* inline-block 行内元素 可以设置width height  */
				/* div是块标记 display: inline-block 后 本来自带换行效果也会失效*/
				/*  inline-block 与blcok相比 以行显示  */
				/*  inline-block 与inline相比 可以设置长度和宽度  */
				/* inline-block 就是可以设置长度和宽度的 inline */
				width: 100px;
				height: 100px;
				border: 1px solid black;
				display: inline-block;
			}
        </style>
	</head>
	<body >
    <div align="center">
        <div id="d">1</div>
    <div id="d">2</div>		
    </div>
 
			
	</body>
</html>

效果图如下:

必看吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS display常用属性实例以及block inline-block的区别

none属性display:none 后页面不再显示元素但是还是存在的block属性<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">...
复制链接

扫一扫