# CSS界面布局控制属性概述

由 Qiongpan Ke 于 2024-11-30 最后修改
导出
Office格式
以PDF格式导出 以ODT格式导出 以RTF格式导出
其他格式

选择要导出的页面：

选择所有/ 无

Legend:
  已创建页面
  修改后的扩展页
  Clean Extension Page

以HTML格式导出

Contents

- 概念
  - 盒子模型
  - 文档流
  - CSS概念
- 盒子模型控制
  - 内容溢出控制
  - 盒子大小控制
  - 外边距控制
  - 内边距控制
  - 显示/隐藏

# 概念

## 盒子模型

如上图，从里到外依次是：

- content-box : 内容盒子，非IE浏览器box-sizing属性的默认值。
- padding-box : 内边距盒子。
- border-box : 边框盒子，IE浏览器box-sizing属性的默认值。
- margin-box : 外边距盒子，相邻元素间会共享外边距，通常以两者中最大外边距为实际距离。

## 文档流

一个Web页面是基于流来编排页面的，其包含如下几种元素：

- inline-level elements : 内联级（行内）元素。
- block-level elements : 块块元素。

相应地，对于容纳这些元素的上层盒子，可以看作有两条轴：

- inline axis : 行内轴，通常为水平轴，可使用 justify-items, justify-self, justify-content 属性对齐子元素，用 line-height 来指定行高。
- block axis : 块级轴，通常为垂直轴，可使用 align-items, align-self, align-content 属性来对齐子元素。

对于 flex 布局，可以通过修改 flex-direction 属性的默认值 row 为 column 来调换 inline axis 与 block axis 的实际朝向。

## CSS概念

- 层叠：对于同一个元素，会有多个样式设置来源，如浏览器默认样式、多个不同的class等；
- 继承：部份CSS样式属性可以继承自上层元素，需要查阅该属性的 Inherited 属性；
- 优先级：由于有CSS样式层叠，对于同一个样式属性会有应用的优先级，有时会用到 !important 来强制应用样式。

# 盒子模型控制

## 内容溢出控制

- overflow
- overflow-x
- overflow-y

## 盒子大小控制

- width
- height
- min-width
- min-height
- max-width
- max-height

注意：这里控制的盒子是基于box-sizing属性的，默认为content-box内容盒子。

## 外边距控制

- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin-trim

根据 writing-mode, directoin, text-orientation 等文本属性的设置，通过下面属性的设置，将会被映射为对应的 margin-top, margin-right, margin-bottom, margin-left ：

- margin-block-start
- margin-block-end
- margin-inline-start
- margin-inline-end

## 内边距控制

- padding
- padding-top
- padding-right
- padding-bottom
- padding-left

## 显示/隐藏

- visibility

0
标签：
由 Qiongpan Ke 在 2024-11-30 创建

- 附件 （1）
- 历史记录
- 信息

# 同级页面

# 博客类别

- https://www.keqiongpan.cn:80/bin/view/Blog/">全部

- News (0)
- Other (0)
- Personal (0)

# 当前已创建的

- 线性布局组件与占位组件
- React
- CSS Flexbox Cheat Sheet
- CSS界面布局控制属性概述
- CSS

粤公网安备 44011802000481号 粤ICP备2020117634号
版权所有，如发现盗用模仿必追诉法律责任！
CopyRight © 2020-2023 keqiongpan.cn. All Right Reserved.