【css基础】

原创已于 2022-09-13 14:18:12 修改 · 132 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #html5

于 2021-09-21 21:44:30 首次发布

本文介绍了CSS基础，包括提高页面性能的优化方法，如数据懒加载、路由懒加载和压缩工具的使用。讨论了优雅降级和渐进增强的概念，详细解释了BFC的形成及其性质，并探讨了盒模型、水平垂直居中布局、移动端1px边框解决方案等。此外，还涵盖了CSS单位理解、减少重绘和回流的策略以及CSS Hack的相关知识。最后，概述了HTML5的语义化标签和新特性。

CSS基础

1、提高页面性能优化
1.数据懒加载
2.小图标使用精灵图
3.字库使用bg2312 而不是utf-8，一个汉字少一个字节
4.路由懒加载：/组件不使用不加载
函数或者promise
示例：
const login =（）=>(import ‘./login’)
promise :方法
const detail =()=>Promise.resolve(import ‘./detail’)
5.使用gulp 、webpack /grunt 等工具压缩html/js/css
2、什么是优雅降级、渐进渐强

if(window.localStorage){ 2 // 用本地存储 3 }else{ 4 // 用cookie当存储 5 }
if（浏览器是高级浏览器）{ 2 使用<video> 3 }else{ 4 使用flash 5 }

##渐进渐强
低端浏览器仅实现基本功能，高级浏览器实现额外功能。 比如上传文件，低端浏览器就给它提供上传按钮，高端浏览器增加外部拖拽文件上传。

3、如何形成BFC
BFC是块级格式化上下文
bfc形成：
@1有明显的宽高盒子
@2overflow：hidden
@3 定位浮动
@4display：inline-block
bfc的性质
内部有浮动，能清除这些浮动能为浮动元素撑高
4、css的盒模型
@1、标准盒模型 box-sizing:content-box content+padding+border组成
@2、怪异盒模型 border-box 只有content
5、水平垂直桔子一个元素

1、用弹性盒子
2、
3、

}
`**6、css实现三角形**

```html
.box{
width:0
height:0
border100px solid transparent；
border-left-color：red   向左的三角形？？
}

7、实现一个左边100px固定宽，右边自适应布局

.left{
float:left;width:100px;
}
.right{
margin-left:100px;
}

8、实现6px大小的文字
font-size：12px；transform：scle(.5)
9、移动端1px边框问题
1、用宽高加背景色
2、使用box-shadow
3、使用boder-image
10、单位理解
px 绝对单位物理像素
em 相对父元素大小
rem 相对根元素html
vh 相对屏幕高度
vw相对于屏幕的宽度，相对值
11、如何减少重绘和回流
@1、div 不要嵌套超过6层
@2 、绝对局部的DOM reflow相对较少
@3、避免重复访问计算后的样式，可以先将动态样式保存下来
@4、将要操作的节点克隆下来，在使用阶段交换类虚拟dom
@5、通过className/cssText一次性修改样式，而非一个一个改
12、cssHack
由于不同厂商的流览器或某浏览器的不同版本（如IE6 IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack! CSS Hack大致有3种表现形式：CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

1 .lte IE 7{*property:value;} 
2 .IE 7{+property:value;} 
3 .IE 6{_property:value;} 

4 5 html .class{} 6 +html .class{} 
78 <!‐‐[if IE]>IE浏览器显示的内容 <![endif]‐‐>

13谈谈你对html5的理解

html5是一个规范，标签更具有语义化，如（header、footer、nav、section、article 等），css3新增加了很多新特性，使得页面更美观（boxshadow、gradient、text shadow、opacity等），动画过渡等新特性更节约页面性能（animation、transition、 transform、keyframes），JavaScript还提供了大量api，例如本地存储storage、离线缓存 application cache、地理定位geolocation、即时会话websocket、文件预览fileReader等。