随笔分类 -  css

css fit-content使用水平居中和flex使用高度自适应
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ padding:0; margin:0; height:100%; /*定义页面整体高 阅读全文
posted @ 2023-07-27 12:00 零碎沉默 阅读(122) 评论(0) 推荐(0)
css3 object-fit使用
摘要：1、object-fit:fill; 拉伸填满整个容器 2、object-fit:contain; 宽度铺满整个容器，高度等比缩放，超出则裁剪 3、object-fit:cover; 高度铺满，宽度等比缩放，超出则裁剪 4、object-fit:none; 图片大小不变，超出则裁剪，裁剪保留中间部分 阅读全文
posted @ 2023-07-25 15:36 零碎沉默 阅读(270) 评论(0) 推荐(0)
工作中新知识点记录
摘要：一、css垂直居中 display: grid; place-items: center; place-items 属性是以下属性的简写：align-items、justify-items 二、伪元素 :empty::before 当div元素没有内容时，.area:empty样式会生效，同时为了显 阅读全文
posted @ 2023-06-27 14:16 零碎沉默 阅读(22) 评论(0) 推荐(0)
通过css grid实现圣杯布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-04-12 15:48 零碎沉默 阅读(102) 评论(0) 推荐(0)
总结css常用方法
摘要：1、自定义滚动条 .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border- 阅读全文
posted @ 2018-08-02 14:33 零碎沉默 阅读(204) 评论(0) 推荐(0)
后台管理系统整体布局
摘要：一个左边宽度固定，高度多余屏幕出现滚动条，右边宽度不确定，高度多余出现滚动条，footer部分不管页面内容多少一直固定效果展示 阅读全文
posted @ 2018-03-27 14:47 零碎沉默 阅读(405) 评论(0) 推荐(0)
背景图片视觉差效果
摘要：注意一定要引用parallax插件 阅读全文
posted @ 2018-03-13 16:09 零碎沉默 阅读(265) 评论(0) 推荐(0)
图标文字居中排放
摘要：伤心 /*图标文字居中排放*/ i{ background:url("sad.png"); background-size: 18px 18px; width:18px; height:18px; display:inline-... 阅读全文
posted @ 2017-08-15 16:59 零碎沉默 阅读(157) 评论(0) 推荐(0)
自定义表格固定表头，随着表格内容增加出现滚动条
摘要：1、首先要固定表头就必须是两个表格组合在一起 2、用一个div把两个表格包在一起，并且设置宽度，在让它可以横向滚动，overflow-x: auto 3、在设置里面两个table的宽度为一样，在设置内容表格overflow-x:hidden;overflow-y:auto 阅读全文
posted @ 2017-08-15 16:43 零碎沉默 阅读(487) 评论(0) 推荐(0)