6.9响应式布局和居中显示

最新推荐文章于 2025-12-11 12:49:20 发布

原创最新推荐文章于 2025-12-11 12:49:20 发布 · 656 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文介绍了响应式布局的三个核心概念：弹性布局、弹性图片和媒体查询。详细阐述了媒体查询的使用，包括max-width和min-width的设置，并强调了设置html最小宽度的重要性。同时，文章探讨了页面宽度和高度的处理，特别是vh单位的应用。在居中显示部分，分别讲解了行内元素、块级元素以及自适应块级元素的水平和垂直居中方法，包括margin、text-align、绝对定位和transform属性的使用。

响应式布局主要由：
弹性布局
弹性图片
媒体和媒体查询
媒体类型的引入方式：
@media 方式
@media 媒体类型 {
选择器{
最大宽度和最小宽度
max-width
min-width
当宽度不设置的时候，宽度会自动适应屏幕尺寸
注意：
当设置盒子最大宽度（max-width）时，屏幕的尺寸到达盒子的最大宽度时，盒子的宽度便不会再变大；
当盒子设置了最小宽度（min-width）时，屏幕的尺寸缩小到盒子的最小宽度时，将出现水平滚动条，宽度不再随着屏幕缩小；
一般给html 一个最小的宽度，以保证用户将页面的X轴方向缩小的时候，页面不会出现异常，缩小到设置的最小宽度的的时候X轴方向出现滚动条。
页面的整体宽度和高度：
盒子的宽度不设置的时候，它会自适应屏幕的宽度
而高度如果不设置，那么高度将不显示，
如果需要显示:
必须设置它的所以父元素的高度(当父盒子没有设置固定高度的时候)都设置成100%
vh （viewheight）
100vh 是指100%viewheight ，是指可视范围的100%高度。
90vh=90%viewheight.
当父级盒子的高度设置固定值时候，并且父级盒子的高度大于屏幕的高度时，此时给子盒子设置height:100vh ，子盒子的高度= 屏幕可视高度，父盒子超出屏幕的部分高度，子盒子将不会设置。
<body>

<

水平居中
一，行内元素水平居中：
text-align :center;
二，块级元素水平居中：
子盒子有固定的宽高值时：
方法一：margin : 0 auto ;
方法二：采取绝对定位的方式实现：
子盒子采用绝对定位，左侧移动距离为父盒子宽度的一半，即：left:50%,再将子盒子向左移动自身盒子宽度的一半，即：margin-left : -50%
注意：如果父盒子没有定位，那么将以html 页面参考。

三，自适应块级元素水平居中
自适应的块级元素没有固定的宽和高，那么就不好直接设置移动的距离。
方法一：此时借助css3 的变形属性 Transform 来完成：
子盒子整体的定位移动距离仍然是父盒子的一半，子盒子相对自身的移动距离用
Transform : translateX :-50%;
Transform : translateY :-50%;
或者：Transform : translate :（-50% -50%）；（X & Y 的值同时设置，可以控制子盒子移动）

垂直居中：
一，行内元素的垂直居中
1.单行文本的垂直居中：行高=盒子的高度，文本会垂直居中
2，多行文本的垂直居中
盒子不设置固定高度时：通过设置padding 来实现
盒子有固定高度时：
方法一：使用table

方法二：使用display 设置 table ，配合样式 vertical-align 设置为 middle 来实现