CSS —— display属性

用于指定一个元素在页面中的显示方式

HTML中标签元素大体被分为三种类型:块元素、行内元素和行内块元素

块元素 :block

1.独占一行

2.水平方向,占满它父元素的可用空间(宽度是父级的100%)

3.垂直方向,占据的空间由其内容大小决定

4.可以通过 css 属性 widthheight 设置该元素的宽和高(添加宽高都生效)

常见的block模式下的元素:

复制代码
div
main
ul
li
p
address
article
aside
blockquote 
dd
dl
dt 
footer
form
h1 h2 h3 h4 h5 h6
header 
hr
nav
ol
pre
section
table
行内元素 :inline

1.一行可以显示多个

只要 当前行有剩余空间可以容纳自身内容,就会显示在里面;如果没有剩余空间,才会移到下一行。

如果前面的兄弟元素是inline模式,往往会在同行显示

如果前面的兄弟元素是block模式,则会在不同行显示

2.宽度和高度默认由内容撑开

3.css 属性 width 、 height 不起作用(设置宽高不生效)

复制代码
span
a
audio
b
br
button
canvas
em
embed
i
iframe
img
input
label
select
strong
svg
textarea
video
行内块元素:inline-block

1.一行可以显示多个

2.可以设置宽高

display:block;(将元素转换为块元素)

display:inline;(将元素转换为行内元素)

display:inline-block;(将元素转换为行内块元素)

display:none;(元素将被隐藏)

display:flex;(将元素作为弹性盒子显示)(弹性布局)

采用flex布局的元素,称为 Flex 容器(flex container),简称"容器"

display:grid;(将元素作为网格容器显示)

display:table;(将元素作为表格显示)

本文参考自:界面布局 - 基本规则 | 白月黑羽

display属性详解_display:block属性-CSDN博客

弹性布局(display:flex;)属性详解_弹性布局的属性有哪些-CSDN博客

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript