*自适应布局

宽度自适应： display:inline-block;

 .market_b{width: 1000px;height: 300px;border:1px solid #ccc;font-size:0;text-align:center;}
 .market_b0{display:inline-block;width: 210px;height: 300px;background: red;margin-right:39px;}
 .last{margin-right:0;}
 <body>
    <div class="market_b">
        <div class="market_b0"></div>
        <div class="market_b0"></div>
        <div class="market_b0"></div>
        <div class="market_b0 last"></div>
    </div>
</body>

一、宽高自适应

（一）宽度自适应
当块级元素的宽度设置成100%，或者不设置，宽度默认都是占父级元素的100%。
经验：当父元素脱离了标准流，可以由子元素撑开它的宽度。

1.自适应布局

元素的宽高自适应窗口或者子元素的大小，从而实现同一套页面适应不同的窗口、分辨率及设备。（！！！）
2.响应式布局（一般都是用于较为简单的页面）
响应不同的屏幕大小或者设备大小，对同一套页面的部分布局进行修改，但大体保持一致。

二、父元素的高度由子元素撑开（高度自适应）

1. 最小高度 min-height

* 当内容高度小于最小高度，按最小高度显示；
* 当内容高度大于最小高度，按内容高度显示。
应用场景：内容不确定，无法较好地控制父元素高度

盒模型

1.盒模型=内容content+内填充padding+边框border+外间距margin
2.width、height 不是指盒子的大小，而是内容contnt的大小
做页面的时候，一开始测量的是盒子的大小，但我们会直接设置成width、height。若之后才发现需要

添加padding、border,盒子会被撑大。为了保证盒子大小不变，width、height需要减去对应的值.

盒子在浏览器可视区域居中

1.定位

{position:fixd;left:50%;top:50%; margin-left,top: - 自身高度宽度一半}

2.利用行内元素中线对齐

三个条件：

1：必须给容器（父元素）加上text-align:center;

2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;

3：在当前元素的后面（没有回车）加上同级元素span;并对span进行,或者加个div（尺子）

{vertical-align:middle;width:0;height:100%;display:inline-block}

高度塌陷

高度塌陷:当子元素都浮动了，父元素会没有子元素撑开高度。
解决办法：
（1）给父元素加overflow:hidden; 缺点:若存在内容溢出，会被裁剪掉。
（2）给父元素添加最后一个子元素（块级){height:0;clear:both;overflow:hidden;} 缺点：会产生很多多余的标签
（3）伪元素清除法，

.clearfix::after{
            content:"";
            display:block;
            height:0;
            clear:both;
            overflow:hidden;
            visibility: hidden;
	}

一般我们用的时候,我们只需要将类名.clearfix添加到父元素上即可

margin塌陷：

父元素与第一个子元素存在上间距，若给第一个子元素加margin-top，会错误地渲染成父元素的margin-top。
解决办法：
（1）子元素或者父元素浮动
（2）给父元素加overflow:hidden;
（3）给父元素加border-top
（4）将子元素的margin-top当作父元素的padding-top