神膘护体小月半的博客

【代码】落地页头图被版心遮挡效果实现。

1.1水平居中下面举一个例子，父元素里面有一个子元素。子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transfo..

当页面整体宽度较小，顶部搜索模块高度自动撑开时，table 宽度动态变小，只展示 4 行数据。当页面整体宽度较大，顶部搜索模块没那么高，table 高度自动变大，展示 7 行数据。保证页面其他模块宽度高度自适应，动态改变中部 table 的高度。

【代码】img 标签的 object-fit 属性。

table 常用属性width - 宽度传值为百分比或具体尺寸表格横向内容默认为弹性布局如图设置宽度为 400 (默认绘制成 400px)如图设置为 80%height - 高度传值为百分比 (从父元素继承) 或具体尺寸除去 thead 部分，剩余高度默认弹性布局如图为 thead 部分添加背景色，可看出整体 table 高度为 height 设置的值，剩余部分由 tbody 部分占用border - 边框表格及单元格的边框如图设置边框为 1cellspa

【代码】利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果。

flex 布局相关属性的使用

滚动条基本样式设置

css 设置背景色渐变、字体颜色渐变

css 属性 calc 的使用

transition 和 animation 的简单使用

animation 实现 loading 效果

animation 实现 loading 效果