前端---CSS中display-block & display-inline

秒速五厘米 2022-07-24 07:11 197阅读 0赞

display(none/inliine/block/inherit/......)

display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了...

它可以让行内显示为块的元素，变为行内显示，例如

<div> DIV1 </div>

<div> DIV2 </div>

这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了

<div style= "display:inline "> DIV1 </div>

<div style= "display:inline "> DIV2 </div>

DIV1和DIV2这时候显示在同一行了

和 display:inline 对应的是 display:block，block 会让应用了该  [CSS][]  属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

<span style= "display:block "> SPAN1 </span>

<span style= "display:block "> SPAN2 </span>

SPAN1和SPAN2这时候显示分别占一行了

不显示:

display:inline 对应不显示为 display:none

display:block 对应不显示为 hidden

说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。

块级元素：

占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

行内元素：

自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。(比较常用于a span这两个标签，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效)

[CSS]: http://baike.baidu.com/subview/15916/5236737.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS——前端笔记

css前端笔记

傷城~/ 2024年04月22日 06:31/ 0 赞/ 79 阅读

相关前端CSS初始化

一、PC端初始化这里推荐使用淘宝官网的 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, ...

深藏阁楼爱情的钟/ 2024年04月17日 22:15/ 0 赞/ 63 阅读

相关【前端】CSS

一.总体设置 1.内联样式 <!DOCTYPE html> <html lang="en"> <head> <meta

水深无声/ 2024年03月31日 11:19/ 0 赞/ 63 阅读

相关【前端】CSS

目录一.CSS 是什么二.基本语法规范三.引入方式四.选择器 1.选择器的功能 2.选择器的种类

快来打我*/ 2024年03月17日 22:32/ 0 赞/ 66 阅读

相关前端--CSS

CSS介绍　　css：层叠样式表，定义如何现实HTML元素，当浏览器读到一个样式表的时候，它就会按照这个样式表来对文档进行格式化（渲染） css语法　　每个c

痛定思痛。/ 2023年08月17日 16:35/ 0 赞/ 130 阅读

相关前端学习----CSS

目录第一章：CSS—层叠样式表（Cascading Style Sheets） 1.1，软件 1.2，编写的位置 1.3，块元素和内联元素 1.4，样式继承： 1

待我称王封你为后i/ 2023年07月03日 03:16/ 0 赞/ 19 阅读

相关前端面试-CSS

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

秒速五厘米/ 2023年06月13日 09:07/ 0 赞/ 144 阅读

相关 CSS前端动画

CSS动画（animation）结构： @keyframes test { / from或者0% /

旧城等待，/ 2022年09月04日 09:45/ 0 赞/ 178 阅读

相关前端面试CSS

选择器的权重和优先级选择器的类型： id选择器(\myid) 类选择器(.myclassname) 标签选择器

怼烎@/ 2022年03月07日 19:12/ 0 赞/ 244 阅读

相关前端之CSS

一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式

以你之姓@/ 2021年12月21日 03:55/ 0 赞/ 244 阅读