前端基础知识--CSS篇

1.CSS的盒子模型

W3C标准盒模型：width = content

IE怪异盒模型：width = content + padding 值

2.初始化CSS样式的好处

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

3.CSS优先级

同权重下，优先级就近原则（离被设置元素越近优先级别越高），载入样式以最后载入的为准：

a.内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

b.不同权重下，优先级关系：

c.!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器

d.计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照“就近原则”来判断

4.css清除浮动的几种方式

• clear:both
• overflow（hidden和auto可以清除浮动，visible不行）
• clearfix

clearfix方法一：

利用:after和:before来在元素内部插入两个元素块,其实现原理类似于clear:both方法(只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug)

.clearfix:before,
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; }
.clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */

clearfix方法二：

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
  overflow:hidden;
}
.clearfix {
  zoom:1; /* IE < 8 */
}

5.rgba()和opacity的透明效果的区别？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

6.如果需要手动写动画，最小时间间隔多久最优？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

7.css hack原理及常用hack

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： IE浏览器显示的内容 ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

 

8.css布局

如何水平居中一个元素（区分单行、多行）

 

• 如何竖直居中一个元素（区分居中元素有高度和没有高度的情况）
• 左侧固定，右侧自适应
• 右侧固定，左侧自适应
• 两边固定，中间自适应
• Flex布局
• Grid布局

 

 

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！