![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
css样式积累
累了你就写会代码吧
越自律,越自由
展开
-
css实现字体描边+引入第三方字体
红底白边描边字体实例: .stroke-text { color: rgb(194, 59, 29); text-shadow: 2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff; } css引入第三方字体 建议全局引入字体包 @font-face { font-family: mFont; src: url("@{PATH}字体.ttf"); } ...原创 2022-05-17 11:20:22 · 236 阅读 · 0 评论 -
使用css绘制一个三角形
话不多说直接上代码 div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color: red blue green pink; } 单个三角形只需要隐藏掉其他的三个就可以了 div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color:原创 2021-09-23 14:34:21 · 89 阅读 · 0 评论 -
css 如何清除浮动
不清楚浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) clear 清除浮动(添加空 div 法)在浮动元素下方添加空 div,并给该元素写 css 样式: {clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度 父级同时浮动(需要给父级同级元素添加浮动)? 父级设置成 inline-block,其 margin: 0 auto 居中方式失效 给父级添加 overflow:hidden 清除浮动方法 万能原创 2021-01-30 16:20:22 · 66 阅读 · 0 评论 -
css 样式优先级的确定
每个选择器都有权值,权值越大越优先 !important 优先级最高 js 也无法修改 权值相同时,靠近元素的样式优先级高 顺序为内联样式表(标签内部)> 内部样式 表(当前文件中)> 外部样式表(外部文件中) 继承的样式优先级低于自身指定样式 CSS 优先规则:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 ...原创 2021-01-30 16:15:23 · 269 阅读 · 0 评论 -
css伪类以及伪类选择器的使用
伪元素 是用来创建一些不存在原有dom结构树中的元素。例如::before、::after在一些存在的元素添加内容,会以具体的UI显示出来,但是这些内容不会出现在dom 伪类 是表示已存在的某个元素处于某种状态,但是通过dom树又无法表示出不同状态下的样式。 伪类选择器有哪些: E:last-child选择父元素的倒数第一个子元素 EE:nth-child(n)选择父元素的第n个元素 E:nth-last-child(n)选择父元素的倒数第n个元素E,须满足倒数第n个元素以及为E标签,否则无效 E:fi原创 2021-01-13 10:05:34 · 204 阅读 · 0 评论 -
css会阻塞渲染吗?
css不会阻塞dom树的解析 css会阻塞dom树的渲染 css加载会阻塞后面js的执行原创 2021-01-12 17:46:21 · 387 阅读 · 0 评论 -
css使用link和@import有什么区别?
link是XHML标签,除了加载css文件,还可以加载RSS得其他事务,而@import 只能加载css link无浏览器兼容问题,import在低版本浏览器下支持 link标签引用css文件的时候在页面载入同时加载;@import只能等页面完全载入以后加载 ...原创 2021-01-12 17:18:45 · 52 阅读 · 0 评论 -
css3的基础动画属性(旋转、平移、缩放)
transform使用 1) rotate旋转 transform : rotate(20deg) //旋转角度 transform-origin:50% 50% //定义旋转基点 2) translate移动 translate:translate(20px,10px) translate:translateX(20px) translate:translateY(30px) 3) scale 缩放 transform-origin:50% 50% //定义缩放基点 translate原创 2021-01-12 17:12:17 · 658 阅读 · 0 评论 -
css实现水平垂直居中
弹性布局 .parent{ diplay:flex; justify-content: center; //实现横轴 align-items:center; } 绝对定位 .child{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } 利用transform属性 + 绝对定位 .child{ position:absolute; top:5原创 2021-01-12 17:07:42 · 53 阅读 · 0 评论 -
移动端常用的适配方案
一 设备独立像素 每个设备都有属于自己的独立像素,通过浏览器的模拟器可以看到,每个设备的独立像素。 每个设备设备独立像素,跟之前所有的物理像素之间关系如下: 设备像素比 所谓像素比,即是:物理像素和设备独立像素的比值 这个比值可以利用 JS 进行获取:window.devicePixeRatio。 二 视口概念 2.1 布局视口 布局视口是网页布局的基准窗口,在这里只考虑布局,也就是不会有非布局的内容,比如:滚动条,菜单栏。 在移动端,布局视口有一个默认值 980px,这保证了 PC 网站可以在手机上显原创 2020-12-16 11:33:42 · 1392 阅读 · 0 评论 -
flex布局以及flex的六大属性
熟悉 Flex 需要先了解 Flex 的下面这 6 个 CSS 属性: /* 设置 Flex 模式 */ display: flex; /* 决定元素是横排还是竖着排,要不要倒序 */ flex-direction: column; /* 决定元素换行格式,一行排不下的时候如何排 */ flex-wrap: wrap; /* flex-flow = flex-direction + flex-wrap */ flex-flow: column wrap; /* 同一排下对齐方式,空格如何隔开各个元素原创 2020-12-15 17:45:54 · 282 阅读 · 0 评论 -
移动端样式重置和常用css属性
样式重置代码 /********** reset.css *********/ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, sec原创 2020-12-15 17:38:23 · 223 阅读 · 0 评论 -
css样式控制文本溢出显示省略号
单行文本溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;原创 2020-12-09 17:01:59 · 100 阅读 · 0 评论