盒子模型和盒子样式

一、盒子模型

1、外边距（margin）

margin: auto; //auto只能给左右，横向居中，只能使用在块级元素
margin:20px; //上下左右都是20像素
margin:0px 10px; //上下0像素，左右10像素
margin:10px 2px 0px; //上10像素，左右2像素，下0像素，
margin:1px 2px 3px 4px ; //上1像素，右2像素，下3像素，左4像素
margin-top/bottom/left/right: ; //分开写法
**2、边框（border）**影响盒子大小
粗细：border-width （默认根据浏览器）
颜色：border-color （默认与字体颜色相同）

样式：border-style:   ; //（必须设置）

				属性值				效果
				solid				默认实线
				dotted				点线
				dashed            	虚线
				double				双实线
				groore				3D边框

复合写法：无顺序要求
3、内边距（padding）撑大盒子

padding: 2px;

ul 的 li 自带padding和margin
p自带padding
*{margin:0; padding:0 ;} //清除页面所有外边距和内边距
del标签是有删除线
4、外边距重合问题
1.兄弟关系：只有上下塌陷问题，两个标签是因为分别设置上下外边距
外边距重合：谁的外边距的大就显示谁
解决：只给一个外边距
2.父子关系：（只对于块级元素）
给父或者子其中一个边框
给父内边距
给父添加overflow:hidden//溢出隐藏 不会改变盒子大小

二、盒子样式

1、圆角边框

`border-radius:` 与margin同理/百分数针对宽度/半弧度：高的一半/圆：宽度的一半或50%

2、盒子阴影（默认为外部阴影）

box-shadow: 属性值 ; //多个阴影用“，”隔开

属性值				效果
h-shadow     		水平阴影位置（正数：往右）必须属性
v-shadow			垂直阴影位置 （正数：向下）必须属性
blur				模糊距离（默认为0像素），可以给rgb
spread				阴影尺寸（一般不给）
inset				将外部阴影改为内部阴影

阴影不占位置，不影响其他盒子排列
3、文字阴影

text-shadow: 属性值;

属性值
h-shadow  //必须
v-shadow //必须
blur
color

4、css3新盒子

box-sizing: content-box(传统计算盒子大小)
box-sizing:	border-box(自己设置盒子大小，不会撑大盒子);