1，img標籤放到div內部，底部留白，原因是什麼？怎麼解決？
baseline理解：
原因：img標籤爲行內塊元素，其默認的垂直對齊方式爲-baseline，而baseline並不是外層元素的正真的底部（在未設置font-size爲0時），而是高於底部的一條基線，所以，那一塊空白區域就由此而生。
解決辦法：
- 設置image 的垂直對齊方式爲： top, bottom, middle 等
- 設置image display:block; 消除vertical-align 影響
- 設置父級元素，font-size:0; 或者 line-height:0;(不推薦)
2,border-sizing的作用
爲了更好的確定盒子的寬高。
未設置birder-sizing的情況下，div的實際寬高（寬高+padding的距離+邊框=實際寬高）
設置borde-sizing的情況下，div的實際寬高 = 設置的寬高
3,圓角內凹怎麼實現？
思路：1，兩個並排的div，在第二個div內定義一個2倍寬高的名爲item，對item進行設置border-radius: 50%，在對其進行絕對定位。
實現：
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.box {
width: 50px;
height: 50px;
overflow: hidden;
background: #655;
text-align: center;
position: relative;
float: left;
}
.item {
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
position: absolute;
top: -50px;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
效果：
4，行內標籤和塊級標籤?
行內元素：<b>、<span>、<i><small>、<big>、<button>、<lable>、<select>、<textarea>等
塊級元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<div>、<p>、<address>、<acticle>、<ol>、<ul>、<output>、<form> 、<table>、<canvas>、<footer>等
行內塊：img，input