自己做网站用花钱吗,手机app免费下载,企业网站免费推广的方法.,品牌网站建设技术摘要
马上就要毕业啦#xff0c;没有参加2023年的秋招#xff0c;准备在最近开始找全职或者实习工作#xff0c;然后也马上过年了#xff0c;总结和理一下自己的知识要点#xff0c;参加2024年的春招。
1. link和import区别
link是XHTML标签#xff0c;除了加载CSS之外…摘要
马上就要毕业啦没有参加2023年的秋招准备在最近开始找全职或者实习工作然后也马上过年了总结和理一下自己的知识要点参加2024年的春招。
1. link和import区别
link是XHTML标签除了加载CSS之外还可以定义RSS等其他业务import属于CSS范畴只能用于加载CSSlink加载CSS在页面载入时加载import需要页面完全载入完后加载link时XHTML标签无兼容问题import时CSS2.1提出的link支持JS使用DOM去改变样式而import不支持
2. display:none和visibilityhidden的区别
前者会让元素完全从渲染树中消失后者不会消失且会占据原来的空间只是内容不可见
3. 伪元素和伪类的区别和作用
伪元素 在内容元素的前后插入额外的元素或者样式但是这些元素不在文档中生成只在外部中可以找到。伪类 将特殊的效果添加到特定选择器上他是已有元素上添加类别的不会产生新的元素。
4. RequestAnimationframe
实现动画的方法
JS通过setTimeout实现CSS3transition和animationHTML5canvas
此外HTML专门用于请求动画的API就是window.requestAnimationFrame0(callback)。主要是告诉浏览器下次重绘之前调用指定的回调函数更新函数参数为一个回调函数会在下次进入浏览器时执行。该方法属于宏方法会在微任务执行完后去执行。
如何取消 RequestAnimationframe会返回一个id可以调用window.cancelAnimationFrame(id)来取消动画。
优势
CPU节能函数节流减少DOM操作
5. CSS3新特性
新增各种CSS选择器(:not(.input): 所有不是input的元素)圆角多列布局阴影和反射文字特效文字渲染线性渐变动画旋转、缩放、定位、倾斜、多背景等
6. CSS Sprites精灵图
其实就是一张大图片将页面中要用的所有图片包含进去然后使用CSS中的background-image、background-repeat、background-position都没后文哦
优点
可以减少http的请求提高性能可以减少图片字节将三张合成一张
缺点
图片合并时需要有序有间隔的以免出现不必要的背景。维护成本高
7. CSS优化和提高性能的方法
css压缩css单一模式减少使用import
8. CSS预处理器/后处理器
预处理器 less、sass、stylus
后处理器 postcss通常是在完成的样式表根据css规范处理css让其更有效。目前最有效地就是给css属性添加前缀实现跨浏览器兼容性问题。
优势
结构清晰便于扩展可以很方便的屏蔽浏览器私有语法的差异可以轻松实现多重继承完美兼容CSS代码
9. ::before和:after为什么一个双冒号一个单冒号
冒号属于伪类双冒号属于为元素
文本溢出
.single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}.more{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
}10. 媒体查询
语法格式
media(max-width:1280px){.test{background:yellow;}
}其实简单来说就是可以针对不同设备的页面宽度来使用对应的css样式从而达到响应式的目的。
11. CSS工程化
为了解决什么
宏观设计编码优化构建可维护性
怎么做最好
使用预处理器使用PostCss使用Webpack loader
12. BFC
什么是BFC
B就是box是CSS布局对象和基本单位一个页面是由多个盒子模型box组成的FC就是formatting context表示上下文格式化他是页面的一块渲染区域并且有一条渲染规则是布局过程中生成块级盒子的区域。
通俗来讲BFC是一个独立的布局环境可以理解为一个容器在这个容器中按照一定规则进行物品摆放并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件则BFC中的元素布局不受外部影响。
创建条件
根元素body浮动设置float 除了none以外的值绝对定位absolute和fixeddisplay为inline-block、table-cell、table-caption、flex等overflow为hidden、auto、scroll
特点
垂直方向上、由上而下和文档流一样上下相邻的margin会重叠计算高度时需要计算浮动元素的高度不会与浮动的容器发生重叠是独立的元素不会影响外部元素每个元素的左margin值和左border相接触
作用
解决margin重叠问题如果是两个BFC那他们相互是独立的彼此不影响。解决高度塌陷问题创建自适应两栏布局
13. 场景应用
13.1 实现一个三角形
.triangle{border:100px solid transparent;border-top-color:red;
}13.2 实现一个扇形
.sector{border:100px solid transparent;border-top-color:red;border-radius:100px;
}13.3 自适应正方形
.square{
width: 20%;height: 0;padding-top: 20%;background: orange;
}
14. 字体问题
14.1 设置小于12px字体
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决。-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式所以要使用时候慎用。使用transform的scale属性使用图片
14.2 1px问题
1px问题主要是在Retina屏幕的机器中会显示的很粗因为他和移动设备中的1px不一样需要去专门设置一个属性就是window.devicePixelRatio 物理像素 / CSS像素
