盒模型的五个属性的基本语法

一、清除默认样式

在进行网页设计时，为了使网页效果更加美观和符合自己的需求，我们需要对默认样式进行清除，从而达到自己想要的效果。下面是CSS清除默认样式的详细解析和代码示例。

1、CSS清除默认样式的方法

通常有以下几种方法：

1. 使用*选择器清除默认样式

使用通配符*选择器可以清除所有元素的默认样式，但是这种方式会对性能造成影响，因为它会遍历所有元素。代码如下：

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

2. 重置元素样式

通过重新设置元素的样式，来清除默认样式。代码如下：

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

3. 使用normalize.css库

normalize.css是一个开源项目，它是一个跨浏览器的CSS样式重置库，它解决了浏览器之间的不兼容问题，并减少了开发人员编写样式重置的代码量。使用方法很简单，只需要在HTML文件中引入normalize.css文件即可。

2、CSS清除默认样式的代码示例

下面给出两种常用的CSS清除默认样式的代码示例：

1. 使用*选择器清除默认样式

* {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

2. 重置元素样式

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

二、height 应用

CSS盒子属性height用于设置元素的高度。它可以设置一个具体的数值，也可以使用百分比或自适应的单位。

以下是一些height属性的示例：

设置一个固定的高度：

div {
  height: 200px;
}

将高度设置为百分比，这将根据父元素的高度进行计算：

div {
  height: 50%;
}

使用自动高度，这将根据内容自动调整元素的高度：

div {
  height: auto;
}

在布局中，height属性通常与width属性组合使用，以确定元素的尺寸。例如：

div {
  width: 50%;
  height: 200px;
}

这将创建一个宽度为父元素50%、高度为200px的元素。

另外，height属性也可以与其它CSS属性一起使用，例如：

div {
  height: 200px;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #000;
}

这将创建一个高度为200px、上边距为20px、内边距为10px、边框宽度为1px的元素。

总之，height属性是CSS中常用的属性之一，可以帮助我们控制元素的高度，并在布局中使用。

三、居中

在CSS中，有多种方法可以使元素居中，下面是常用的几种方法：

1. 水平居中

• 对于行内元素（如文字、图片等），可以使用text-align属性设置父元素的文本对齐方式为center，实现水平居中。示例代码：

<div style="text-align: center;">
  <span>这是一个行内元素</span>
</div>

• 对于块级元素（如div、p等），可以使用margin属性让左右外边距自动调整为相等的值，实现水平居中。示例代码：

<div style="width: 200px; margin: 0 auto;">
  这是一个块级元素
</div>

其中，margin: 0 auto;的意思是将上下外边距设为0，左右外边距设为自动（即自动将左右外边距调整为相等的值），从而实现水平居中。

1. 垂直居中

• 对于单行文本（如标题、按钮等），可以使用line-height属性使行高等于元素高度，从而实现垂直居中。示例代码：

<button style="height: 40px; line-height: 40px;">按钮文字</button>

• 对于多行文本（如段落、列表等），可以使用Flexbox布局或CSS表格布局实现垂直居中。

使用Flexbox布局，需要将父元素的display属性设置为flex，并使用align-items属性将子元素在交叉轴上垂直居中。示例代码：

<div style="display: flex; align-items: center;">
  <p>这是一个段落</p>
</div>

使用CSS表格布局，需要将父元素的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性使子元素在垂直方向上居中。示例代码：

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle;">

四、父子盒模型

CSS 父子盒模型是指在 HTML 中，子元素的尺寸和位置是相对于其父元素而言的。当父元素的尺寸和位置发生变化时，子元素的尺寸和位置也会相应地发生变化。

父子盒模型有两个重要的概念：内边距和边框，它们会影响子元素的尺寸和位置。

以下是父子盒模型的代码示例：

HTML 代码：

<div class="parent">
  <div class="child">
    Hello world!
  div>
div>

CSS 代码：

.parent {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
 
.child {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

在上面的代码中，父元素 .parent 有一个宽度为 300px，高度为 200px，内边距为 20px，边框为 1px 实线黑色边框。子元素 .child 的宽度和高度都设置为 100%，背景色为黄色。

当预览以上代码时，会看到一个黄色的矩形盒子，在矩形盒子周围有一个黑色边框和 20px 的内边距。

这是因为子元素 .child 的宽度和高度都设置为 100%，所以它的尺寸会被父元素 .parent 的尺寸影响。由于父元素 .parent 的宽度和高度都有内边距和边框，所以子元素 .child 的大小和位置也会受到影响。

如果将父元素的宽度和高度改为 400px 和 300px，子元素的尺寸和位置也会相应地发生变化。

父子盒模型在页面布局和设计中非常常见，了解如何使用它能够让开发者更好地掌控页面元素的布局和样式。

五、css margin 塌陷现象

CSS Margin 塌陷现象是指在特定情况下，两个相邻元素之间的 Margin 值可能会合并为一个值。这种现象对于布局设计可能会带来一些不可预期的问题。

Margin 塌陷现象发生的情况分为以下两种：

1. 相邻兄弟元素的 Margin 塌陷：当两个相邻的兄弟元素各自拥有 Margin 值时，它们的 Margin 值会发生合并，合并后的值为两个 Margin 值中较大的那个。

2. 父元素和第一个/最后一个子元素的 Margin 塌陷：当一个父元素和它的第一个或最后一个子元素之间出现 Margin 值时，它们的 Margin 值会发生合并，合并后的值为两个 Margin 值中较大的那个。

以下是代码示例：

HTML 代码：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS 代码：

.parent {
  background-color: #eee;
  padding: 20px;
}
 
.child {
  background-color: #fff;
  margin: 10px;
  height: 50px;
}

上面代码中，父元素 .parent 的 padding 值为 20px，两个子元素 .child 的 margin 值为 10px。因此，两个子元素之间的 Margin 值会发生合并，合并后的值为 10px。

为了解决 Margin 塌陷问题，可以使用以下方法：

1. 给相邻元素之间添加 border 或 padding，这样就可以避免 Margin 塌陷。

2. 将相邻元素之间的 Margin 值设置为 0，然后通过其他方式来实现间距的效果。

3. 给父元素添加 overflow 属性，例如 overflow: hidden，这样就可以避免父元素和第一个/最后一个子元素的 Margin 塌陷。

这些方法可以解决 Margin 塌陷问题，但需要根据具体情况进行调整。