> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/css/01-zha-ge-xi-tong-bu-ju.md).

# CSS布局

每次谈到网页设计，最让我头疼的就是调页面的布局，页面的长宽高了；现在系统的学习和尝试把每个代码都完整的type一下，增加对页面布局的理解

参考 [http://houdunren.gitee.io/note/css/5%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B](http://houdunren.gitee.io/note/css/5%20盒子模型.html#盒子模型)

## 盒子模型

![](https://43423.oss-cn-beijing.aliyuncs.com/img/20191009234634.png)

```markup
<style lang="">
main{
  width: 500px;
  height: 500px;
  margin:20px auto;
  border: solid 1px red;
}
h1{
  width: 300px;
  height: 300px;
  border: solid 1px green;
  text-align: center;
  margin: 10px auto;
}
</style>
<body>
<main>
  <h1>盒子模型</h1>
</main>
</body>
```

* `margin:20px auto`在元素指定宽高时，内部子元素会水平居中
* `margin: 50px 80px 100px 150px;`此时按照上、右、下、左定义外边距
* `margin:10px 10px`按照上下、左右定义

当两个相邻的元素的外边距会合并，例如再往下接一个h1标签时，两个相邻h1之间的外边距为10px；而不是10px+10px；

### box-size

```css
//这种模式下，padding与边框也算进了width和height属性里
box-sizing:border-box;
//width属性不包括padding
box-sizing:content-box;
```

* 定义border-style

  `border-style: outset solid dotted double;`可以分别定义样式、宽度、和颜色

  * style
  * color
  * width

  | 类型     | 描述                                      |
  | ------ | --------------------------------------- |
  | none   | 定义无边框。                                  |
  | dotted | 定义点状边框。在大多数浏览器中呈现为实线。                   |
  | dashed | 定义虚线。在大多数浏览器中呈现为实线。                     |
  | solid  | 定义实线。                                   |
  | double | 定义双线。双线的宽度等于 border-width 的值。           |
  | groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。      |
  | ridge  | 定义 3D 垄状边框。其效果取决于 border-color 的值。      |
  | inset  | 定义 3D inset 边框。其效果取决于 border-color 的值。  |
  | outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
* 圆角边框 border-radius

  `border-top-left-radius: 10%;`只有左上角为弧形

  `border-radius: 50%;`绘制圆

### 显示与隐藏display

| 选项           | 说明             |
| ------------ | -------------- |
| none         | 隐藏元素           |
| block        | 显示为块元素         |
| inline       | 显示为行元素，不能设置宽/高 |
| inline-block | 行级块元素，允许设置宽/高f |

### 溢出控制overflow

| 选项     | 说明                         |
| ------ | -------------------------- |
| hidden | 溢出内容隐藏                     |
| scroll | 显示滚动条（有些浏览器会一直显示，有些在滚动时显示） |
| auto   | 根据内容自动处理滚动条                |

### 元素尺寸设定

| 选项             | 说明              |
| -------------- | --------------- |
| width          | 宽度              |
| height         | 高度              |
| min-width      | 最小宽度            |
| min-height     | 最小高度            |
| max-width      | 最大宽度            |
| max-height     | 最大高度            |
| fill-available | 撑满可用的空间         |
| fit-content    | 根据内容适应尺寸        |
| min-content    | 将容器尺寸按最小元素宽度设置  |
| max-content    | 容器尺寸按子元素最大宽度设置。 |