페이지 레이아웃에서 CSS의 여백 속성을 사용하는 방법에 대한 가이드

여백 속성은 많은 HTML 요소의 너비와 높이를 결정하므로 레이아웃에서도 매우 중요한 역할을 할 수 있습니다. 다음으로 페이지 레이아웃에서 CSS 여백 속성을 사용하는 방법을 살펴보겠습니다.

기본

1. 요소가 포함된 상자 너비와 높이는 콘텐츠 너비와 같습니다

HTML

<p class="wrap">
    <p class="item1"></p>
    <p class="item2"></p>
</p>

CSS

.wrap {   
   float: left;   
   border: 2px solid #000;   
 }   
.item1 {   
   width: 100px;   
   height: 100px;   
   background: #fdf;   
   margin-left: 10px;   
   margin-top: 10px;   
   margin-right: 20px;   
   margin-bottom: 30px;   
}   
item2 {   
   width: 50px;   
   height: 50px;   
   background: #adf;   
}

원칙 1을 만족할 수 있는 조건은 단 하나뿐입니다. 너비가 없고 문서 흐름에 없습니다. 이때 상위 요소 랩에 의해 생성된 포함 상자의 너비와 높이는 하위 요소 border-box의 너비와 높이를 더한 값과 같습니다. 즉, 하위 요소의 여백 값도 포함 상자의 일부입니다. 여백 기준선에는 두 가지 유형이 있습니다. 첫 번째 유형은 margin-top 및 margin-right의 기준선입니다. 위의 예에서와 같이 .item1 요소의 margin-top 및 margin-left 값을 조정하면 컨테이너 상자의 가장자리 선이 참조선이 됩니다. .item1 요소가 위치한 포함 상자도 변경되므로 가장자리 선도 지속적으로 변경되며 이로 인해 .item1 요소 자체의 위치도 변경되는 것 같습니다. 두 번째 유형의 마진의 기준선은 요소 자체의 가장자리 선을 기준으로 합니다(마진의 바깥쪽이 가장자리 선입니다). 마찬가지로 위 예에서 margin-bottom 값을 조정하면 의 margin-bottom이 됩니다. item1도 지속적으로 변경됩니다. 즉, 자체 가장자리 선이 지속적으로 움직이며 이는 .item2의 이동으로도 이어집니다. 위의 논의를 바탕으로 마진 조정은 자신의 상대 기준선 위치를 이동하는 동시에 기준선을 기준으로 이동하는 요소를 이동시키는 것과 동일하다는 결론을 내릴 수 있습니다. 요소 자체는 포함 상자의 가장자리 선을 기준으로 이동하고 요소 자체의 형제 요소는 요소 자체의 가장자리 선을 기준으로 이동합니다. 기준선의 개략도는 그림과 같습니다. 화살표가 가리키는 방향으로 변경되는 기준선의 마진 값은 모두 양수 값입니다.
요약하자면 여백을 사용하여 요소 자체를 이동할 수 있을 뿐만 아니라 인접한 요소도 이동할 수 있습니다. 이동할 때 알아야 할 것은 요소가 포함된 상자의 크기도 변경된다는 것입니다.

요약하면 요소의 너비와 높이가 콘텐츠의 너비와 높이와 같을 때 여백 값을 조정하여 포함 상자의 크기를 조정할 수 있습니다. 포함 상자의 변경으로 인해 요소 자체도 이동하게 되므로 요소를 이동할 수 있고 요소 사이의 간격도 조정할 수 있습니다.

2. 요소 콘텐츠의 너비는 포함 상자의 너비와 같습니다.

<p class="wrap">
   <p class="wrap-inner"></p>
</p>

rrree

위의 예에서 랩 내부 요소의 테두리 상자 너비에 여백 크기를 더한 값은 포함 상자 너비와 같습니다. 따라서 포함 상자 너비는 다음에 따라 고정됩니다. 공식 '왼쪽 여백' + '테두리 왼쪽 너비' + '왼쪽 패딩' + '너비' + '오른쪽 패딩' + '테두리 오른쪽 너비' + '오른쪽 여백' = 포함 블록의 너비 , 자신의 margin-left 또는 margin-right 값을 조정하면 Wrap-inner 자체가 크기가 변경됩니다. margin-left가 양수 값이고 값이 점차 커지면 Wrap-inner 자체의 너비가 점차 작아집니다. -왼쪽은 음수 값으로 점차 작아지며, 랩 내부 자체의 너비가 점차 커집니다.-오른쪽과 동일합니다. 여기서 너비 상속은 본질적으로 width:100%와 다릅니다. 왜냐하면 width:100%는 포함 상자의 100%와 동일하고 여백, 테두리 또는 패딩과 관련이 없기 때문입니다. 자세한 내용은 다음을 참조하세요. me 너비와 높이를 논의하는 일련의 기사 중 세 번째 기사의 예는 약간 장황하지만 실수가 발생하기 쉬운 부분입니다. 주목해야 해, 주목해야 해, 주목해야 해! ! ! . 중요한 말을 세 번 말하세요.

