携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
页面布局主要三大核心，盒子模型，浮动，定位
网页布局过程
1.先准备好相关的网页元素，网页元素基本都是盒子B0X。
2.利用CSS设置好盒子样式
3.在盒子里添加内容
盒子模型组成
1.border:边框
2.content:内容
3.padding:内边距
4.margin:外边距，盒子与盒子之间的距离
盒子边框(border)
1.边框宽度(粗细):border-width(单位是px)
2.边框样式"border-style
3.边框颜色:border-color
常见的几种边框样式(border-style)
1.solid:实线边框
2.dashed:虚线边框
3.dotted:点线边框
缩写方式
border:1px solid blue // 无顺序
border-top:1px solid blue // 只设置上边框
边框具有层叠性，覆盖
表格的细线边框
可以设置table里的th，td
border-collapse属于控制浏览器绘制边框方式，控制相邻单元格边框
border-collapse:collapse // 意思是表示相邻边框合并在一起
边框会影响盒子的实际大小
如果盒子有200×200，但有10px边框,实际大小会改变
解决方法:
1.测量盒子大小时忽略边框
2.如果测量时包含边框，那么需要width/height减去边框宽度(如果两边都有边框，那么实际得减去两个边框带线大小)
内边距(padding)
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
padding符合属性
padding:3px: 1个值，代表上下左右都有3px内边距：
padding:3px 10px: 2个值，代表上下内边距是3px内边距是10像素：
padding:3px 10px 15px:3个值，代表上内边距3px，左右内边距10px，下内边距15px：
padding:3px 10px 15px 20px:4个值，上内边距3px，右10px，下15px，左20px，顺时针
内边距影响盒子实际大小
指定padding后，内容和边框之间有了距离
先前盒子已经有了宽度和高度，之后指定内边框，会撑大盒子
解决方法:
当盒子大小要和产品图设计大小一致，则用产品要求大小width/height减去多出来的内边距大小，是应在代码里展现出来的宽度高度像素大小
