这是我参与「第四届青训营 」笔记创作活动的第6天
Background-color:rgba(255,0,0,0.5)
此处rgb代表三色，a代表透明度（0-1）
Background-image：默认平铺效果（如果设置表格面积较大，用多张复制图来平铺覆盖）
Repeat默认平铺 repeat-x在x轴上平铺no-repeat不平铺
background-image:url(img/1.jpg);background-repeat:no-repeat;}
不同的表示方法：background-position:20px 20px;10% 10%（长和高的比例）; left/center/right top/center/bottom
背景图片大小：
1、400px 400px（调数据）；
2、100% 100%（完美覆盖背景大小，但放大影响比例和像素）；
3、cover把背景图像扩展至足够大足以覆盖背景区域（等比例放大，部分图片可能截出背景无法显示）
4、contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（如果铺不满盒子就留白）
背景图片固定：background-attachment:scroll（正常滚动）fixed（不因滚动而变化）
固定后就相对整个浏览器的窗口（即使背景区域移除图片也依然在原位置但是无法显示（没有背景区域））
背景的复合属性
用空格隔开；顺序可以改变；可以取一个值，放在后面能覆盖前面的值（此处如果有一个值没有写，就会默认空白，即使之前有写，现在也会变成空白，所以空白属性每个值都要写）；background-size属性只能单独用
<style>div{width:600px;
height:600px;
background: yellow url(123.jpg) no-repeat center fixed;}
</style>
三个元素（div）并排显示：全部float:left
解决高度塌陷：
1、写固定高度
.container{height:200px;height:200px}
2、清除浮动（添加在浮动下的元素上）.box{width:300px;
height:300px;background-color: red;clear:left}
3、在当前浮动元素后补一个盒子，不设置宽高，只设置clear:both\
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear:left"></div>
</div>
<div class="box"></div>
</body>
4、Overflow:hidden（bfc，让浮动元素计算高度
盒子模型\
div{width:500px;height:300px;background:yellow;text-align:justify;
padding:20px 30px;}
/* padding：内边距 */
内边距：
1、1个值，4个方向相同
2、2个值，上下 左右
3、3个值，上 左右 下
4、4个值，上 右 下 左（顺时针）
特点：背景色蔓延到内边距；可设置单一方向
Padding-方向：top bottom left right
e-g: padding-lift:10px
padding不支持负边距
边框：
.box1{width:100px;height:100px;background:red;
border:10px solid red;}
样式：solid实线double双实线 dashed线段线dotted点状线
背景色也能蔓延到边框
Border-top：上边框 bottom left right
Border-width/border-style(solid)/border-color
外边距：margin（类似padding）
Margin支持负边距，无背景色蔓延；*{margin:0}；margin:0 auto屏幕居中
特性问题：
1、 兄弟关系：两个盒子垂直外边距与水平外边距问题（垂直方向外边距取最大值；水平方向两值相加取合并值）
div{width:50px;height:50px;}
.box1{background:red;margin-bottom:100px;}
.box2{background:yellow;margin-top:50px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
2、父子关系：盒子包盒子（嵌套关系）
F1：子margin-top=====》父padding-top，注意高度计算（减去子大小）
F2：给父盒子设置边框，注意减去边框宽度
F3：添加浮动（任意一个）
.box1{width:500px;
height:500px;
background:yellow;
float:left;}
/* border:1px solid transparent} */
.box2{width:200px;
height:200px;
background:red;
margin-top:10px;
float:left;}
F4：overflow:hidden (BFC)
