WEB前端网页设计 HTML CSS 网页设计参数 - 【盒子模型】
目录
盒子模型border
样式style的取值：
padding
margin
盒子模型：“内容”-内边距-边框-外边距
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：
| width | 宽度 |
| height | 高度 |
| border | 边框 |
| padding | 内边距 |
| margin | 外边距 |
盒子模型border
表示盒子的边框
分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
每个边框包含三种样式：
- border-top-color、border-top-width、border-top-style
- border-right-color、border-right-width、border-right-style
- border-bottom-color、border-bottom-width、border-bottom-style
- border-left-color、border-left-width、border-left-style
样式style的取值：
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
| double | 双线 |
| inset | 内嵌的3D线 |
| outset | 外嵌的3D线 |
简写，三种方式：
| 按方向简写： | border-top、border-right、border-bottom、border-left |
| 书写顺序： | border-顺序：width style color |
| 按样式简写： | border-color、border-width、border-style |
| 书写顺序： | border-样式：top right bottom left |
必须按顺时针方向书写，同时可以缩写：
border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样
终级简写：
如果四个边框样式完全相同，border:width style color;
padding
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准
margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
居中对齐：
/* 元素的水平居中 */
/* 1.块级元素的水平居中 */
margin:0 auto;
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */
text-align:center;
/* 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;
盒子模型：“内容”-内边距-边框-外边距
每个盒子都有三个参数；以px为单位
| 容器标签 | <div></div> | |
| 边框 实心边框 | border border：solid | |
| 内边距 | padding | |
| 外边距 | margin | |
| 边框类型(虚线、实线) | border-style | 实线：border-style：solid； |
| 边框盒子长度(厚度) | border-width | 例如：border-width：10px 20px； #表示上下盒子厚度 一个值--->全部，两个值-->上下，三个值--->右，按上右下左的顺序； border-width：10px；#若只有一个值 则表示 上下左右都是10px |
| 边框盒子颜色 | border-color | |
| 浮动 类似对齐 (多个浮动在一起则水平排列) | float： | 左浮动-> float：left ； 右浮动->float：right； |
| 清除浮动 | clear： both | 例：clear：left #表示清除此网页的左浮动 清除所有浮动 |
| 将文字设置为正中间 | height、 line-height | 设置文字的左右居中--->text-align:center; 设置行高：line-height：100px； |