[分享]css与屏幕左右的距离

CSS是网页设计中必不可少的一环，它可以让我们的页面变得更加美观、更加易于操作。其中一个非常重要的CSS属性就是屏幕左右的距离。marginleft: 10px; marginright: 10px;...

CSS是网页设计中必不可少的一环，它可以让我们的页面变得更加美观、更加易于操作。其中一个非常重要的CSS属性就是屏幕左右的距离。

margin-left: 10px;
margin-right: 10px; 

以上代码可以让元素与屏幕左右边缘距离分别为10像素。这意味着在这个元素的左侧和右侧的10像素范围内，不会有其他任何元素出现。

在实际的应用中，我们常常需要将页面的宽度与屏幕宽度匹配。这可以通过以下代码实现：

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  max-width: 100%;
} 

以上代码中，我们将body元素的margin与padding都设置为0，以确保页面与屏幕的距离为0。而对于wrapper元素，我们设置它的宽度为100%，并且最大宽度也为100%。这样，当屏幕的尺寸变化时，wrapper元素会自动缩放以匹配屏幕宽度。

在移动端设备上，我们需要更加细致的控制屏幕宽度。以下是一个常见的移动端页面布局代码：

html {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

.wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
} 

以上代码中，我们根据不同的屏幕尺寸设置不同的字体大小。而对于wrapper元素，我们设置它的最大宽度为768像素，并且将其水平居中对齐。在移动设备上，页面的宽度会自动缩小以适应屏幕尺寸，而当屏幕超过768像素时，页面的宽度将始终保持在768像素。

因此，通过合理地设置CSS属性，我们可以有效地控制页面与屏幕之间的距离，让网页设计更加美观、易读、易操作。