属性：

    width:内容的宽度

    height:内容的高度

    padding:内边距 内容到边框的距离

    border:边框

    margin:外边距  另一个边到另一个边的距离

盒模型的计算：

    总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height

    前提是：在标准文档流

            padding：父子之间调整位置

            margin: 兄弟之间调整位置	

padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

1.写小属性,分别设置不同方向的padding

*{

  padding:0;

  margin:0;

}

通用适配器

  -border

    三要素：线性的宽度 线性的样式 颜色

    border: 1px solid red;

                    silid实线  dotted点线  double双线  dashed虚线

    border-left: 1px solid red;

  -margin    

    前提必须是标准文档流下 

        margin的水平不会出现任何问题

        垂直方向上 margin会出现'塌陷问题'

前提必须是标准文档流下 

属性：

	block 块级标签

			- 独占一行

			- 可以设置宽高，如果不设置宽，默认是父盒子宽度的100%

	inline 行内标签

			- 在一行内显示

			- 不可以设置宽高，根据内容来显示宽高

	inline-block 行内块

			- 在一行内显示

			- 可以设置宽高

	none  不显示 隐藏 不在文档上占位置

   visibility：hidden;隐藏 在文档上占位置

1.浮动的元素会脱离标准文档流

2.浮动的元素互相贴靠

3.浮动的元素有"子围"效果

4.收缩的效果

    收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

四大特性

float:none;

	  left;左浮动

	  right;右浮动

浮动：脱离了标准文档流

作用好处：使元素实现并排（布局）

	在页面上占位置

浮动带来的问题：

	子盒子浮动，不在页面占位置，如果父盒子不设置高度，那么撑不起父盒子的高度，页面出现紊乱

清除浮动：

	1.给父盒子设置固定高度（后期不好维护）

	2.clear:both;

		给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)

		给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both

		问题：代码冗余

	3.   .clearfix:after {

			content: ".";

			display: block;

			height: 0;            1

			visibility: hidden;   2  有1，2清楚content添加的.

			clear: both

		}

		父盒子浮动和子盒子浮动没有关系，子盒子该浮动就浮动

	4.overflow:hidden;   超出部分默认可见（visible）

		超级：清除浮动  最牛逼的方法，以上三种都是渣渣

		补充：

			overflow：auto     超出部分出现左右滚动条

			overflow: scroll   超出部分出现上下滚动条

要浮动一起浮动，有浮动，清除浮动