秦小

CSSMM4E 笔记 - 2.07 - Margins, Paddings, 和 Borders

发表于 | 分类于

Margin & Padding速记法

TRouBLe - Top Right Bottom Left

相碰的(Colliding) Margins

当一个元素的地步margin与另一元素的margin性触时，浏览器使用较大的那个margin.

负数margin消减空间

行内，块(Inline, Block)以及其他display设定

Top/Bottom Maring/Padding 对行内元素没有效果/影响.
使用 display: inline-block; 来调整这种行为.

1
2
3
{
  display: inline | block | line-block | none;
}

边框(border)

1
2
3
4
5
6
7
{
  border: 4px solid red;
  border-top: 4px solid red;
  border-width: 4px;
  border-style: solid | dashed | dotted | double | groove | inset | outset | ridge | none;
  border-color: red;
}

背影着色

1
2
3
{
  background-color: rgb(109,218,63);
}

创建圆角

1
2
3
4
5
6
7
8
9
10
{
  border-radius: TL TR BR BL;
  border-radius: 0 30px 10px 5px;
  border-radius: horizontal radius / vertical radius;
  border-radius: 40px/20px;
  border-radius: 40px 10px 20px 10px / 20px 30px 40px 20px;
  border-radius: percetage;
  border-radius: 20%; /* => radius = 20% * width or height. */
  border-radius: 2em;
}

投射阴影

1
2
3
4
5
6
7
.box {
  box-shadow: [inset] -left+right -top+bottom blur [spread] color, ...;
  box-shadow:         4px         6px         8px           rgba(0,0,0,.75);
  box-shadow:         -4px        -6px        8px  2px      rgba(0,0,0,.75),
                      8px         6px         12px          rgba(0,0,0,.5);
  box-shadow: inset   4px         6px         8px           rgba(0,0,0,.75);
}
  • inset: 表示让web broswer在box内部画阴影.
  • spread: 向4个方向(上下左右)延伸阴影.

Determing Height and Width

计算盒子的实际宽度和高度

Actual width = left boerder + left padding + width + right padding + right border
Actual height = top boerder + top padding + height + bottom padding + bottom border

box-sizing 重定义盒子的 width/height

1
2
3
{
  box-sizing: border-box | padding-box | content-box;
}

内容超出时的行为

1
2
3
{
  overflow: visible | scroll | auto | hidden;
}

宽高的最大最小值

1
2
3
4
body {
  max-width: 1200px;
  min-width: 760px;
}

浮动(flaot)元素

float属性移动元素到左边或者右边。
这个过程中，浮动元素下面的内容就会向上移动，
并且围绕在浮动元素周围。
浮动元素移动到容器元素(containing element)的左或右的边界上(edge).

1
2
3
{
  float: left | right | none;
}

背景边框和浮动 (Background, Borders, and Floats)

Floated元素下面的元素如果带有background/border的话, 这些元素的background/border会显示在Floated元素的下面.

  • 解决方案1: overflow: hidden; 添加到下面的上移的元素
  • 解决方案2: 向floated元素添加border, 使它的border和页面背景色相同, 且宽度合适.

停止浮动

clear属性指示一个元素不要围绕一个浮动元素.

1
2
3
.copyright {
  clear: left | right | both | none;
}