![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
江-月*夜
喜欢分享项目用到的知识。也方便我日后用到直接复制修改
展开
-
css样式初始化
2.自定义样式(我自己写的,主要加上了flex布局)在main.js引用。原创 2024-03-19 17:00:35 · 168 阅读 · 0 评论 -
css css3初始化样式
css、css3初始化样式原创 2022-03-15 17:00:54 · 332 阅读 · 0 评论 -
第25天 ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元素和块级元素有什么区别?
⾏内元素有: a b span img input select strong块级元素有: div ul ol li dl dt dd h1 h2 h3 h4… p空元素: < br> < hr> < img> < input> < link> < meta>⾏内元素不可以设置宽⾼,不独占⼀⾏块级元素可以设置宽⾼,独占⼀⾏...原创 2022-01-12 10:01:32 · 163 阅读 · 0 评论 -
第24天 前端重绘和回流(重排)是什么,如何避免?
DOM的变化影响到了元素的⼏何属性(宽⾼),浏览器重新计算元素的⼏何属性,其他元素 的⼏何属性和位置也会受到影响,浏览器需要重新构造渲染树,这个过程称为重排,浏览器将受 到影响的部分重新绘制到屏幕上的过程称为重绘。引起重排的原因有1)添加或者删除可⻅的DOM元素,2)元素位置、尺⼨、内容改变,3)浏览器⻚⾯初始化,4)浏览器窗⼝尺⼨改变,重排⼀定重绘,重绘不⼀定重排,减少重绘和重排的⽅法:不在布局信息改变时做 DOM 查询使⽤ cssText 或者 className ⼀次性改变属性.原创 2022-01-08 09:19:26 · 216 阅读 · 0 评论 -
第23天 link 与 @import 的区别
link 是 HTML ⽅式, @import 是CSS⽅式link 最⼤限度⽀持并⾏下载, @import 过多嵌套导致串⾏下载,出现 FOUC (⽂档样式 短暂失效)link 可以通过 rel=“alternate stylesheet” 指定候选样式浏览器对 link ⽀持早于 @import ,可以使⽤ @import 对⽼浏览器隐藏样式@import 必须在样式规则之前,可以在css⽂件中引⽤其他⽂件总体来说: link 优于 @import什么是FOUC?如何避免Flash O.原创 2022-01-07 11:34:48 · 64 阅读 · 0 评论 -
第23天 简述⼀下src与href的区别
src ⽤于替换当前元素,href⽤于在当前⽂档和引⽤资源之间确⽴联系。src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌⼊到⽂档中当前标签所 在位置;在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内,例如 js 脚本,img 图⽚和 frame 等元素href 是 Hypertext Reference 的缩写,指向⽹络资源所在位置,建⽴和当前元素(锚 点)或当前⽂档(链接)之间的链接,如果我们在⽂档中添加 那么浏览器会识别该⽂档为 css ⽂ 件,就会并⾏下载资源.原创 2022-01-07 10:48:07 · 178 阅读 · 0 评论 -
第23天 html viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu // width 设置viewport宽度,为⼀个正整数,或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度,⼀般设置了宽度,会⾃动解析出⾼度,可以不⽤设置 // initial-scale 默认缩放⽐例(初始缩放⽐例),为⼀个数字,可以带⼩数 // minimum-sc原创 2022-01-07 10:25:10 · 184 阅读 · 0 评论 -
第17天 H5如何禁止动画闪屏?
网上搜索了下答案,不知道有没有效果.style { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }原创 2021-12-25 10:55:25 · 299 阅读 · 0 评论 -
第16天 css和wxss有什么区别?
相同之处:都支持选择器;提供内联样式;语法简单。不同之处:wxss新增了尺寸单位;wxss提供了全局样式和局部样式;wxss仅支持部分选择器。原创 2021-12-23 10:12:08 · 330 阅读 · 0 评论 -
第14天 css3的属性transfrom的值preserve-3d和perspective有什么区别?
transform – css3属性,可以对元素进行变换(2d/3d),包括平移translate,旋转rotate,缩放scale,等等(完整取值参考 W3C)。perspective – css3属性,当元素涉及3d变换时,perspective可以定义我们眼睛看到的3d立体效果,即空间感。通俗地解释就比如你去电影院看电影,你距离大荧幕的距离就相当于perspective的值啦,离得越远则perspective值越大,看到空间效果也就会不一样!...原创 2021-12-21 10:07:26 · 172 阅读 · 0 评论 -
第13天 伪类选择器和伪元素选择器有什么区别?
1.伪类选择器:选择的是DOM树之外的消息,或是不能依靠简单选择器进行标识的元素;前者包含那些匹配指定状态的元素,比如:visited,:active,后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child; first-of-type; :target2.伪元素选择器:选择的是DOM树没有定义的虚拟元素。不同于其他选择器,伪元素选择器不以伪元素为最小选择单位,它选择的是元素指定内容,比如::before, ::after...原创 2021-12-18 10:23:57 · 402 阅读 · 0 评论 -
第139天 justify-content的space-between与around有什么区别?
justify-content 定义了在 flex 容器中,沿着主轴的布局方式space-between: 行内均匀分布元素,距离相同,首尾元素距离边界的距离是元素间距的一半space-around: 行内均匀分布元素,距离相同,首尾元素紧贴边界...原创 2021-12-17 10:33:34 · 1252 阅读 · 2 评论 -
第12天 css加载会阻塞js运行吗?
1.css加载会阻塞后面js的运行2.css加载不会阻塞DOM的解析,但是会阻塞DOM的渲染 --> 考虑到css可能会修改DOM的样式,从而引起回流或重绘,所以先加载完css,再对DOM进行渲染,减少不必要的性能损耗3.提高css加载速度的方式:CDN压缩css文件合理使用缓存合并css文件...原创 2021-12-16 10:00:53 · 892 阅读 · 0 评论 -
第11天 ::first-letter有什么应用场景?
段落首字放大效果p:first-letter { font-size: 2em; }<p>This is a test article. This is a test article.</p><p>这是一个测试</p>原创 2021-12-14 11:45:21 · 67 阅读 · 0 评论 -
第11天 使用css实现蒙版的效果
filter: blur(1px)原创 2021-12-14 10:51:57 · 1580 阅读 · 0 评论 -
第11天 H5如何禁止显示系统菜单?
touch-callout:none;user-select:none;原创 2021-12-14 09:44:28 · 170 阅读 · 0 评论 -
第10天 css的负边距有哪些应用场景?
垂直水平居中通过伪元素扩大元素覆盖范围原创 2021-12-13 09:57:23 · 147 阅读 · 0 评论 -
第9天 用css画一个五边形和一个六边形
五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);六边形:clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);七边形:clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);反正用 clip-path.原创 2021-12-10 13:51:47 · 430 阅读 · 0 评论 -
第6天 说出至少十条你理解的css规范
命名规范(连字符-分隔的字符串)文件宽度限制(每行80个字符)加注释编写选择器应有助于重用尽量不要加 !important避免使用CSS表达式选择 舍弃 @import避免使用滤镜(IE 专有的 AlphaImageLoader 滤镜)把样式表放在顶部 / 把CSS放在外部文件压缩CSS...原创 2021-12-06 10:26:53 · 242 阅读 · 0 评论 -
第5天 word-wrap、word-break和white-space有什么区别?
word-wrap:现在改为overflow-wrap了;用于控制单词在超出其包裹元素时是否中断单词换行;white-space:用于处理元素中的空白符号(包括空格,换行符,制表符,元素,文字自然换行);word-break:用于控制单词在换行时如何断开;...原创 2021-12-03 08:57:29 · 55 阅读 · 0 评论 -
第4天 说说你对设备像素比的理解
设备像素比(Device Pixel Ratio 简称:DPR),是指物理像素和CSS像素的比例。原创 2021-12-01 14:49:20 · 99 阅读 · 0 评论 -
第4天 怎么实现移动端的边框0.5px?
一种是通过transform中的scaleborder: 1px solid red;transform: scaleY(.5);一种是通过meta viewport中设置init-scale为0.5<meta name="viewport" content="width=device-width, initial-scale=0.5">一种是设置hrborder: 0px;border-bottom: 1px solid red;一种是基于背景渐变实现height: 2原创 2021-12-01 10:07:59 · 219 阅读 · 0 评论 -
第3天 谈一谈前端性能优化方案有哪些?
客户端优化减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。 使用CSS雪碧图(CSS Sprites)CSSSprites一句话:将多个图片合并到一张单独的图片,这样就大大减少了页面中图片的HTTP请求。减少DOM操作次数,优化javascript性能。少用全局变量、减少DOM操作、缓存DOM节点查找的结果。减少IO读取操作。延迟加载 | 延迟渲染 图片预加载,将样式表放在原创 2021-11-30 09:27:35 · 71 阅读 · 0 评论 -
第2天 说说你对css盒子模型的理解
盒模型分为: IE盒模型和W3C盒模型盒模型是由 content、padding、border、margin组成的区别:IE盒模型的width = content + padding + borderW3C盒模型的width = contentCSS3的属性box-sizing可以指定两种盒模型 其中border-box属性为IE盒模型 content-box属性为W3C盒模型...原创 2021-11-29 16:39:48 · 62 阅读 · 0 评论 -
第2天 对比下px、em、rem有什么不同?
px 是固定的值em 是相对父级变换大小rem 是相对html,body大小变换的原创 2021-11-29 16:26:07 · 108 阅读 · 0 评论 -
第1天 HTML全局属性(global attribute)有哪些(包含H5)?
accesskey:设置快捷键class:为元素设置类标识contenteditable:指定元素内容是否可编辑contextmenu:自定义鼠标右键弹出上下文菜单内容(仅firefox支持)data-*:为元素增加自定义属性dir:设置元素文本方向(默认ltr;rtl)draggable:设置元素是否可拖拽dropzone:设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)hidden:规定元素仍未或不在相关id:元素id,文档内唯一 lang:元素内容的语言.原创 2021-11-27 17:04:31 · 90 阅读 · 0 评论 -
第1天 在页面上隐藏元素的方法有哪些?
- position配合z-index; 或者 left/top/bottom/right : -100%; - margin-left: -100%; width: 0; height: 0; overflow: hidden;这个应该可以吧 - opacity: 0; display:none; - transform: scale(0)/translateX(+-100%)/translateY(+-100%)/rotateX(90deg); - filter: opacity(0);.原创 2021-11-27 17:02:00 · 48 阅读 · 0 评论 -
第1天 CSS3有哪些新增的特性?
边框(borders):border-radius 圆角box-shadow 盒阴影border-image 边框图像背景:background-size 背景图片的尺寸background_origin 背景图片的定位区域background-clip 背景图片的绘制区域渐变:linear-gradient 线性渐变radial-gradient 径向渐变文本效果word-break word-wraptext-overflowtext-shadowtext-w原创 2021-11-27 16:56:38 · 73 阅读 · 0 评论