CSS 盒子模型-KeepStudy

CSS 盒子模型

#### 弹性盒子模型属性(新)

| 属性 | 说明 | CSS |
|-----|-----|-----|
| flex | 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 | 3 |
| flex-grow | 设置或检索弹性盒的扩展比率。 | 3 |
| flex-shrink | 设置或检索弹性盒的收缩比率。 | 3 |
| flex-basis | 设置或检索弹性盒伸缩基准值。 | 3 |
| flex-flow | 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 | 3 |
| flex-direction | 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 | 3 |
| flex-wrap | 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 | 3 |
| align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。 | 3 |
| align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 | 3 |
| align-self | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。 | 3 |
| justify-content | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 | 3 |
| order | 设置或检索弹性盒模型对象的子元素出现的順序。 | 3 |

#### 弹性盒子模型属性(旧)

| 属性 | 说明 | CSS |
|-----|-----|-----|
| box-align | 指定如何对齐一个框的子元素 | 3 |
| box-direction | 指定在哪个方向，显示一个框的子元素 | 3 |
| box-flex | 指定一个框的子元素是否是灵活的或固定的大小 | 3 |
| box-flex-group | 指派灵活的元素到Flex组 | 3 |
| box-lines | 每当它在父框的空间运行时，是否指定将再上一个新的行列 | 3 |
| box-ordinal-group | 指定一个框的子元素的显示顺序 | 3 |
| box-orient | 指定一个框的子元素是否在水平或垂直方向应铺设 | 3 |
| box-pack | 指定横向盒在垂直框的水平位置和垂直位置 | 3 |

#### 盒子(Box) 属性
| 属性 | 描述 | CSS |
| ----- | ----- | ----- |
| overflow-x | 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 | 3 |
| overflow-y | 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 | 3 |
| overflow-style | 规定溢出元素的首选滚动方法。 | 3 |
| rotation | 围绕由 rotation-point 属性定义的点对元素进行旋转。 | 3 |
| rotation-point | 定义距离上左边框边缘的偏移点。 | 3 |

#### 内边距属性(padding)

| 属性 | 说明 | CSS |
|-----|-----|-----|
| padding | 在一个声明中设置所有填充属性 | 1 |
| padding-bottom | 设置元素的底填充 | 1 |
| padding-left | 设置元素的左填充 | 1 |
| padding-right | 设置元素的右填充 | 1 |
| padding-top | 设置元素的顶部填充 | 1 |

#### 外边距属性(Margin)

| 属性 | 说明 | CSS |
|-----|-----|-----|
| margin | 在一个声明中设置所有外边距属性 | 1 |
| margin-bottom | 设置元素的下外边距 | 1 |
| margin-left | 设置元素的左外边距 | 1 |
| margin-right | 设置元素的右外边距 | 1 |
| margin-top | 设置元素的上外边距 | 1 |

## 弹性盒子模型属性(新)
#### flex 属性
- flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
- flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
- 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
- 语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
- 属性值:
    - flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
    - flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
    - flex-basis：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
    - auto：与 1 1 auto 相同。
    - none：与 0 0 auto 相同。
    - initial：设置该属性为它的默认值，即为 0 1 auto。
    - inherit：从父元素继承该属性。

#### flex-grow 属性
- 语法：flex-grow: value
- 属性值
    - number：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### flex-basis 属性
- 语法：flex-basis: value
- 属性值
    - number：一个长度单位或者一个百分比，规定灵活项目的初始长度。
    - auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### flex-shrink 属性
- 语法：flex-shrink: value
- 属性值
    - number：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### flex-flow 属性
- flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
- 语法：flex-flow: flex-direction flex-wrap|initial|inherit;

#### flex-direction 属性
- 语法：flex-direction: value
- 属性值
    - row：默认值。灵活的项目将水平显示，正如一个行一样。
    - row-reverse：与 row 相同，但是以相反的顺序。
    - column：灵活的项目将垂直显示，正如一个列一样。
    - column-reverse：与 column 相同，但是以相反的顺序。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### flex-wrap 属性
- 语法：flex-wrap: value
- 属性值
    - nowrap：默认值。规定灵活的项目不拆行或不拆列。
    - wrap：规定灵活的项目在必要的时候拆行或拆列。
    - wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### align-content 属性
- 语法：align-content: value
- 属性值
    - stretch：默认值。项目被拉伸以适应容器。
    - center：项目位于容器的中心。
    - flex-start：项目位于容器的开头。
    - flex-end：项目位于容器的结尾。
    - space-between：项目位于各行之间留有空白的容器内。
    - space-around：项目位于各行之前、之间、之后都留有空白的容器内。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### align-items 属性
- 语法：align-items: value
- 属性值
    - stretch：默认，拉伸元件以适应容器。
    - center：中心元素在容器内。
    - flex-start：位置元素在容器的开头。
    - flex-end：位置元素在容器的末端。
    - baseline：位置元素在容器的基线。
    - initial：设置为默认值。
    - inherit：从其父元素继承此属性。

#### align-self 属性
- 语法：align-self: value
- 参数
    - auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
    - stretch：元素被拉伸以适应容器。
    - center：元素位于容器的中心。
    - flex-start：元素位于容器的开头。
    - flex-end：元素位于容器的结尾。
    - baseline：元素位于容器的基线上。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### justify-content 属性
- 语法：justify-content: value
- 属性值
    - flex-start：默认值。项目位于容器的开头。
    - flex-end：项目位于容器的结尾。
    - center：项目位于容器的中心。
    - space-between：项目位于各行之间留有空白的容器内。
    - space-around：项目位于各行之前、之间、之后都留有空白的容器内。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

