盒模型
一 概念
# 盒模型
## 一、盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
###### v_hint：content = width x height
## 二、盒模型成员介绍
#### 1、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
#### 2、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员：border-left、border-right、border-top、border-bottom
- border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
| 风格 | 解释 |
| :----: | :--------: |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
| double | 双实线 |
| groove | 槽状线 |
| ridge | 脊线 |
| inset | 内嵌效果线 |
| outset | 外凸效果线 |
###### v_hint：border满足整体设置语法，eg：border: 1px solid red;
#### 3、padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值得个数 | 方位 |
| :------: | :------------------: |
| 1 | 上下左右 |
| 2 | 上下 \| 左右 |
| 3 | 上 \| 左右 \| 下 |
| 4 | 上 \| 右 \| 下 \| 左 |
#### 4、margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 | 方位 |
| :------: | :------------------: |
| 1 | 上下左右 |
| 2 | 上下 \| 左右 |
| 3 | 上 \| 左右 \| 下 |
| 4 | 上 \| 右 \| 下 \| 左 |
## 三、边界圆角
#### border-radius
- border-radius成员
| 成员 | 解释 |
| :------------------------: | :-------: |
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
- 单方位设置
| 赋值个数(值类型：长度 \| 百分比) | 解释 |
| :------------------------------: | :------: |
| 1 | 横纵 |
| 2 | 横 \| 纵 |
- 按角整体设置
| 赋值个数(值类型：长度 \| 百分比) | 解释 |
| :--: | :--: |
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 \| 右上 左下 |
| 3 | 左上 \| 右上 左下 \| 右下 |
| 4 | 左上 \| 右上 \| 右下 \| 左下 |
- 分向整体设置
| 格式 | 解释 |
| :---: | :----------: |
| 1 / 1 | 横向 \| 纵向 |
## 四、其他相关属性
- max|min-width|height
- overflow
| 值 | 描述 |
| :-----: | :------------------------------------------------------- |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- display
| 值 | 描述 |
| :----------: | :----: |
| inline | 内联 |
| block | 块级 |
| inline-block | 内联块 |
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box {
margin: 10px;
border: solid;
padding: 10px;
width: 100px;
height: 100px;
/*background-color: orange;*/
/*覆盖*/
background: red;
}
/*组成:margin + border + padding + content*/
/*content = width * height*/
/*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/
/*2.margin/padding外边距/内边距控制布局*/
/*3.border控制边框*/
/*4.content控制内容*/
/*padding*/
/*与content共有背景颜色*/
/*content*/
/*内容显示区域*/
/*红色区域 120 * 120 */
/*content区域 100 * 100 => 内容显示区域*/
/*值设置*/
.box {
/*控制四个方位*/
/*margin: 20px;
padding: 30px;*/
/*上下 左右*/
/*margin: 10px 20px;
padding: 30px 40px;*/
/*上 左右 下*/
/*margin: 10px 20px 30px;
padding: 30px 40px 50px;*/
/*上 右 下 左*/
margin: 10px 20px 30px 40px;
padding: 30px 40px 50px 40px;
/*总结*/
/*1.规定起始 2.顺时针 3.不足找对面*/
}
/*边框: 宽度,颜色,样式*/
.box {
border-width: 10px;
/*transparent透明,会透出背景颜色*/
/*border-color: transparent;*/
border-color: #333;
/*solid solid dotted dotted outset inset double*/
border-style: double;
/*整体设置*/
border: 5px solid orange;
}
</style>
</head>
<body>
<div class="box">12345</div>
</body>
</html>
边界圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边界圆角</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*单角设置*/
.box {
/*一个固定值: 横纵*/
border-top-left-radius: 100px;
/*两个固定值:横 纵*/
border-top-left-radius: 100px 50px;
/*百分比赋值*/
border-top-left-radius: 100%;
}
/*整体赋值*/
.box {
/*不分方位(横纵)*/
/*左上为第一个角,顺时针,不足找对角*/
/*border-radius: 10px 100px 50px;*/
/*区分横纵*/
/*1./前控制横向,后控制纵向*/
/*2.横向又可以分为1,2,3,4个值,纵向毅然*/
border-radius: 10px 100px 50px / 50px;
/*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
/*所有最多可以赋值8个值*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
