侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

CSS

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 164 阅读 / 693 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS
不捕获事件
pointer-events: none;

文字渐变
background: linear-gradient(to right, #efe7e7, #89898c);
-webkit-background-clip: text;
color: transparent;
居中
position:fixed;
top: calc(50vh - 200px);
left: calc(50vw - 150px);

width:max-content 正好能放下内容的宽度
width:min-content 压缩到极限的宽度,会压缩到每一个字都换行

autoprefixer 自动处理浏览器兼容问题
overflow:auto 自动显示滚动条。

box-sizing:border-box; 和 float配合使用, 让div 能并排显示。
浏览器兼容
calc(1em + 10px)。

z-index
大在前
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
文字留白
/*文字左边留白*/
text-indent: 3px;
/*文字间隔和右边留白*/
letter-spacing: 3px;

优先级
来源、优先级、源码顺序
行内样式→ id选择器→ class选择器 → 标签选择器 (都有id选择器的话那就选数量多的那个)(还相等的就看出现位置了,晚的胜出)
伪类选择器(如:hover)和属性选择器(如[type="input"])与一个类选择器的优先级相同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。
//因为 位置 会影响生
a:link
a:visited
a:hover
a:actived

缩写
四个值
省略时就和对边相等,
1.
一个值 : 上下左右
2.
一个值 : 上下 左右
3.
一个值 : 上 左右 下
4.
一个值 : 上 右 下 左

两个值
左右 上下 和 四个值的相反,因为要遵循笛卡尔网格
background-position: 25% 75%
box-shadow : 10px 20px #6f9090
边框
先设全边框,再设置上下边框的线为没有
border: 1px solid #000;
border-width:0 1px;
不建议使用原因如见上一条

先设全边框,再取消上下边框的宽度
border: 1px solid #000;
border-top:none;border-bottom:none;
推荐使用


a标签文字居中
a{
    display: block; /* 设置为块元素 */
    width: 300px;
    height: 100px;
    line-height: 100px; /* 设置垂直居中 */
    text-align: center;
    border: 1px solid #ccc;
}
display:inline-block;





0

评论区