CSS样式中的display属性学习记录

最新推荐文章于 2023-10-18 15:49:39 发布
最新推荐文章于 2023-10-18 15:49:39 发布
阅读量263 收藏
点赞数
分类专栏： Vue 文章标签： display vue block inline inlineblock
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ioszhanghui/article/details/96255640
版权

在CSS样式中，最常用到的display属性有三个，block,inlineblock,inline,分别从1.是否独占一行2.是否能设置宽高3.margin和padding是否有效。

  • block属于块级 
  1. 块级元素默认是独占一行的，且宽默认是父元素的100%，如果设置了宽高，依然是占据一行
  2. 可以设置元素的宽高
  3. 在设置外边距margin和padding时均有效
  • inlineblock  行块级
  1. 兼具inline的一行排列效果
  2. 也有宽高设置效果
  3. 在设置外边距margin和padding时均有效
  • inline 行内元素
  1. inline的只有一行排列效果，当内容超过一行 无法放下时，才会，排列到下一行
  2. 没有有宽高设置效果，且内容有多大 就会占据多大的地方
  3. 在设置外边距margin和padding时，只有左右边距有效，上下边距是无效。

注意：块级元素设置成inline inlineblock时，会产生元素的左右边距，可以在父级元素上 设置font-size:0;

<html>
<head>
	<style type='text/css'>
	.block_div{
		width: 400px;
		height: 150px;
		background: red;
		font-size: 0;
	}
	*{
		margin: 0px auto;
	}
	.block_div2{
		width: 30px;
		height: 20px;
		background: green;
		/*内联元素设置*/
		/*display: inline;*/
		font-size:15px;
		display: inline-block;;
	}
	.block_div1{
		/*外边距设置*/
		margin-top: 30px;
		height: 20px;
		background: yellow;
		/*内联元素设置*/
		/*display: inline;*/
		font-size:15px;
		display: inline-block;;
	}
	.block_div3{
		color: green;
		padding: 10px;
		width: 250px;
		background: brown;
		font-size:15px;
		/*内联元素设置*/
		/*display: inline;*/
		display: inline-block;;
	}
	.block_div4{
		height: 20px;
		background: blue;
		/*内联元素设置*/
		/*display: inline;*/
		font-size:15px;
		display: inline-block;;
	}

	</style>
</head>
<body>
	<!--block块级元素-->
<!-- 	<div class='block_div'>
		<div class='block_div2'></div>
		<div class='block_div1'></div>
		<div class='block_div3'>自动填满父级内容且有设置边距</div>
		<div class='block_div4'></div>
	</div> -->
	<!--inline块级元素-->
	<div class='block_div'>
		<div class='block_div2'>1</div>
		<div class='block_div1'>2</div>
		<div class='block_div3'>自动填满父级内容且有设置边距</div>
		<div class='block_div4'>4</div>
	</div>

</body>
</html>

学习博客：

https://www.jianshu.com/p/c7e9375ba185

ioszhanghui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中display属性
whaxrl的专栏
07-11 854
 一、css中display可以取的值   值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表
