⁶⁸

【CSS相关】CSS布局

发布于2024-10-29 17:46:42 • 阅读量 8584

发布于2024-10-29 17:46:42 | 版权信息：非商用-署名-自由转载

评论

推荐阅读

目录

CSS布局

1.实现两栏/三栏布局的方法?

1.1 基础布局

1.2 圣杯布局

1.3 双飞翼布局

2.absolute/fixed/static/sticky定位?

3.什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

3.1 形成层叠上下文的方法？

3.2 CSS层叠上下优先级

3.3 层叠上下文的堆叠顺序？

4.如何解决inline-block 的间隙问题？

4.1 字符间距问题

4.2 解决方法

5.BFC是什么？如何清除浮动？

5.1 如何触发BFC?

5.2 BFC布局规则

5.3 如何清除浮动？

5.3.1 添加额外标签

5.3.2 父元素设置 overflow：hidden

5.3.3 使用:after 伪元素

5.3.4 双伪元素清除法(推荐)

6.如何适配移动端？

6.1 viewport进行缩放

6.2 使用rem

6.3 设计上（响应式方法）

6.4 固定宽度做法

7.em和rem的区别？

8.垂直居中的6中实现方式？

8.1 方法一：基于视口的垂直居中

8.2 方法二：定宽居中

8.3 方法三：calc居中

8.4 方法四：transform居中

8.5 方法五：flex居中方法1

8.6 方法六: flex居中方法2

9.水平居中的4种实现方式？

9.1 方法一：text-align的center属性

9.2 方法二：margin的auto属性

9.3 方法三：绝对定位

9.4 方法四：相对定位

10 居中问题要点总结

10.1 被居中元素宽高固定

10.1.1 绝对定位+margin

10.1.2 绝对定位+calc

10.2 被居中元素宽高不定

10.2.1 transform变换

10.2.2 flex布局+auto

10.2.3 flex布局+align

10.3 在浏览器窗口中居中

10.3.1 基于视口的垂直居中