盒子模型

## 边框

　　属性   作用

　　　　border-width : 定义边框粗细, 单位是 px

　　　　border-style : 边框样式

　　　　　　solid : 实线边框

　　　　　　dashed : 虚线边框

　　　　　　dotted : 点线边框

　　　　border-color : 边框颜色

 

　　边框复合写法

　　　　border : 1px solid red ; 没有顺序

 

　　边框分开写法(上下左右边框)

　　　　border-top : 1px solid red ;

 

## 表格细线边框

　　相邻的边框合并在一起

　　border-collapse : collapse;

 

 

## 内边距 padding

　　* 盒子边框与内容的距离

　　padding-left , padding-right , padding-top , padding-bottom

 

　　padding 属性 复合写法

　　　　padding : 5px    1个值 代表上下左右都有5像素内边距

　　　　padding : 5px 10px   2个值 代表上下内边距5像素, 左右内边距是10像素

　　　　padding : 5px 10px 20px   3个值 代表上内边距 5像素 , 左右内边距20像素, 下内边距20像素

　　　　padding : 5px 10px 20px 30px   4个值 分别代表上右下左 顺时针

 

　　注意 当我们给盒子注定padding值后 发生两件事情

　　　　1. 内容和边框有了距离 , 添加了内边距

　　　　2. padding 影响了盒子实际大小

　　　　也就是说, 如果盒子已经有了宽度和高度, 此时再指定内边距, 会撑大盒子

 

## 外边距

　　margin

　　　　margin 简写方式与padding一样

 

　　外边距可以让块级盒子水平居中, 但必须满足以下两个条件

　　　　1. 盒子必须指定了宽度

　　　　2. 盒子左右的外边距都设置为auto

　　　　　　margin : 0 auto

　　清除内外边距

　　　　* {　　

　　　　　margin : 0; //清除内边距

　　　　padding : 0; //清楚外边距

　　　　　}

　　注意 : 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距, 但是转为块级和行内块元素就可以了

 

 

 

 

　　

 

标签：盒子,模型,边框,padding,内边,像素,border
来源： https://www.cnblogs.com/LZYBOK/p/16360275.html