不积跬步，无以至千里【2】【css】

合集 - 不积跬步无以至千里(7)

1.不积跬步，无以至千里【0】2022-11-282.不积跬步，无以至千里【1】【html】2022-11-293.不积跬步，无以至千里【4】【ES6】2022-12-154.不积跬步，无以至千里【3】【js-2】2022-12-155.不积跬步，无以至千里【3】【js-1】2022-12-13

6.不积跬步，无以至千里【2】【css】2022-12-07

7.不积跬步，无以至千里【7】【vue】2022-12-27

收起

1. css选择器

2. css选择器权重

3. 盒子模型（标准盒子模型和怪异盒子模型）

4. margin塌陷和margin重叠现象

5. 如何清除浮动

6. css定位属性position（文档流）

7. flex布局（grid布局） （必问，可以看阮一峰老师的那篇文档）

8. css单位的区别？(px, em, rem, vw, vh)

9: display相关属性

10: BFC(高频)

11. 常见布局方式 【 重点 】

- 居中的实现方式（必问）

- 三栏布局：圣杯布局和双飞翼布局

- css画三角形

12. 媒体查询

13. 移动端响应式布局方式

14. less和scss/sass的基本使用

15. 回流和重绘

16. z-index压盖顺序

17. 过渡与动画

18. 伪类和伪元素的区别

19. before和after双冒号和单冒号有什么区别？

20：css3新增了哪些特性？

21: css雪碧图的作用？

22: display:none和visibility:hidden、opacity: 0的区别

23: opacity和rgba区别

24: line-height如何继承？

25. 如何脱离文档流

26: 怎么让chrome支持12px以下的文字

27. 怎么画宽度为0.5px的线

 

1. css选择器

1.1、基础选择器-单个选择器

标签选择器/元素选择器
类选择器
id选择器
通配符选择器

1.2、复合选择器

a、后代选择器：中间用空格隔开
b、子代选择器：中间用>隔开
c、并集选择器：中间用逗号隔开
d、伪类选择器
链接伪类选择器：
a：link 选择所有未被选择的链接
a: visited 选择所有访问过的链接
a: hover 选择鼠标指针位于其上的链接
a：active 选择活动链接，鼠标按下未弹起
focus伪类选择器：
：focus 聚焦表单伪类选择器

1.3、其他

a、属性选择器

E[attr]：选择有attr属性的E元素
E[attr=”val“]：选择有attr属性且attr属性值为”val“的E元素
E[attr^=”val“]：选择有attr属性且attr属性值为”val“开头的的E元素
E[attr$=”val“]：选择有attr属性且attr属性值为”val“开头结尾的的E元素
E[attr*=”val“]：选择有attr属性且attr属性值含有”val“的的E元素

b、结构伪类选择器

child：
E：first-child 第一个子元素E
E：last-child 最后一个子元素E
E：nth-child（n） 第n个子元素E
type：
E：first-of-type 指定类型的第一个E元素
E：last-of-type 指定类型的最后一个E元素
E：nth-of-type（n) 指定类型的第n个E元素

c、伪元素选择器

::before
::after

 

2. css选择器权重-选择器优先级（权重）：

继承或通配符（*）---0
标签选择器、伪元素选择器---1
类选择器、属性选择器、结构伪类选择器---10
id选择器---100
行内样式---1000
！important---无穷大

3. 盒子模型（标准盒子模型和怪异盒子模型）

盒子模型：box-sizing：
a、content-box
盒子的宽度和高度包含padding、border
b、border-box
盒子的宽度和高度不包含padding和border

4. margin塌陷和margin重叠现象

外边距：margin
相邻元素外边距合并：上面的盒子给margin-bottom：10px；下面的盒子margin-top：5px；两个盒子之间的距离不等于15px，而是等于10px
嵌套块元素垂直外边距的塌陷：父亲mergin-top：10px；里面的儿子margin-top：5px；结果是儿子与父亲没有margin，而父亲的margin-top取大值
脱标的盒子不会存在外边距合并的问题

5. 如何清除浮动

a、额外标签法：在浮动元素后面添加一个块级标签

b、父级添加overflow属性（父元素添加）

overflow：hidden
overflow：scroll
overflow：auto

c、 父级添加：after伪元素（父元素添加）

d、父元素添加双伪元素

 

6. css定位属性position（文档流）