계산에 따르면 왼쪽과 오른쪽 여백을 -10px로 조정하면 랩 내부가 넓어집니다

将margin-left和right调整为10px,如图,根据计算,wrap-inner变窄

综上，当元素宽或高度等于其containing-box的宽度或高度时,且containing-box的宽度固定我们便可以利用margin对其进行自身宽度大小的调整。也就是说宽高度和containing-box有关系时，我们利用margin可进行内里元素大小的调整。

不同元素margin的计算
行内级元素
Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
Inline-block,非置换元素在文档流中:同上
块级元素
块级非置换元素，在文档流中
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
下面的情况下，如果margin值为auto

如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。
块级置换元素，在文档流中
同块级非置换元素一样。

小结
行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。
块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

利用Margin进行布局
通常在布局中我们会遇到那些问题呢？下面是我自己实践中遇到的一些问题

问题1
当我们拿到一份设计稿，然后这份设计稿有像下面这样的布局，整体居中，里面元素排一排，当然布局的方式会有很多种，那么如果我们采用浮动布局或者display:inline-block进行布局会出现什么问题呢，如图我们可以看出，若采用上述两种方式进行布局，那么每个块的宽度加上间隙，就会超出包含块的宽度，当然我们也可以将包含块的宽度进行增大以留下足够的位置供元素摆放，但是这种方法明显是不可取的，那么如何解决这个位置不够的问题呢，可以看下面的栗子1 。

栗子
html

<p class="container">
  <p class="inner-wrap">
      <p class="inner"></p>
      <p class="inner"></p>
      <p class="inner"></p>
  </p>
</p>

css

body {   
  margin: 0;   
}   
.container {   
  margin: 0 auto;   
  width: 980px;   
}   
.inner-wrap {   
  margin-left: -10px;   
}   
.inner {   
  float: left;   
  margin-left: 10px;   
  width: 320px;   
  height: 200px;   
  background: #2df;   
}

此布局便利用了原理2，利用负margin增加了inner-wrap的宽度，但不改变整体的宽的情况下，实现效果。如下

问题2
上面的例子仅仅只是实现了三列固定宽度的布局，这样的布局当屏幕宽度发生变化的时候便会出现问题。因此我们便会有如下需求。

左右列固定，中间列自适应

栗子
html

<p class="main">
  <p class="main-content"></p>
</p>
<p class="left"></p>
<p class="right"></p>

css

.main {   
  float: left;   
  width: 100%;   
}   

.main-content {   
  height: 200px;   
  background: #2da;   
  margin: 0 200px;   
}   

.left,.rightright {   
  float: left;   
  width: 200px;   
  height: 200px;   
  background: #ccc;   
}   

.left {   
  margin-left: -100%;   
}   

.rightright {   
  margin-left: -200px;   
}

效果如下,当你缩小屏幕时，中间部分会随着屏幕的缩小而缩小，另外两部分宽度不变，同样也满足了主要内容优先加载的需求，可谓一举两得

分析：

可以看出上面的布局利用了原理2，但是这里仍然会有几个为什么要问。

首先，为什么main里面一定要嵌套main-content,为什么不能直接使用单个main(假设1)？
其次，为什么main上一定要设置float:left，可以设置其他值吗，如position:absolute(假设2)？
分析上面的布局之前，我们也要了解到上面的布局满足了我们的什么需求，这里有两点1.主要内容优先加载。2.主要内容自适应。这里我们可以分析一下，我们是怎样达到上述两个目的的。首先，要达到目的1，我们就的把p.main放在前面来写，因为浏览器是从下到下渲染页面的，放在前面的也就会先渲染。且由于p.main为文档流中的块级元素，因此会独占一行，因此我们需要使其脱离文档流，这样才能使下面的元素能有机会上的来(这里之所以不考虑display:inline-block是因为p.main的长度会独占一行，就算设置display:inline-block也没有任何作用，下面的元素仍然上不来)。而要达到目的2，需要用到原理2。同时在上面提出的两个问题中，有两个假设。

