css布局模型全面了解

盒模型是CSS布局的基础，它指的是在页面中的每个HTML元素都被看做一个矩形的盒子，并分为几个部分：

CSS布局模型全面了解

1. 盒模型

盒模型是CSS布局的基础，它指的是在页面中的每个HTML元素都被看做一个矩形的盒子，并分为几个部分：

• content：元素的正文内容
• padding：内边距
• border：边框
• margin：外边距

div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

上述代码展示了如何使用CSS设置矩形盒子的大小、边框、内边距和外边距。

2. 定位

CSS提供了3种主要的定位方式：相对定位、绝对定位和固定定位。

相对定位

相对定位是指元素相对于其初始位置定位。相对定位不会影响其他元素的布局。

div {
  position: relative;
  left: 50px;
  top: 50px;
}

绝对定位

绝对定位是指元素相对于其父元素定位。绝对定位会影响其他相邻元素的位置，当一个元素被设置为绝对定位时，它将脱离文档流并且不再占据任何空间。

.parent {
  position: relative;
}
.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

上述代码表示了一个父元素和一个子元素，子元素的位置相对于父元素的右下角定位。

固定定位

固定定位是指元素相对于浏览器窗口的位置进行定位。固定定位的元素也不再占据文档流，且对象的位置固定不变，无论滚动条的滚动情况。

div {
  position: fixed;
  top: 0;
  left: 0;
}

上述代码展示了如何使用CSS设置一个固定在屏幕左上角的元素。

3. 浮动

浮动是指元素脱离了文档流，并且可以左右移动。它广泛地应用于实现多栏布局，但也需要小心使用，以免影响其他元素的位置。

.left{
  float: left;
  width: 50%;
}

.right{
  float: right;
  width: 50%;
}

上述代码展示了如何实现一个左右两栏布局，左侧占50%，右侧占50%。

示例一：经典的圣杯布局

经典的圣杯布局包括一个固定的中间栏和两个浮动的侧栏，已经成为了CSS布局的经典案例。

<div class="container">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  padding-left: 200px;
  padding-right: 200px;
}

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

.left {
  float: left;
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
}

.right {
  float: left;
  width: 200px;
  position: relative;
  right: -200px;
  margin-left: -200px;
}

上述代码展示了如何创建一个圣杯布局，并设置中间、左侧和右侧三个部分的样式。

示例二：响应式设计的媒体查询

响应式设计使用CSS媒体查询可以使我们的网页自适应不同尺寸的设备屏幕。例如，我们可以使用媒体查询根据设备不同的宽度设置不同的CSS样式。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

@media only screen and (min-width: 1025px) {
  body {
    background-color: lightpink;
  }
}

上述代码展示了如何设置不同宽度的设备使用不同背景颜色的CSS样式。大屏幕设备将使用粉色的背景颜色，小屏幕设备将使用蓝色背景颜色，中等屏幕设备将使用绿色背景颜色。

以上是CSS布局模型全面了解的完整攻略，包含了盒模型、定位和浮动3个方面的详细讲解以及两个示例说明。