定位是让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位模式：
a、static：静态定位【不脱标，不使用边偏移】
静态定位按照标准流特性摆放位置，没有边偏移。
b、relative：相对定位【不脱标，相对自身位置边偏移】
相对自己原来的位置进行边偏移
不脱标，原来的位置继续保留，主要作用是用来限制子元素的绝对定位
c、absolute：绝对定位【脱标，相对于有定位的父亲边偏移】
如果没有祖先元素或者祖先元素没有定位，则边偏移是相对浏览器可视区为准
如果祖先有定位，则以最近有定位的祖先为准边偏移
不再占有原来的位置，脱标
注：加了绝对定位的盒子不能通过margin：0 auto来设置水平居中对齐
d、fixed：固定定位【脱标，浏览器可视区边偏移】
固定定位是一种特殊的绝对定位
固定定位必须有宽度
边偏移相对于浏览器可视区为准，与父元素没有关系，不会随着页面的滚动而消失
e、sticky：粘性定位【不脱标，浏览器可视区】
语法：position：sticky；top：10px；（滚到距离顶部10px，固定住）
不脱标，保留位置
边偏移相对于浏览器为准，与父亲没有关系
必须添加top、left、right、bottom其中一个才有效

7. flex布局（grid布局） （必问，可以看阮一峰老师的那篇文档）

8. css单位的区别？(px, em, rem, vw, vh)

9: display相关属性

10: BFC(高频)

10.1、定义理解

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

10.2、如何创建BFC

● 根元素：body；
● 元素设置浮动：float 除 none 以外的值；
● 元素设置绝对定位或者固定定位：position (absolute、fixed)；
● display 值为：inline-block、table-cell、table-caption、flex等；
● overflow 值为：hidden、auto、scroll；

1.3、BFC特点

● 垂直方向上，自上而下排列，和文档流的排列方式一致。
● 在BFC中上下相邻的两个容器的margin会重叠
● 计算BFC的高度时，需要计算浮动元素的高度
● BFC区域不会与浮动的容器发生重叠
● BFC是独立的容器，容器内部元素不会影响外部元素
● 每个元素的左margin值和容器的左border相接触

1.4、BFC应用

解决margin的重叠问题：
由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：
在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：
可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

 

 

11. 常见布局方式 【 重点 】

11.1、九宫、品字、两列、三列、水平垂直居中

11.2- 居中的实现方式（必问）

a、绝对定位+transform

b、绝对定位+margin:auto【有宽高】

c、绝对定位+margin负值【已知子盒子宽高】

d、flex布局

父容器给一个高度，display：flex，justify-content：center，align-items：center；

11.3- 三栏【列】布局：圣杯布局和双飞翼布局

11.4、- css画三角形

12. 媒体查询

13. 移动端响应式布局方式

13.1、媒体查询【其次】

   自己写、或者使用框架bootstrap

13.2、单独制作移动端【主流】

a、网页宽度随设备宽度变化

流式布局/百分比、flex布局

b、元素大小（宽度、高度）随着屏幕自适应变化

less+rem+媒体查询（flexible.js)

less+vw/vh【vw和vh不要混着用，要不都用vw要不都用vh】

14. less和scss/sass的基本使用

15. 回流和重绘

回流：元素大小、位置变化

重绘：元素颜色、背景色变化

16. z-index压盖顺序

需要先有定位

谁大谁在上

相同的值，后来的在上

17. 过渡与动画

18. 伪类和伪元素的区别 

伪元素：在内容元素的前后插入额外的元素或样式，

但是这些元素实际上并不在文档中生成。

它们只在外部显示可见，但不会在文档的源代码中找到它们，

因此，称为“伪”元素。
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

 

19. before和after双冒号和单冒号有什么区别？

冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

 

20：css3新增了哪些特性？

a、新增选择器

b、2D

c、3D

d、动画

e、盒子模型

f、css过渡 ： transition

g、背景渐变、图片模糊、calc函数、圆角、文字特效

 

21: css雪碧图的作用？

多张图片合成一张 减少http请求

 

22: display:none和visibility:hidden、opacity: 0的区别

 https://blog.csdn.net/m0_52943868/article/details/123899071

 

23: opacity和rgba区别

opacity：内容也透明

rgba：背景透明

 

24: line-height如何继承？

https://www.cnblogs.com/huangtq/p/14449279.html

24.1、写具体数值，则直接继承该值。

24.2、写比例，如2 或者1.5 等，则继承该比例。

比例*自己的字体大小

24.3、写百分比，如200%，则先计算再继承算出来的值。（差分点）

百分比*父级的字体大小

 

25. 如何脱离文档流

①float浮动。
②position的absolute和fixed定位。 

 

26: 怎么让chrome支持12px以下的文字

设置小于12px的字体：
a、使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
b、使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；
c、使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

 

27. 怎么画宽度为0.5px的线 

a、采用transform: scale()的方式
transform: scale(0.5,0.5);
b、采用meta viewport的方式  
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>