css布局常见问题

一、宽度设置问题

在设置相关元素的宽度时，为了考虑到相关的适配问题，故不能将宽度写死，往往将宽度的单位设置为%或者vw。

注意：

• %单位的定义是针对父元素而言的。
• vw单位是针对视口宽度而言的。

二、高度设置问题

在整体布局的高度设置中不用过多的考虑布局问题，因此需要将高度写死，此时常使用px单位。（在浏览器中常出现滚动条来进行相关的调节）。同时相关的px写常使用与竖直方向，比如相关的margin-top、margin-bottom、top与bottom方向的设置。

在整体布局中不将高度写死出现的问题：

• 当竖直方向的margin单位设置为可适应的，则当打开开发者工具后可能会引起布局错乱问题。
• 当高度设置为自适应性的，当打开开发者工具后可能也会引起布局错乱问题。

当需要设置自适应的高度时，可以使用%、vh单位进行设置，同时当相关的高度设置与其它元素相关联时，可以使用es6中的calc计算属性来计算出相关的高度。

注意：

• %单位的定义是针对父元素而言的。
• vh单位是针对视口宽度而言的。
• 例如：calc(100vh - 200px)，该相关的含义是指整体的窗口高度减去设置为200px的高度，则该元素的高度为其所剩余的高度。

三、绝对定位问题

在相关的绝对定位中，通常以其父元素为基准进行绝对定位，而不是以整体的窗口进行绝对定位。

以整体的窗口进行绝对定位常见问题：

• 进行相关绝对定位后，其相关的定位布局不好进行调整，容易显得布局错乱。
• 针对整个窗口进行绝对定位容易导致布局错乱。

提示：相关整体的布局需要根据其具体需求而定，相关的布局需要多加练习，在练习过程中就很容易发现其中的使用途径以及使用方式。