CSS学习--兼容性

兼容性

浏览器支持信息

https://caniuse.com/

在css中构建回滚

如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略display: grid相关的属性，使用浮动布局。

Item One
Item Two
Item Three
* { box-sizing: border-box; }
.wrapper {
	background-color: rgb(79, 185, 227);
	padding-bottom: 1px;
	max-width: 400px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
}
.item {
	float: left;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #fff;
	padding: 1em;
}
.item:first-child{ border-bottom-left-radius: 0px; }
.item:last-child{ border-bottom-right-radius: 0px; }

回滚方式

float & clear

如果浮动和清除的物件变成了弹性或网格物件，浮动和清除属性不再影响布局。

display:inline-block

如果一个物件被设为display: inline-block，但是之后变成了弹性或者网格物件，inline-block行为将会被忽略。

display:table

被设为CSS表格布局的物件将会在它们变为弹性或者网格物件的时候不再表现出这种行为。

Multiple-column Layout

如果你的容器有任何一个column-*属性被定义，之后变成了网格容器，那么多列行为不会实现。

display:gird

如果你把弹性容器做成了网格容器，任何应用到子元素的flex属性都会被忽略。

特性查询

@support允许你测试一个浏览器是否支持任何特定的一个CSS特性。

@supports (display: grid) {
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

Grid下可以设置的替代css

其他的display

父元素设置grid下，只要浏览器支持grid布局，子元素的inline-block和table都不会生效

float & clear

grid生效下float & clear无法生效，故不必清除浮动

vertical-align

vertical-align对网格项布局无效

muti-cols

column-*当应用于网格容器时，这些属性将不适用

IE/Edge<=15

  • grid-template-columns 变成 -ms-grid-columns
  • grid-template-rows 变成 -ms-grid-rows
  • grid-row-start (en-US) 变成 -ms-grid-row
  • grid-column-start (en-US) 变成 -ms-grid-column
  • align-self 变成 -ms-grid-row-align
  • justify-self 变成 -ms-grid-column-align

Autoprefixer

生成带前缀的网格布局css

  1. 环境

  2. 工具

posted @ 2022-04-19 15:14  ~LemonWater  阅读(158)  评论(0)  编辑  收藏  举报