盒子模型

盒子的内部结构

四个部分：
content(内容):文字图片等
padding(内边距)：只有宽度属性
border（边界)：有大小和颜色属性
margin(外边距)：只有距离属性



1、边框：



border-style:边框类型：



属性值的使用形式：
1、所有边框使用同一样式：
border:2px red solid;
2、对不同边框设置不同属性
border-color:red blue;/*上下 左右*/
border-width:2px 3px 4px;/*上 左右  下*/
border-style:dotted dashed solid double;  /*上右下左的顺序设置边框样式*/
3、为某一边设置不同值
border:1px red solid;
border-top:2px bule dotted;/*覆盖第一行设置的上边框的样式*/
4、为不同的边框设置不同的样式
border-top,border-right,border-bottom,border-left
分别设置：
例：
border-left-style:dotted;
border-left-color:#ff0000;
border-left-width:3px;

边框与背景的差别：
ie  :边框不显示背景颜色
firefox;边框也能被背景填充

border-witdh:边框宽度：
border-color:边框颜色；

设置圆角
border-radius: 11px;

2、内边距：

1、1个属性值 ：上下左右4个padding的宽度都是该值
2、2个属性值 ：上下是第一个值  左右是第二个值
3、3个属性值 ： 上是第一个值  左右是第二个  下是第三个
4、4个属性值 ： 按照 上右下左顺序依次设置属性值
也可以通过padding-top、padding-right、padding-bottom、padding-left分别设置

3、外边距：
1、1个属性值 ：上下左右4个margin的宽度都是该值
2、2个属性值 ：上下是第一个值  左右是第二个值
3、3个属性值 ： 上是第一个值  左右是第二个  下是第三个
4、4个属性值 ： 按照 上右下左顺序依次设置属性值
也可以通过margin-top、margin-right、margin-bottom、margin-left分别设置

定位：
盒子在标准流中的定位：
块元素：在没有css样式的情况下回再起一行顺序排列下去，能够容纳段落、表格、图片、标题等
块元素间的竖直margin等于：margin-bottom与margin-top中较大的那个数的数值（即：塌陷现象）
行元素：只能保护文字或者其他行元素的元素
行元素之间的水平margin等于：第一个元素的margin-right加上第二个元素的margin-left
嵌套盒子直接的margin等于：父盒子的pading加上子盒子的margin

浮动定位：

添加浮动定位：
.box1{

float:left;/*设置box1向左浮动*/

}
清除浮动定位：
p{

clear:right;/*清除向右浮动，如果要清除所有可以填both*/
}

最常用清除浮动的方式：

.clear:after{
display: block;
clear:both;
content:".";/*用于添加尾元素*/
visibility: hidden;;/*隐藏尾元素*/
height:0;
}
.clear{
zoom:“1”;/*关于ie的，为了浏览器兼容*/
}

盒子定位：
通过position属性规定元素的定位类型
例：
h2{

position:absolute; left:100px;top:100px}/*设置h2绝对定位*/
}
1、static定位
元素框正常生成。
标准流下的定位
2、relative定位（相对定位）
相对于元素原来的位置而言
例：
h2.pos_left{

position:relative;left:-20px /*设置相对向左偏移20px*/
}
3、absolute定位（绝对定位）
z-index属性用于设置显示的优先级
相对于他有position属性的父级元素进行定位
.box{

position:absolite;top:10px;right:10px;
}
4、fixed(固定定位）
与绝对定位类似，定位的参考是浏览器的窗口或者其他显示设备的窗口

例：
样式：
<style type="text/css">

div{

width:200px;

height:200px;

background:green;

position: relative;  /*设置为相对布局*/

}

div #d1{

background: red;

width:50px;

height:50px;

position:absolute;

bottom:0;

right: 0;

z-index: 2;/*改变叠层顺序*/

}

div #d2{

background: blue;

width:50px;

height:50px;

position:absolute;

bottom:25px;

right:25px;

}

</style>
使用：
<div>

<div id="d1"></div>

<div id="d2"></div>

</div>
效果：



注：关键点是要给父组件定义定位方式