css元素的层叠顺序

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：对于上图，由上到下分别是： （1）背景和边框：建立当前层叠上下文元素的背景...

前端这点事 2022-01-28 389 #CSS

什么是margin重叠问题？如何解决？

问题描述：两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠...

前端这点事 2022-01-28 312 #CSS

css BFC是什么?有什么用?

先来看两个相关的概念：Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。Formatting context：块级上下⽂格式化，它...

前端这点事 2022-01-28 525 #CSS

css定位与浮动

1. 为什么需要清除浮动？清除浮动的方式浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。浮动的工作...

前端这点事 2022-01-28 251 #CSS

Flex布局的理解及其使用场景

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布...

前端这点事 2022-01-28 265 #CSS

如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接...

前端这点事 2022-01-28 293 #CSS

css两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为a...

前端这点事 2022-01-28 233 #CSS

常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素...

前端这点事 2022-01-28 246 #CSS