#### order 属性
- 语法：order: value
- 属性值
    - number：默认值是 0。规定灵活项目的顺序。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。

## 弹性盒子模型属性(旧)

##### box-align属性
- 目前所有主流浏览器都不支持 box-align 属性。
- Internet Explorer 10 通过私有属性 -ms-flex-align 支持.
- Firefox通过私有属性- MOZ-box-align支持。
- Safari和Chrome通过私有属性-WebKit-box-align支持。
- 语法：box-align: start|end|center|baseline|stretch;
- 属性值
    - start：对于正常方向的boxes，每个子元素的顶部边缘放在沿box的顶部。反向箱，每个子元素的底边放在沿box的底部
    - end：对于正常方向的boxes，每个子元素的顶部边缘放在沿box的底部。反向箱，每个子元素的底边放在沿box的顶部
    - center：任何多余的空间被划分均匀，一半以上的子元素放在上面，剩下的子元素放在另一半
    - baseline：如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐
    - stretch：子元素拉伸以填充包含区块

##### box-direction属性
- 目前没有浏览器支持 box-direction 属性。
- Firefox 支持替代的 -moz-box-direction 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。
- 语法：box-direction: normal|reverse|inherit;
- 属性值
    - normal：以默认方向显示子元素。
    - reverse：以反方向显示子元素。
    - inherit：应该从子元素继承 box-direction 属性的值

##### box-flex属性
- 目前没有浏览器支持 box-flex 属性。
- Firefox 支持替代的 -moz-box-flex 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
- 语法：box-flex: value;
- 属性值
    - value：元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

##### box-flex-group属性
- 目前没有浏览器支持 box-flex-group 属性。
- 语法：box-flex-group: integer;

##### box-lines属性
- 目前没有浏览器支持 box-lines 属性。
- 语法：box-lines: single|multiple;
- 属性值
    - single：所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
    - multiple：允许框扩展为多行，以容纳其所有子元素。

##### box-ordinal-group属性
- 目前没有浏览器支持 box-ordinal-group 属性。
- Firefox 支持替代的 -moz-box-ordinal-group 属性。
- Safari 和 Chrome 支持替代的 -webkit-box-ordinal-group 属性。
- 语法：box-ordinal-group: integer;

##### box-orient属性
- 目前所有主流浏览器都不支持box-orient属性。
- Firefox通过私有属性- MOZ-box-orient支持。
- Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.
- 语法：box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
- 属性值：
    - horizontal：指定子元素在一个水平线上从左至右排列
    - vertical：从顶部向底部垂直布置子元素
    - inline-axis：子元素沿着内联坐标轴（映射到横向）
    - block-axis：子元素沿着块坐标轴（映射到垂直）
    - inherit：box-orient 属性的值应该从父元素继承

##### box-pack属性
- 目前主流浏览器都不支持box-pack属性。
- Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。
- Firefox通过私有属性- MOZ-box-pack支持。
- Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.
- 语法：box-pack: start|end|center|justify;
- 属性值
    - start：对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
    - end：对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
    - center：额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
    - justify：额外的空间平均分配给每个子元素

## 盒子(Box) 属性
#### overflow-x 、overflow-y 属性
- 属性值
    - visible：不裁剪内容，可能会显示在内容框之外。
    - hidden：裁剪内容 - 不提供滚动机制。
    - scroll：裁剪内容 - 提供滚动机制。
    - auto：如果溢出框，则应该提供滚动机制。
    - no-display：如果内容不适合内容框，则删除整个框。
    - no-content：如果内容不适合内容框，则隐藏整个内容。

#### overflow-style 属性
- 属性值
    - auto： 
    - scrollbar：为溢出元素添加滚动条。
    - panner： 
    - move：用户能够直接移动元素的内容。通常，用户能够用鼠标拖动内容。
    - marquee：内容自主移动，不需任何用户代理对其控制。

#### rotation 属性
- 目前没有浏览器支持 rotation 属性
- 语法：rotation: angle;
- 属性值
    - angle：元素旋转角度。可能的值：0deg 到 360deg。

#### rotation-point 属性
- JavaScript 语法：	object.style.rotationPoint="25% 25%"
- 语法：rotation-point: value;
- 属性值
    - left top
    - left center
    - left bottom
    - right top
    - right center
    - right bottom
    - center top
    - center center
    - center bottom
    - x% y%：百分比值，参考边框盒宽度和高度。

## 内边距属性(padding)
- padding属性
- padding-bottom属性
- padding-left属性
- padding-right属性
- padding-top属性

```html
上填充是 10px，右填充是 5px，下填充是 15px，左填充是 20px
padding:10px 5px 15px 20px;

上填充是 10px，右填充和左填充是 5px，下填充是 15px
padding:10px 5px 15px;

上填充和下填充是 10px，右填充和左填充是 5px
padding:10px 5px;

所有四个填充都是 10px
padding:10px;
```

## 外边距属性(Margin)
- margin属性
- margin-bottom属性
- margin-left属性
- margin-right属性
- margin-top属性

```html
上边距是 10px，右边距是 5px，下边距是 15px，左边距是 20px
margin:10px 5px 15px 20px;

上边距是 10px，右边距和左边距是 5px，下边距是 15px
margin:10px 5px 15px;

上边距和下边距是 10px，右边距和左边距是 5px
margin:10px 5px;

所有四个边距都是 10px
margin:10px;
```

顶部

CSS属性

目录

相关推荐