css样式之：display属性
web工程师——小发发
03-16 455
首先介绍一下什么是行内元素、块元素、行内块元素。 行内元素：一行放置多个，没有宽和高； 块级元素：一行只能放置一个，有宽和高； 行内元素：一行放置多个而且有宽和高。 display:block; //此元素将显示为块级元素，此元素前后会带有换行符。 display:none; //此元素不会被显示 display:inline; //默认。此元素会被显示为内联元素，元素前后没有换行符。 display:inherit; //规定应该从父元素继承display属性的值. ...
CSS 之 display属性详解
weixin_45092437的博客
10-18 1万+
display的属性值有：block、inline、flex、grid、table、flow、flow-root、ruby、list-item、table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container等等。
CSS学习笔记（三）display属性
weixin_34015336的博客
04-03 66
　　display 属性规定元素应该生成的框的类型。默认值：inline 　　我们常用的display属性值有：inline、block、inline-block、none； 1 <style> 2 .inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}...
学习笔记18:CSS清除浮动
01-08
在CSS布局中，浮动元素（float）经常被用来创建多列布局或使文本环绕图片等效果。然而，浮动元素会带来一个问题，即它们可能会导致其父元素的高度塌陷，也就是父元素不再包含其浮动子元素，这在设计复杂的网页布局时...
css样式 的笔记AAAAAAAAAAAA
11-18
【CSS样式笔记】 CSS（Cascading Style Sheets）是一种用于定义网页中元素样式的语言，它使得内容与表现分离，让网页设计更加灵活和可维护。这篇笔记主要涵盖了CSS的基础概念和常用属性。 1. 选择器与注释 CSS中...
CSS样式学习笔记之一：基础知识
05-24
在CSS（层叠样式表）的学习中，基础知识是构建网页美观和功能性的基石。这篇学习笔记将引导我们深入了解CSS的...通过阅读这篇"CSS样式学习笔记之一：基础知识"，以及参考提供的博客链接，相信你会对CSS有更深入的理解。
CSS（层叠样式表）笔记.txt
08-21
#### 二、CSS样式规则 - **基本构成**：每条样式规则由选择器和声明块两部分组成。 - **选择器**：定义样式应用于哪些HTML元素。 - **声明块**：包含一系列属性-值对，用来具体定义样式效果。 #### 三、选择器...
CSS学习笔记（手写版）
最新发布
07-26
- **基础概念**：媒体查询允许根据不同的屏幕尺寸和分辨率改变CSS样式，从而实现响应式设计。 - **语法**：使用`@media`规则，例如`@media (max-width: 768px)`表示当屏幕宽度小于等于768像素时应用特定的样式。 ...
CSS之display样式
weixin_30552811的博客
02-08 275
一、前言 　　行内标签：类似span，无法设置高度，宽度，padding，margin 　　块级标签：类似div，可以设置高度，宽度，padding，margin 　　默认情况下是这个样子的，但是可以通过display来进行设置 二、display样式 　　2.1 display：inline 　　作用：可以将块级标签转换成行内标签 <head> &lt...
CSS中display属性
09-11 500
CSS中display属性 值 描述 none 此元素不会被显示 block 此元素将显示为块级元素，此元素前后会带有换行符 inline 默认。此元素会被显示为内联元素，元素前后没有换行符 inline-block 行内块元素 list-item 此元素会作为列表显示 run-in 此元素会根据上下文作为块级元素或内联元素显示 ...
css中的display属性
gagaprince的代码世界
01-17 887
css中经常使用的一个属性display相信大家都不陌生,我们经常使用它来控制一个标签的显示隐藏,也经常使用它来改变标签的显示水平，从而达到我们各种布局的要求，下面来讨论一下display属性： display的属性常用的有四种，none、block、inline、inline-block。 none：显示水平为none的标签都不会渲染，这里说的不显示，不是说显示透明，而是压根不会渲染
CSS中的display属性
sinat_36713319的博客
12-16 1542
CSS中的display 属性规定元素应该生成的框的类型，几乎所有的主流浏览器都支持这个属性。 可能的值包括（摘自W3S） 简要说明几个常用的属性 1、none属性 将元素设置为none属性后，元素将不予显示.none属性 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。 1、inline属性： 元素生成行内框，对于该行内框设置属性height和width是没有
CSS的display的显示属性
sinat_41660714的博客
11-10 536
display属性 关于display属性，在w3c官方文档中给出的解释是用来定义建立布局时元素生成的显示框类型。我们可以简单理解为定义一个元素应该如何显示 1，none <div class="hide"></div> <style> .hide{ width: 100px; height: 100px; background...
css3的display:table布局
热门推荐
Bessicxie的博客
11-19 3万+
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。display:table=>相当于“table”标签； display:table-row=>相当于“tr”标签； displa
CSS中样式 display 属性 inline，block及inline-block
piaoxuan1987
05-31 1702
div 元素默认display属性为block 为块状元素，无论div中文字字数，总以块状显示，即占满浏览器宽度。 [html] view plaincopy div style="background-color:red;">测试测试div>   [html] view plaincopy
CSS基础 -- display属性
weixin_41387874的博客
08-27 460
display属性 块元素和行内元素 block元素 块元素在浏览器显示中独占一行，并且排斥其他元素与其位于同一行。（显示效果上独占一行。） 常见的6种块元素 h1-h6 p div ul ol hr 块元素可以容纳其他行内元素或块元素。 块元素可以设置width属性和height属性。 块元素可以定义4个方向上的margin。 inline元素 行内元素可以和其他元素同占一行。 常见的4种行内元素 strong em a span 行内元素可以包含其他.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值