随笔分类 - css
1
摘要：div{ width：100px; height:100px; position: relative; &::before{ display: block; width: 100%; content: ''; height:1px; background-color: rgba(52,56,75,
阅读全文
摘要：在前一页的最后一个标签里面加一句 page-break-after: always; 完美 补充：打印预览时，颜色可以显示，背景色和图片不显示 解决： 需要在设置背景色的div下面加上以下代码就可以解决（给body加也可以) -webkit-print-color-adjust:exact; -mo
阅读全文
摘要：设置position：fiexd之后 不设置top,bottom,left,right位置样式, 通过margin间接调整 复制代码就是开干 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" cont
阅读全文
摘要：css3之前使用js实现 <div style="padding: 0 1rem;"> <div id="container_small_tip"> <div id="content_small_tip"></div> </div> </div> <script> function roll(spe
阅读全文
摘要：background属性： background-image 添加背影图片 如果图片大于容器，那么默认就从容器左上角开始放置 如果图片小于容器，那么图片默认会平铺*/ /*background-image: url("../images/bg-img.jpg");*/ background-repe
阅读全文
摘要：/*1.设置一个值：四个角的圆角值都一样*/ /*border-radius: 10px;*/ /*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/ /*border-radius: 10px 30px;*/ /*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制
阅读全文
摘要：伪元素：::before ::after *必须添加content属性，否则后期不可见 content: ""; *默认是行级元素，如果想设置宽高，就必须转换为块级元素 position: absolute; *行内元素，需要转换成块:display:block float:** position:
阅读全文
摘要：矢量图（即放大不失真） 1.font awesome； 优点：相对比较简单，查看官网看例子基本上都会用 （http://www.bootcss.com/p/font-awesome/） 缺点：文件较大，影响加载速度 注意引用的路径和版本； 2.inconfont(阿里巴巴矢量图标库); （个人用的最
阅读全文
摘要：css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css3文字颜色更改</title> </head> <style> .site__title { color: #f35626; font-fami
阅读全文
摘要：掩藏scroll滚动条::-webkit-scrollbar ::-webkit-scrollbar {} /* 1 */ ::-webkit-scrollbar-button {} /* 2 */ ::-webkit-scrollbar-track {} /* 3 */ ::-webkit-scr
阅读全文
摘要：1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下：
阅读全文
摘要：<html> <body> <span style="cursor:auto"> <br /> <span style="cursor:crosshair"> <br /> <span style="cursor:default"> <br /> <span style="cursor:pointe
阅读全文
摘要：style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） scrollHeigh //返
阅读全文
摘要：英文溢出不换行而中文溢出会换行 ，因为中文一个字就是一个字符浏览器知道有多少个字符，而英文字母 浏览器不知道整体是一个单词 还是由许多单词组成 ，就统一当成一个单词处理 所有就会溢出不换行了，但是在英文里面加了空格溢出就会换行了， 因为你已经标识出来了哪几个字母是组成一个单词 ，无论两个单词之间写多
阅读全文
摘要：style="pointer-events: none;" 可以封装使用
阅读全文
摘要：1.已知元素高度 2.未知父元素高度 3.flex使盒子居中 4.transform实现盒子居中 5. 利用css3的新增属性table-cell, vertical-align:middle;
阅读全文
摘要：文字换行和不换行：white-space:breakallwhite-space:nowrap 1,单行超出的文字呈省略号 2.多行超出的文字呈省略号
阅读全文
摘要：.box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; //在轴上如何对齐 //center：居中， //flex-start：在主轴上由左或者上开始排列 //flex-end：在主轴上由右或者下开始排列 //space-around：每个项目两侧的间...
阅读全文
摘要：主要使用css3属性 text-align: justify; text-align-last: justify; 上代码：
阅读全文
摘要：1.footer保持在页面底部 需求： 我们希望footer能在窗口最底端，但是由于页面内容太少，无法将内容区域撑开，从而在 footer 下面会留下一大块空白 第一种方法：采用 flexbox布局模型 （将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行
阅读全文
1