外边距、内边距以及浮动相关

一、margin是外间距，可以设置一个容器外面的缝隙
1、简写
margin：20px； 上下左右
margin:20px 30px; 上下 左右
margin:20px 30px 40px; 上 左右 下
margin:20px 30px 40px 50px; 上右下左

2、单独设置
margin-top:20px; 外上间距
margin-bottom:20px; 外下间距
margin-left:20px; 外左间距
margin-right:20px; 外右间距
二、margin-top的传递问题
描述：在包含结构里面，如果给子元素添加了margin-top，正常情况应该是子元素自己下来
但是浏览器解析的时候，会把这个上间距传递给父元素，父元素也会下来
解决方法
1、给父元素添加overflow：hidden；（溢出隐藏）常用
2、给父元素添加上边框 border-top：2px solid（实线） transparent（透明色）；
3、给子元素或者父元素添加浮动 float
三、margin外间距重叠问题
描述：在并列结构中，如果给上一个盒子添加了margin-bottom，下面的盒子添加了margin-top之后，应该显示的间距结果是这2个间距之和，但是浏览器解析的时候，会显示2者中最大数值的间距，这个就是外间距重叠
解决方法：
给下面的盒子添加父元素，然后给父元素添加overflow：hidden；
以上的现象和解决原理都跟BFC有关系

margin的属性值可以给负数也可以用单词auto
text-align：center； 文本或者是默认横着排的标签都可以水平居中 例如 img span a等
margin：0 auto；也是居中 主要是实现默认竖着排列的标签水平居中 例如 div p ul li等
四、HTML默认外边距
HTML中很多标签自带外边距，而在实际项目开发过程中，往往不需要自带的样式，因此需要清除默认样式有两种方式
1.用群组选择器，实现同一组的标签样式统一化
例如：
body, p, h1, h2, h3, h4, h5, h6, ul,ol{ margin: 0; }
2.用通配符*{}

*{
margin: 0;
padding:0;
/* 当数值是0的时候，单位可以带可以不带 */
}

五、padding属性
padding是设置内间距 方式同margin
简写
padding：20px； 4周都是20像素的内间距
padding：20px 30px；20是上下内间距 30左右内间距
padding：20px 30px 40px；上间距是20 左右都是30 下是40
padding：20px 30px 40px 50px；上20右30下40左50
单独设置
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距

注意点：padding是添加在盒子大小之上的，所以会把盒子给撑大
假如，不想盒子被撑大，又想要通过padding来设置内间距
1、在原有设置的宽度或者高度上减去padding
2、在被撑大的盒子上添加 box-sizing：border-box； 设置为怪异盒子 属性是css3新增加的，所以兼容不太好
3、在被撑大的盒子宽度或者高度上使用calc（）函数{CSS3新增加的，兼容不好}
calc函数支持四则运算 注意点 + - 前后必须有空格
（方法3适合单位不统一的时候，使用，更多是用在响应式布局或者是移动端布局）

注：padding没有负数，也不支持auto书写，没有传递或者重叠问题
六、浮动
浮动，就是飘起来悬空的，所以一个盒子浮动了之后，该盒子悬空不占浏览器的位置，那么就会空出来一块空间，下面没有浮动的盒子会占据这个空间，即脱离文档流，下面的没有浮动的盒子内部的文字不会占据上面空出来的空间，整体的这个现象精细点叫做半脱离文档流

使用场景：让默认竖着排版的标签，横着过去
用法：
float：none； 默认值 不浮动
float：left；盒子向左边浮动
float：right； 盒子向右边浮动
多个盒子同时浮动的时候，会横着排列，如果都是左浮动，那么是从左边往右边排列
七、列表的相关属性
1、list-style-type：disc/circle/square/none; 定义列表符号的样式
2、list-style-image：url（）; 列表符号为图
可以定义列表符号为图片，但是图片的大小，位置不能修改，仅做了解
3、list-style-position：outside默认值/inside 定义列表符号的位置
仅做了解
以上3个可以简写 list-style： ；
list-style：none；重点记住
八、背景的相关属性
1、背景颜色 background-color
2、背景图 background-image:url();
特点：默认是平铺的，不占位，背景图的可见范围是由容器大小决定的
3、背景图平铺 background-repeat
默认值 background-repeat：repeat； 平铺
常用值 background-repeat：no-repeat； 不平铺
background-repeat：repeat-x； 水平平铺
background-repeat：repeat-y； 垂直平铺
4、背景图的位置
background-position：水平位置 垂直位置；
属性值用数字+单位
数字+px
数字+% 这里的百分比是剩余空间的百分之多少，或者可以理解成整体容器的百分之多少-当前背景图的百分之多少
例如，容器宽度是1000 背景图宽度是100
background-position:50% 0px;
这里的50%是 （1000-100）/50%=1000×50%-100×50%

属性值用单词
水平 left right center
垂直 top bottom center
在默认的时候，背景图的位置是相对于容器的,但是背景图固定之后，就相对于窗口了
5、背景图的依附
background-attachment：scroll；默认值 滚动
background-attachment：fixed；固定，固定是相对于窗口
简写可以用

background: red url(bg.png) no-repeat fixed;
/* 背景图固定之后，是相对于窗口来固定的，但是背景图的可视范围还是容器 */