盒子模型

来源：互联网发布：华为手机淘宝网编辑：程序博客网时间：2024/05/16 06:40

盒子的内部结构

四个部分：
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>
效果：
注：关键点是要给父组件定义定位方式

0 0