什么时候需要使用display:block;属性?

行内元素和块级元素表现的不同点?

二、行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别

    行内元素会在一条直线上排列,都是同一行的,水平方向排列

    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上

行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

行高决定行内元素的上限(即margin-top和padding-top的设置是否显示出来),当你不设置或者设置的行高小于字体所决定的行高时,行高为默认值,即字体*1.4;

无论行高为多少,margin和padding左右下三个方向可以随意设置并显示,下方向,可以设置,也有对应的盒模型,但是底部的底不是砖头,后面的还是可以冲上来,知道碰到其line-height.





行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。



什么时候需要把行内元素转换为块级元素?

display:block;比较常用于<a><span>这两个标签,因为他们不是块级元素,定义display:block属性后,定义width、height等和长宽相关的css属性才会生效。



行内元素的高度可以用line-height设置,宽度可以用margin和padding,为什么还需要block化?

这在设置单行文字时是有效的,



什么时候会倾向于设置width和height?

你想把文字限定在一个宽度和高度内部,


还没有写完和想清楚,待会再写!!

当我们把元素的display属性设置为block时,会阻止flex-direction属性生效。这是因为display属性同时只会生效一个,当我们将display设置为block时,flex布局失效。为了解决这个问题,我们可以将display属性设置为flex,而不是block。这样,元素既能显示出来,又能保持flex布局的效果。 因此,将display: block属性设置为display: flex可以解决这个问题。这样,我们可以同时实现元素的显示和flex布局的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [display: blockdisplay: flex一块用出现的问题](https://blog.csdn.net/qq_42890921/article/details/129099809)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [详解CSS中的display:flex||inline-flex属性](https://download.csdn.net/download/weixin_38501751/12891643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [display: block 属性影响flex布局](https://blog.csdn.net/m0_65491952/article/details/132038572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值