微商城怎么进入购买,合肥网络seo推广服务,WordPress新的页面,一个虚拟主机空间挂两个网站网格函数
fit-content()属于网格函数#xff0c;除此之外的网格函数还有#xff1a;CSS函数#xff1a; 实现数据限阈的数字函数。顾名思义#xff0c;这三个函数只能在网格布局中使用。fit-content()函数主要是用于给定布局可用大小#xff0c;适应内容#xff0c;其功…网格函数
fit-content()属于网格函数除此之外的网格函数还有CSS函数 实现数据限阈的数字函数。顾名思义这三个函数只能在网格布局中使用。fit-content()函数主要是用于给定布局可用大小适应内容其功能等同于min(maximum size, max(minimum size, argument))。函数格式如下
/* length values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)/* percentage value */
fit-content(40%)
fit-content()接收一个参数可以是长度值或者是百分比值当为长度值时支持各种格式的固定长度如px、cm、vw、ch等。当参数为百分比值相对于给定轴中可用空间的百分比。在网格属性中它与列轨道中网格容器的内联大小和行轨道中网格容器的块大小相关。否则它与布局框的可用内联大小或块大小相关具体取决于书写模式。 浏览器兼容性 使用示例
如下通过示例来理解fit-content()函数具体的使用方式和布局配置理解。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlefit-content函数实现内容自适应示例/titlestyle#container {display: grid;grid-template-columns: fit-content(300px) fit-content(300px) 1fr;grid-gap: 5px;box-sizing: border-box;height: 200px;width: 100%;background-color: #8cffa0;padding: 10px;}#containerdiv {background-color: #8ca0ff;padding: 5px;}/style
/headbodydiv idcontainerdiv与内容等宽./divdiv根据给定内容当内容小于300px则宽度与内容等宽当内容大于300px则宽度为300px./divdiv弹性宽度/div/div/body/html
展示样式 从上方的示例可以看出当给定的内容大于设置宽度则容器宽度等于设置宽度内容自动换行当给定内容小于设置宽度则容器宽度等于内容宽度。
示例源码fit-content函数实现内容自适应示例
转换函数
CSS函数matrix()应用于transform设置转换动画matrix提供六个参数实现一个3*3的矩阵镜像坐标转换成2D坐标。其语法格式如下
matrix(a, b, c, d, tx, ty)
如上该函数需要接收六个参数来实现2D坐标的转换
a b c d用于描述线性变换tx用于描述x轴上的线性平移ty用于描述y轴上的线性平移
matrix()的特殊值可以通过设置特殊值设置效果缩放、旋转、移动、倾斜功能。matrix转换的矩阵: 根据上述举证我们对比常用的缩放、旋转、移动、倾斜功能的矩阵格式如下 通过上述我们可以梳理特殊效果的matrix()设置方式
scale(x)等同于matrix(x,0,0,x,0,0)x轴和y轴同等缩放scaleX(x)等同于matrix(x,0,0,1,0,0)x轴缩放scaleY(y)等同于matrix(1,0,0,y,0,0)y轴缩放translate(x,y)等同于matrix(1,0,0,1,x,y)位移转换x代表x轴位移y代表y轴位移translateX(x)等同于maxtrix(1,0,0,1,x,0)位移动画x轴位移translateY(y)等同于maxtrix(1,0,0,1,0,y)位移动画y轴位移skew(x,y)等同于maxtrix(1,tan(x),tan(y),1,0,0)倾斜x轴和y轴倾斜的角度skewX(x)等同于maxtrix(1,tan(x),0,1,0,0)x轴倾斜skewY(y)等同于maxtrix(1,0,tan(y),1,0,0)y轴倾斜rotate(x)等同于maxtrix(cos(x),-sin(x),sin(x),cos(x),0,0)顺时针旋转x如30deg
下面通过一个示例来了解下如何使用。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCSS matrix函数使用/titlestylebody {text-align: center;}h1 {color: green; // 设置颜色}.matrix {transform-origin: 0 0;transform: matrix(.4,0,0,2,0,0);font-size: 26px;font-weight: bold;width: 250px;padding: 20px;background: green;color: white;font-family: sans-serif;}/style
/headbodyh1CSS matrix函数使用/h1brbrdiv classmatrixMatrix转换区块x缩小为0.4,y放大为2倍/div
/body/html
效果如下 示例源码CSS matrix()函数使用
