CSS
流川命
不回头。
展开
-
移动端适配的三种方法
根据750的设计稿为例 **方法一:**引入rem.js文件,具体的文件代码可参考: (function (doc, win) { var docEl = doc.documentElement, // orientationchange 当设备的方向变化(设备横向持或纵向)此事件被触发 //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。 resizeEvt = 'orientationchange' in window ? 'orientatio原创 2021-07-20 15:31:08 · 1667 阅读 · 0 评论 -
CSS实现文字溢出就用省略号代替
overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 注意:此处是第三行溢出就用省略号代替,如果要改变行数的话, 修改 -webkit-line-clamp的数值就可以了。 ...原创 2021-04-23 17:02:18 · 232 阅读 · 0 评论 -
改变CSS中用overflow:scroll创造出的滚动条样式
滚动条轨道样式可根据需要去设置 ::-webkit-scrollbar-track ,结果:原创 2020-12-04 09:08:30 · 728 阅读 · 0 评论 -
前端设置宽高时height: 100% 和 100vh 的区别
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5 但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照后面的例子。 2.rem 这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%,也就是说 hei转载 2020-11-28 16:43:41 · 3306 阅读 · 0 评论 -
line-height1.5和line-height:150%的区别
一、区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。 父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。 二、举例 比如父元素设置属性:font- size:14px;line-height:1.5,child设置font-转载 2020-10-17 20:54:47 · 1913 阅读 · 0 评论 -
CSS外边距塌陷的总结
一.当两个元素为兄弟元素时: .father { width: 100px; height: 100px; background-color: aqua; margin-bottom: 10px; } .son { width: 50px; height: 50px; background-color: pink; margin-top: 30px; } 结果:只显示最大的外边距30px 二.当两个元素为父子元素时: 1.当父元素有border或padding: .father { width: 100p原创 2020-10-17 17:49:27 · 932 阅读 · 0 评论 -
布局视口、视觉视口和理想视口
布局视口:指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度 视觉视口:指用户正在看到的网站的区域,区域的宽度=移动设备的浏览器窗口的宽度 理想视口:布局视口的大小和屏幕宽度一样的。 ...原创 2020-10-17 16:12:42 · 967 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别。 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。 该demo就在页面中放一个textarea元素,采用默认宽高显示。 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。 scrollWidth=client转载 2020-09-20 00:10:57 · 474 阅读 · 2 评论