假设1，如果使用单个main可不可以满足上述两个需求？我们可以试试。
html

<p class="main"></p>
<p class="left"></p>
<p class="right"></p>

css

body {   
  margin:0;   
}   
/*这里注意需要改掉main的流方式，下面的元素才上的来*/
.main {   
  float:left
  margin: 0 210px;   
  height: 200px;   
  background:#2da;   
}   
.left,.rightright {   
  float: left;   
  width: 200px;   
  height: 200px;   
  background: #ccc;   
}   
.left {   
  margin-left: -100%;   
}   
.rightright {   
  margin-left: -200px;   
}

从中线分开的黄色两部分为各自为main的左右外边距

从结果中，我们可以看出使用单个main是不行的，因为在不设宽度且元素不在文档流中时，元素的宽度为0，不能满足我们的需求，正因为我们同时要满足1.main元素不在文档流中2.元素不设宽度且在文档流中。这两个条件当然是不能同时在一个main元素下能达到的，因此我们需要再嵌套一个main-content让它来满足条件2。这也就解释了为什么一定要嵌套一个main-content。
解决了问题1，现在我们来说问题2。

假设2,main上的float值可以换为position:absolute吗？
同样的，我们试试
html

<p class="main">
  <p class="main-content"></p>
</p>
<p class="left"></p>
<p class="right"></p>

css

body {   
  margin: 0;   
}   
.main {   
  position:absolute;   
  width:100%;   
}   
.main-content {   
  margin: 0 210px;   
  height: 200px;   
  background: #2da;   
}   
.left,.rightright {   
  width: 200px;   
  height: 200px;   
  background:#ccc;   
}   
.left {   
  float: left;   
}   
.rightright {   
  float: rightright;   
}

答案是可以的，只是我们需要改掉一些值，而当main为float之所以要给p.left与p.right要设置margin-left值是因为浮动元素浮动时，当它的外边缘碰到包含框或者另一个浮动框的边框为止。而为浮动元素的p.main占据了整整一行，因此下面的浮动元素p.left与p.right便被挤了下来，而设置它们的margin-left值便可以把它们移上去，这里便运用了原理1。而当我们把p.main的float值改为position:absolute时，便不会存在被挤下来的问题，可直接设置p.left与p.right的float的值。效果如下。

如若只需要达到宽度自适应的要求，那么，这时候便可以将p.main放在最后面且不用嵌套p.main-content,具体如何实现，大家可以自己试试。
问题3
如下所示设计稿，在我们进行布局的过程中，可能会出现border重合的情况，因为一方面我们需要对整个整体加上border，而另一方面我们又需要利用border隔开那三个小块。那么如果我们对每个小块都加上右边框，可以想象，最右边就会出现边框的堆叠而这不是我们希望看到的，所以，要如何解决这个问题，可以看如下例子给出的答案。

栗子
html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

css

ul {   
  position:absolute;   
  margin: 0;   
  padding:0;   
  list-style:none;   
  border: 4px solid #c5c5c5;   
}   
li {   
  float:left;   
  width: 200px;   
  height: 50px;   
  line-height: 50px;   
  text-align: center;   
  border-right: 4px solid #c5c5c5;   
}

没在li上加margin-right:-4px;前,效果如图,发生了堆叠。

加了margin-right: -4px后，达到预期效果。因为加上了ul的右边框发生了移动与第三个li的右边框进行了重叠。因此效果上来看便符合了预期,如图

이 레이아웃은 원칙 1을 활용하고 인접한 요소의 위치를 ​​제어하여 원하는 효과를 얻습니다.
원칙 1을 사용하여 요소의 중앙 레이아웃을 달성할 수도 있습니다. 먼저 요소를 위쪽 및 왼쪽으로 50% 이동한 다음 요소의 위쪽 및 왼쪽 여백 값을 요소 너비의 절반으로 설정합니다. 요소 자체를 이동합니다. 이렇게 하면 요소를 중앙에 배치하는 목적이 달성됩니다.

요약
1. 요소 너비가 포함 상자 너비와 같은 경우.
여백 값을 조정하여 요소의 너비를 조정할 수 있습니다.
2. 요소 너비가 포함 상자와 관련이 없는 경우.
여백 값을 조정하여 요소의 위치를 ​​이동할 수 있습니다.

위 내용은 페이지 레이아웃에서 CSS의 여백 속성을 사용하는 방법에 대한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!