前端学习第一周问题总结

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

2022/3/27-2022/4/2

如何去掉a标签中的下划线？

直接对a标签的text-decoration属性进行修改

text-decoration: none; 
    /* none：无修饰 
       underline：下划线
       overline：上划线
       over-through：删除线
    */

---

导入css文件时link和@import的区别？

1. 本质区别：link属于xhtml标签，而@import完全是css提供的方式
2. 加载顺序区别：link是同步加载，@import会等页面下载完再加载
3. 兼容性差别：@import是css2.1提出来的，老的浏览器不支持，而link则无此问题

---

样式优先级如何？

行内样式 > html文件内部样式 > 外部导入样式，采取就近原则，可以添加!important提高优先级

---

css中选择器的解析规则

1. 样式设置有冲突的选择权重高的
2. 层叠性：权重相同则选择最后定义的
3. 继承性：所有跟文本字体属性相关的属性都会被子元素继承

1. 通配符 * 权重为0，用于初始清除边距
2. 标签选择器 权重为1
3. 类选择器 . 权重为10，如果两个类有重复，则按在style标签中的顺序执行
4. id选择器 # 权重为100，具有唯一性
5. 包含选择器 计算权重之和，> 子代选择器，空格 后代选择器，+ 后续一个兄弟选择器，~后续所有兄弟选择器
6. 内联样式 权重1000
7. !important 权重10000

---

行元素如何转化成块元素？

1. 修改disply属性
2. 定位，position: fixed/absolute
3. float

---

如何解决父盒子高度塌陷？

1. 给父盒子定高，但是子元素过多则会溢出
2. 添加空盒子清浮动，但是会增加新标签，不利于代码的可读性
3. overflow: hidden;隐藏溢出元素，但会降低浏览器性能
4. 万能浮动清除法，在父盒子下面添加一个伪元素

.box::after{
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
    
    /* display: none;  不占位隐藏
    visibility: hidden;  占位隐藏 */
}

---

如何理解渐进增强(Progressive Enhancement)和优雅降低(Graceful Degradation)？

渐进增强：一开始针对低版本构建页面，完成基本功能，然后再针对高版本浏览器进行效果、交互的优化以给用户更好的体验

优雅降低：一开始则构建完整功能，然后再针对低版本浏览器进行兼容，不影响基本的使用功能。

---