#前端学习笔记#day5 盒子模型
盒子模型 浮动
RGB调配颜色：
语法:RGB（红色，绿色，蓝色）
每一种颜色的范围在0-255(0%-100%)之间
布局：
文档流
网页是个多层结构，一层叠着一层，对于用户来说，只能看到最顶上一层。
这些层中，最底下一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列的
对我们元素来说有两种状态
在文档流中
不在文档流中
元素在文档流中有什么特点：
块元素：块元素会在页面中独占一行
默认宽度是父元素的全部(会把父元素撑满) 比如对body里的div元素加背景，颜色宽度会和body一样宽
默认高度被内容撑开（子元素）
行内元素：行内元素不会独占一行，只占自身的大小
行内元素在页面中左向右水平排列，如果一行中不能容纳下所有行内元素，则会进入第二行
盒模型、框模型（box model）
css将所有元素都设置成了一个矩形的盒子，将元素设置为矩形后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
内容区(content)
边框（border）
内边距（padding）
外边距（margin） 两个盒子的距离
solid表示实线
width+border-width的长度才是整个盒子的宽度
border-width有默认值，一般都是3个像素
border-width:10px 20px 30px 40px; 如果有四个值，则表示上 右 下 左
三个值：上 左右 下
两个值：上下 左右
border-top-width: 0;
border-xxx-width
xxx可以是top right bottom left
border-style 指定边框样式，默认值是none没有边框
solid表示实线
dotted 点状虚线
dashed 虚线
double 双线
boder简写属性，没有顺序要求地写出边框所有的相关样式(注意各元素之间没有逗号)
border: solid 50px red;
除了boder以外还有四个boder-xxx
boder-top
boder-right
boder-bottom
boder-left
盒子模型-内边距padding
一个盒子可见框的大小，内容区 内边距和边框共同决定
所以计算盒子大小时，要把三个部分相加
内容区和边框之间的距离
padding-top
padding-right
padding-left
padding-bottom
padding-top: 100px;
内边距设置会影响盒子大小(以上例子是盒子会变长)背景颜色会延到内边距上
(文字会在内容区，子元素会在内容区，子元素设置.inner{width: 100%;
height: 100%; }，则子元素会把内容区充满)
盒子模型-外边距margin
外边距不会影响和盒子的大小，但是会影响盒子的位置
margin-top 元素会向下移动
margin-left 元素会向右移动
margin-right 默认情况下不会产生效果
margin-bottom 设置正值，其下边的元素会向下移动
margin可以设置负值，设置负值会向反方向移动
margin简写属性
可以同时设置四个方向的外边距，和padding一样
元素在页面顺序是自左向右排列的，所以默认情况下，如果我们设置左和上外边距，会移动元素自身，而设置右和下会移动其他元素
水平方向布局
元素在父元素中水平方向的位置由以下几个属性共同决定
margin-left
margin-right
boder-left
boder-right
width
padding-right
padding-lef
可以设置成为auto的三个值：width magin-left margin-right
一个元素在其父元素中，水平布局要满足以下等式
margin-left+margin-right+boder-left+boder-right+width+padding-right+padding-left = 其父元素内容区的宽度（必须满足）
以上等式必须满足，如果相加结果不成立，则称为过度约束，等式会自动调整
调整情况：
如果七个值中没有为auto的情况，则浏览器会自动调整margin-right以使得等式满足