标签：radius nbsp 设置 水平 outline 自动 image 问题 结构
margin 外边距：
1、只写一个值： 表示四周的外边距均为指定的值；
2、写两个值： 第一个数为上下外边距 第二个数为左右外边距；
3、写三个值： 分别表示上、右、下三个方向，左边默认等于右边；
4、写四个值： 表示上、右、下、左 四条边顺时针方向；
5、 margin:0 auto; 设置块级元素，在父容器中水平居中！！！！
例如：margin:0px auto;
padding 内边距：
设置方式，与margin完全相同；
注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div实际的宽高为多少！！！！！
例如：padding: 100px;
边框
1、设置边框需要三个属性： 宽度 样式 颜色 。原则上，三个属性缺一不可，顺序可以随便修改
2、可以使用top、right、bottom、left分别设置四个边
例如：border: 10px dotted #0000FF;
当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时下来。
[解决办法]
1、给父盒子添加一点padding-top； 不推荐使用，会导致父盒子结构多余1pxpadding；
2、给父盒子添加1px的border-top； 同样会导致1px的多余空间，不推荐使用；
3、给父盒子或者子盒子添加浮动； 可能会由于浮动，一定程度的影响页面的布局；
4、给父盒子添加overflow属性； 推荐使用的方式。
[border-radius 圆角]
1、border-radius可以接收8个属性值,分别表示：
X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)
eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
2、缩写形式：
只写X轴，Y轴将默认等于X轴；
四个角写不全，默认对角相等；
只写一个值，默认8个数均等；
eg: border-radius:50px 20px;
= border-radius:50px 20px 50px 20px;
= border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
3、当圆角弧度>=正方形边长一半，将会显示为圆形。
[border-image 图片边框]
1、border-image:一共可以放10个属性值：
① 图片的路径： url();
② 图片的切片宽度： 4个值，分别代表上、右、下、左四条边；
通过4条切线切割，可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸)，9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
注意： 写的时候，必须不能带px单位！！！！
③ 边框的宽度： 4个值，分别代表上、右、下、左四条边框的宽度；
注意： 写的时候，必须带px单位，与切片宽度用/分隔！！！
④ 边框的重复方式： stretch(拉伸)、round(铺满)、repeat(重复)
[round和repeat的区别]
round: 会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次；
repeat：会保持每条边的长度比例不变，可能导致四角处，无法显示一条完整的边；
2、 属性值写法： border-image: ① ②/③px ④;
3、 border-image在webkit内核的浏览器中，必须带-webkit-前缀。
[box-shadow 盒子阴影]
1、 6个属性值，空格分隔：
① x轴阴影距离(必选): 可正可负，正——右移，负——左移；
② y轴阴影距离(必选): 可正可负，正——下移，负——上移；
③ 阴影模糊半径(可选)： 只能为正，默认为0.数值越大，阴影越模糊；
④ 阴影扩展半径(可选)： 可正可负，默认为0.数值增大，阴影扩大；数值减小，阴影缩小；
⑤ 阴影颜色(可选)： 默认为黑色
⑥ 内外阴影(可选)： 默认为外阴影。 inset表示内阴影；
outline 外围线：
显示在border外面，并且不会占据空间。 可能会覆盖四周的内容。
例如： outline: 20px solid red;
【盒子模型的浮动】
1、标准流中的块级盒子，宽度将会自动伸展为100%；
而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开；
2、 当一个盒子浮动， 标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子，会盖在这个盒子的上方)
但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。(未浮动盒子中的内容，不会被浮动盒子盖住)
3、由于第二条的原因。
可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：left-清除左浮动影响， right-清除右浮动影响；
both-同时清除左右浮动影响 ，常选；
4、 父盒子没有指定高度。 如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。
如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；
[解决所有子盒子浮动，父盒子高度塌陷的问题]
① 给父盒子也添加浮动；
② 给父盒子添加overflow属性； 推荐使用！！！
③ 在父盒子最后，添加一个高度为0的空div。 给这个div添加clear: both;属性，清除掉浮动效果。
④ 可以将第三条的div，用伪对象选择器::after实现：
例如：#div4::after{
display: block;
content: "";
height: 0px;
clear: both;
}
[盒子模型分类]
1、 标准盒子(W3C盒子)： 我们设置的宽度和高度，仅仅包含content部分； 再添加padding或border，会导致盒子变大；
2、 IE盒子(怪异盒子)： 我们设置的宽度和高度，包含content+padding+border； 再添加padding或border，会压缩content区域，但盒子总大小不变；
[手动设置盒子类型]
box-sizing: border-box; 怪异盒子；
box-sizing: content-box; 标准盒子； 默认效果。
标签：radius nbsp 设置 水平 outline 自动 image 问题 结构
原文地址：http://www.cnblogs.com/rsj1/p/7442296.html
