css display - 书闪Bookchips

7 - 通用属性 - display:; - 框的类型

作者：

贺及楼

成为作者

更新日期：2024-06-27 11:16:59

作用：框的整体

display:inline;默认，前后没有换行符，可能要加float: right;才生效
display:none;不显示
display:block;前后有换行符
display:inline-block;前后没有换行符，顶对齐    vertical-align: top;
display:inherit;父元素继承 display 属性的值
display: flex; 弹性布局，这个有点6，在检查里可以调 一维布局
display: grid; 网格布局（栅栏布局） 二维布局 划分成"行"和"列"，并产生单元格

`display:flex` 弹性布局

display: flex;
好文章
https://www.cnblogs.com/hellocd/p/10443237.html

有子容器、父容器的分别
https://blog.csdn.net/weixin_46380993/article/details/104572253

`display:grid` 网格布局（栅栏布局）

当一个元素div 设置为 display:grid 或者 display:inline-grid 后
div就变成了一个网格容器，内容内的所有子元素将成为网格元素。


分布	grid-template-columns	指定列的大小，以及网格布局中设置列的数量	/
分布	grid-template-rows	指定行的大小	/
分布	`grid-template-columns: 1fr 1fr 1fr`	一个 fr 代表网格容器中可用空间的一等份	实现三栏均分布局
分布	`grid-template-rows: 1fr 1fr 1fr`	一个 fr 代表网格容器中可用空间的一等份	实现三栏均分布局
分布	`grid-template-columns: 40px 50px auto 50px 40px;`	/	/
分布	`grid-template-rows: 25% 100px auto;`	/	/
间距	grid-column-gap	设置列之间的间距	/
间距	grid-row-gap	设置行之间的间距	/
间距	grid-gap	表示grid-column-gap 和 grid-row-gap属性的缩写	/
	grid-column	表示grid-column-start 和 grid-column-end属性的缩写	/
	`grid-column：1 / 5`	表示从第 1 列开始，第 5 列结束	/
	grid-row	表示grid-row-start 和 grid-row-end属性的缩写	/
	`grid-row：1 / 5`	表示从第 1 行开始，第 5 行结束	/
	grid-template-areas	划定区域	/
顺序	grid-auto-flow	排列顺序	/
对齐	justify-items	控制单元格内容的水平对齐	/
对齐	align-items	控制单元格内容的垂直对齐	/
对齐	place-items	justify-items和align-items的合并简写形式	/
位置	justify-content	控制整个内容区域在容器中的水平位置	/
位置	align-content	控制整个内容区域在容器中的垂直位置	/
位置	place-content	justify-content和align-content的合并简写形式	/
	grid-auto-columns	用来设置浏览器自动创建的多余网格的列宽和行高	/
	grid-auto-rows	用来设置浏览器自动创建的多余网格的列宽和行高	/

7 - 通用属性 - display:; - 框的类型

display:flex 弹性布局

display:grid 网格布局（栅栏布局）

`display:flex` 弹性布局

`display:grid` 网格布局（栅栏布局）