![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 52
样式
星繁~
认真搞前端,深度学习计算机内部原理
展开
-
你真的了解word-wrap和word-break的区别吗?
word-break:break-all和word-wrap:break-word的区别原创 2022-03-06 16:28:33 · 566 阅读 · 0 评论 -
Scss:@mixin和@extend的选择
Scss:@mixin和@extend的选择向Mixin传递样式片段除了传递参数,也可以直接传递一个样式片段给Mixin在Mixin中,添加@content;语句,然后传递的样式片段就会代替@content;出现在相应的位置@mixin button { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; @content; } .but转载 2021-01-06 19:10:16 · 615 阅读 · 0 评论 -
IE兼容问题
1.文本溢出,省略号无效问题各个浏览器同意使用js的方式来进行解决该问题,代码如下:// 全局过滤器兼容IE版本不支持省略号的问题Vue.filter('ellipsis', (value) => { if (!value) return '' if (value.length > 35) { return value.slice(0, 35) + '...' } return value})未完待续中。。。...原创 2020-05-13 14:49:35 · 102 阅读 · 0 评论 -
sass与scss的区别
学习网址https://www.qikegu.com/docs/2541 link相同点二者都是CSS预处理器区别SCSS 是 Sass 3 引入的新语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:文件扩展名不同Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同Sass 是以严格的缩进式语法规则来书写,不带大括号({})和原创 2021-01-06 10:35:41 · 844 阅读 · 0 评论 -
禁止浏览器对页面进行缩放
手机端:只需要在标签中里面加上<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">即可!PC端用户可以通过如下几种方式来缩放:ctrl + +/-ctrl + 滚轮浏览器菜单栏由于浏览器菜单栏属于系统软件权限,没办法控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况PC端需要通过js来进行控制,代码如原创 2020-05-14 14:33:23 · 5840 阅读 · 8 评论 -
如何写好CSS?(OOCSS DRY SMACSS)
同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层。可以看得出这个怪物不是一个人造就的,早期的开发者选择了SCSS技术,但混乱的import导致了一些基本的样式被多次调用,而后面的开发者又为了摆脱之前的混乱引入了其他共用样式,但无济于事。原因出在HTML上,CSS依托于HTML没有被正确的抽象,而HTML又完全的依赖业务,所有class以业务取名,HTML和CSS基本没有复用,最终抽出的共用样式也仅仅是又一次的重复。CSS重构最难的地方在于没有脚手架,即转载 2021-01-06 20:50:46 · 163 阅读 · 0 评论 -
如何用CSS让背景有透明度而内容不受影响
效果图如下所示:具体思路:因为设置完背景之后,再使用opacity属性设置透明度会影响其上方的内容,导致上方内容也会产生透明的效果。所以,需要将背景单独设置一个层,并和文字所在的层重叠且居于其下即可。注意:两个层的大小要保持一致。具体实现代码如下所示:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body {原创 2022-03-04 22:58:09 · 1998 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…),且无兼容性问题
CSS实现单行、多行文本溢出显示省略号(…)且无兼容性问题原创 2022-03-04 21:39:42 · 366 阅读 · 0 评论 -
CSS为英文和中文字体分别设置不同的字体
font-family的调用方法:div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei; }依据font-family的原则,假如客户终端不认识前面的字体,就自己主动切换到另外一种字体,另外一种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体转载 2021-09-27 09:37:06 · 2671 阅读 · 0 评论 -
CSS中可以和不可以继承的属性
一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、...转载 2021-05-12 11:54:30 · 70 阅读 · 0 评论 -
css引入的三种方式,内联式、嵌入式和外联式
CSS主要是用于定义HTML内容在浏览器内的显示样式。内联式 <p style="font-size : 1.3rem;font-weight: 700;">嵌入式</p>嵌入式写在<head>标签内<style type="text/css"> .title { margin-top: 2%; text-align: left; font-size: 1.5rem; font-weight: 600;原创 2021-02-28 22:04:07 · 2030 阅读 · 0 评论 -
如何规范 CSS 的命名和书写?
CSS书写顺序 1.位置属性(position, top, right, z-index,display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing,color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等)CSS书写规范使用CSS缩写属性 CSS有些属性是可以缩写的,比如p转载 2021-02-28 17:06:59 · 133 阅读 · 0 评论 -
css相关概念及常用属性
像素像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。实际上,在web前端开发领域,像素有以下两层含义:设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的。CSS像素:这是一个抽象的像素概念,它是为web开发者创造的。一个CSS像素的大小是可变的,比如用后缩放页面的时候,实际上就是在缩小或放大CSS像素;而设备像素无论大小还是数量都是不变的css像素单位margin-top: 10px; /* 绝对长度 /margin-top: 1em; /相对于父字体大小原创 2020-12-28 21:52:01 · 354 阅读 · 0 评论 -
CSS3动画之animation属性
CSS3 动画CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器:规定动画的名称规定动画的时长CSS3 @keyframes 规则要创建 CSS3 动画,你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式转载 2021-02-02 21:53:16 · 436 阅读 · 0 评论 -
css3系列之transform
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrixtranslate:参考自己的位置进行平移translateX向X轴平移,填正数往右平移,填负数,往左平移translateY向Y轴平移,填正数往下平移,填负数,往上平移translate(x,y) 定义2D变换translate3d(x,y,z) 定义 3D 转换可以利用该属性达到水平垂直居中的效果<原创 2021-02-02 21:13:39 · 174 阅读 · 0 评论 -
CSS float 浮动属性
链接地址:https://www.cnblogs.com/polk6/p/3142187.html原创 2021-02-01 22:31:53 · 63 阅读 · 0 评论