css
css路上的坑
梦想身高1米8
这个作者很懒,什么都没留下…
展开
-
去掉input聚焦时的边框
<html> <body> <input placeholder="请输入"/> </body></html>border:none效果<html> <head> <style> input{ border:none; } </style>原创 2022-05-30 14:19:50 · 2737 阅读 · 0 评论 -
<li>圆点样式 list-style-type
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>li { list-style-type: 样式;}1 none无标记2 disc 默认,实心圆3 circle 空心圆4 square 实心方块5 decimal原创 2022-03-28 18:28:46 · 724 阅读 · 0 评论 -
css 怪异盒模型 和 标准盒模型
https://blog.csdn.net/piaoyi1997/article/details/107367308原创 2021-03-01 11:18:35 · 98 阅读 · 0 评论 -
css 浏览器兼容
1 css初始化比如,在所有css开始之前,先将margin和padding都设为0,覆盖浏览器默认样式2 添加浏览器私有属性-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表opera私有属性对于书写顺序一定要注意,兼容性写法放到前面,把标准写法放到最后-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/-moz-transform:rotate(-3deg);原创 2021-03-01 10:20:23 · 134 阅读 · 0 评论 -
css 角度单位 deg turn grad turn
1 deg 角度一个圆共360degdiv{ transform: rotate(90deg); // 旋转90°}2 turn 圈数1turn = 360degdiv{ transform: rotate(0.25turn); // 旋转90°}3 grad 百分度400grad = 360degdiv{ transform: rotate(100grad); // 旋转90°}4 rad 弧度2Π(pai)弧度 = 360degdiv{原创 2021-02-24 10:47:37 · 236 阅读 · 0 评论 -
css 画三角形
利用border属性画三角形1 border长什么样div{ width: 20px; height: 20px; border-top: 70px solid red; border-left: 70px solid beige; border-bottom: 70px solid greenyellow; border-right: 70px solid blueviolet;}1.1 放大border之后,可以看到每条border近似于三角形,原创 2021-02-23 15:04:12 · 228 阅读 · 0 评论 -
css 动画
1 transform设置元素的形状改变1.1 transform 设置变换类型transform: none | transform-function(参数)none表示不做变换transform-function表示一个或多个变化函数,变化函数由函数名和参数组成,参数包含在()里面,用空格分开例如:transform : rotate(30deg) scale(2,3);1.2 transform-origin设置变换基点所有变形都是基于基点,默认为元素的中心点。transform-o原创 2021-02-22 14:56:52 · 107 阅读 · 0 评论 -
css弹性布局 display:flex
flex是flexible box的缩写,意味弹性布局设为flex布局后,子元素的float、clear和vertical-align属性将消失1、flext-direction:row / column / row-reverserow 沿水平主轴让元素从左到右排列column 沿垂直主轴从上到下排列row-reverse 沿水平主轴从右到左排列2、flex-wrap:nowrap / wrapnowrap 默认元素不换行,自动减少宽度wrap 元素换行3、justify-content原创 2021-02-20 14:12:04 · 153 阅读 · 0 评论 -
css 背景图片 background-size属性值
1 length固定值背景图片宽度 背景图片高度如果只有一个值,第二个设为auto2 百分比背景图片对于背景定位区域宽度的百分比 背景图片对于背景定位区域高度的百分比如果只有一个值,第二个设为auto3 cover保持图像纵横比,并将图像缩放成完全覆盖背景定位区域的最小大小,多余部分不会显示4 contain保持图像纵横比,并将图像缩放成适合背景定位区域的最大大小,可能会存在白边...原创 2021-01-13 15:28:00 · 242 阅读 · 0 评论 -
css权重
1、css优先级规则1.1 css权值不同时,权重高的优先1.2 css权值相同时,后定义的规则优先1.3 css属性后面加important时,无条件绝对优先2、权重规则2.1 内联第一等级 权值1,0,0,02.2 id选择器第二等级 权值0,1,0,02.3 class、伪类、属性选择器第三等级 权值0,0,1,02.4 标签/元素、伪元素选择器第四等级 权值0,0,0,13、权值计算公式权值 = 第一等级选择器x个数,第二等级选择器x个数,第三等级选择器x个数,第四等级选原创 2020-11-12 11:47:33 · 48 阅读 · 0 评论 -
DIV属性
1 标准属性包括各种css样式,例如border,background,A:active等等2 事件属性可绑定的各种事件,例如onclick(单击),onmousedown(鼠标按下)等等3 全局属性id,class,style,data-*等等4 可选属性我也不知道什么...原创 2020-12-05 22:34:13 · 115 阅读 · 0 评论 -
css 水平垂直居中
1、display:table-celltext-align:centervertical-align:center2、display:flexjustify-content:centeralign-items:center3、relative-absoluteleft:50%top:50%transform: translate(-50%, -50%); // 再偏移高度/宽度的一半或设置margin-left/margin-top单水平1、text-align:center原创 2020-11-10 17:05:38 · 56 阅读 · 0 评论 -
css white-space 不换行、处理空白元素
1、normal默认值。空白会被浏览器忽略2、pre空白会被浏览器保留,类似HTML中的 <pre.>元素3、nowrap文本不换行,直到遇到<br.>标签4、pre-wrap保留空白符序列,但正常换行5、pre-line合并空白符序列,但保留换行符6、inherit从父元素继承white-space属性的值...原创 2020-11-03 15:10:37 · 360 阅读 · 0 评论 -
使用计算calc
js中无法使用less中使用height: calc(~"100vh - 50px");1、css中使用<!DOCTYPE html><html> <head> <style> body{ margin:0; height: 100vh; } div{ back原创 2020-10-23 15:32:32 · 144 阅读 · 0 评论 -
vh 和 window.innerHeight
css中获取视口高度vh 是视口被均分为100的单位js中获取高度window.innerHeight是视口高度(是否包括滚动条高度需实践)window.outerHeight是窗口高度原创 2020-10-23 14:49:57 · 993 阅读 · 0 评论 -
滚动条
.ant-table-body{ &::-webkit-scrollbar { height: 7px; } // 滚动条小方块 &::-webkit-scrollbar-thumb { box-shadow: none; background-color: #6236FF; } // 滚动条轨道 &::-webkit-scrollbar-track { box-sha原创 2020-08-03 14:10:01 · 64 阅读 · 0 评论 -
超出部分显示省略号
text-overflow : ellipsis; // 显示省略号 overflow : hidden; // 超出部分隐藏 white-space : nowrap; // 不换行 width : 60%; // 宽度 vertical-align: bottom; // 对齐原创 2020-08-03 14:12:02 · 69 阅读 · 0 评论 -
clip-path 多边形切割
clip-path: polygon(A, B, C, D, E, F, G, H);clip-path: polygon(a 0, B 0, 100% c, 100% D, E 100%, f l00%, 0 G, 0 h);clip-path: polygon(3% 0%, 97% 0%, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%);原创 2020-08-03 14:24:50 · 318 阅读 · 1 评论 -
css 垂直居中
1、line-heigth 和heigth 相等单行内容垂直居中2、padding-top和padding-bottom 相等容器高度可变,多行内容垂直居中。3、display: table-cellvertical-align:middledisplay设置为表格单元,内容垂直居中4、display:flexalign-items:center利用弹性布局flex...原创 2020-05-10 14:09:42 · 70 阅读 · 0 评论 -
css 水平居中
1、text-align: center行内元素实现在块级元素内部居中2、margin: 0 auto块级元素两边margin值自动居中3、display:flex just-content:center利用弹性布局flex原创 2020-05-10 14:04:15 · 114 阅读 · 0 评论 -
css position 可能的值
1、absolute绝对定位,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。2、fixed绝对定位,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。3、relative相对定位,相对于其正常位置进行定位4、static默认值,没有定位,元素出现在正常的流中。忽略 top, bottom, left, ri原创 2020-05-10 13:58:07 · 180 阅读 · 1 评论