前端基础知识--CSS篇

小咪咪 2022-05-28 23:13 289阅读 0赞

**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布局

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220529/cba5172bf64f4f61bd7656be00fb0e33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220529/67db4fe7b17143eebdb8bd255cf5fa0f.png