三剑客实战之Css入门基础知识【css内外边距和宽高设置】

css外边距合并

外边距合并：定义为当两个垂直外边距相遇时，将形成一个外边距。合并之后的外边距高度是等于两个发生合并的外边距高度中的较大者。外边距合并（叠加）在实践中对网页进行布局时，它会造成许多混淆。也是一个相对比较简单的概念。当一个元素出现在另一个元素上面时，先前第一个元素的下外边距与第二个元素的上外边距会发生合并。

CSS 内边距

关键词：padding 

在CSS中，您可以完全控制内边距（填充），该属性用于在任何定义的边界内的元素内容周围生成空间，有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

Padding - 单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top（上）

padding-right（右）

padding-bottom（下）

padding-left（左）

所有内边距属性都可以设置以下值：注意：不允许负值。

关键代码示例：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - 简写属性

在一个属性中指定所有内边距属性。（此举可为了缩减代码）padding 属性是以下各内边距属性的简写属性：

padding-top（上边）

padding-right（右边）

padding-bottom（下边）

padding-left（左边）

假如 padding 属性设置了一个值：

padding: 25px;

定义为：所有四个内边距都是 25px

假如 padding 属性设置了两个值：

padding: 25px 50px;

定义为：上和下内边距是 25px，右和左内边距是 50px

关键代码演示：

div {
  padding: 25px;
}

假如 padding 属性设置了三个值：

padding: 25px 50px 75px;

定义为：上内边距是 25px，右和左内边距是 50px，下内边距是 75px

关键代码演示：

div {
  padding: 25px 50px 75px;
}

假如：padding 属性有四个值：

padding: 25px 50px 75px 100px;

定义为：上内边距是 25px，右内边距是 50px，下内边距是 75px，左内边距是 100px

关键代码演示：

div {
  padding: 25px 50px 75px 100px;
}

内边距和元素宽度，内容区域是元素（盒模型）的内边距、边框和外边距内的部分。width 属性指定元素内容区域的宽度，假如元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。这里假如下例代码<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）：

div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

例如：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

CSS 设置高度和宽度

width 和 height 属性用于设置元素的高度和宽度。属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。可设置如下值：

下例为此元素的高度为 300 像素，宽度为 80％，背景色为红色。

div {
  height: 300px;
  width: 80%;
  background-color: red;
}

下例中元素的高度为 200 像素，宽度为 600 像素，背景为powderblue。

div {
  height: 200px;
  width: 600px;
  background-color: powderblue;
}

提示：width 和 height 属性不包括边框或外边距、内边距、！它们设置的是元素的外边距内区域的高度/宽度以及内边距、边框！

max-width

该属性定义于设置元素的最大宽度。假如将其设置为默认值， none 代表没有最大宽度），长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。而后浏览器会将水平滚动条添加到页面。此举为使用 max-width 能够改善浏览器对小窗口的处理。下例关键代码演示中元素的高度为 150 像素，最大宽度为 550 像素。提示：max-width 属性的值将覆盖 width（宽度）。

div {
  max-width: 550px;
  height: 150px;
  background-color: powderblue;
}

用百分号表示一个图像的宽和高：

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}

设置元素的最大宽度和最小宽度并赋于背景色：

div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}

设置元素的最大高度和最小高度并赋于背景色：

div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}

可能的值：

auto-----默认值。浏览器可计算出实际的宽度。

length---使用 px、cm 等单位定义宽度。

%--------定义基于包含块（父元素）宽度的百分比宽度。

inherit---规定应该从父元素继承 width 属性的值。

word-break 

该属性规定自动换行，可通过使用 word-break 属性，使浏览器实现在任意位置的换行。

normal     使用浏览器默认的换行规则。（默认值）

break-all允许在单词内换行。

keep-all只能在半角空格或连字符处换行。

继承性：yes

版本：CSS3

JavaScript 语法：object.style.wordBreak="keep-all"

比如在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

相關 软件应用