unit6 盒子模型
1、盒子模型
网页居中对齐的必要条件:
1、块元素
2、固定宽度
1、边框：border
border简写：
同时设置边框的粗细、样式、颜色
border:1px solid #3a6587;
可以不按顺序设置：
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的
- 边框颜色：border-color属性
border-color:#eeff34：
四个边框为同一颜色
border-color:#369 #000：
上、下边框颜色：#369
左、右边框颜色：#000
border-color:#369 #000 #f00：
上边框颜色：#369
左、右边框颜色：#000
下边框颜色：#f00
border-color:#369 #000 #f00 #00f：
上、右、下、左边框颜色：
#369、#000、#f00、#00f
• border-top-color 属性
上边框颜色
• border-right-color属性
右边框颜色
• border-bottom-color属性
下边框颜色
• border-left-color属性
左边框颜色
- 边框粗细：border-width属性
• thin细
• medium正常
• thick加粗
• 像素值
- 边框样式：border-style属性
• none无边框
• hidden隐藏边框
• dotted点
• dashed虚线
• solid实线
• double双线
2、外边距：margin
网页居中对齐：
margin:0px auto;
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
3、内边距：padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding
4、元素的宽高及实际占位
盒子模型总尺寸=border+padding+margin+内容宽度
元素的实际占位（实际宽、高）
盒子高度 = height属性 + 上下填充高度 + 上下边 框高度
盒子宽度 = width属性 + 左右填充宽度+ 左右边框宽度
5、box-sizing
用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型
box-sizing：content-box （默认值，盒子的总尺寸）| border-box （盒子的宽度或高度等于元素内容的宽度或高度）| inherit（元素继承父元素的盒子模型模式）;
需要考虑浏览器的兼容性。
6、盒子模型的尺寸
- 内容宽度width：70px
- 内边距（padding）：5px
- 外边距（margin）：10px
7、盒子布局
- DIV+CSS布局
1、分析页面的分块结构，形成HTML组织结构
2、编写每个DIV块的CSS控制定位
- 盒子属性布局
2、圆角边框border-radius
border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列：