4.17

 

1.内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

　　　　1、和其他元素都在一行上；

　　　　2、元素的高度、宽度、行高以及顶和底 边距都可设置。

2.盒子模型：盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
　　　　div{
　　　　border:2px solid red;
　　　　}
面是 border 代码的缩写形式，可以分开写：

　　　　div{
　　　　border-width:2px;
　　　　border-style:solid;
　　　　border-color:red;
　　　　}

 

3 .border-bottom:1px dotted #ccc;p 标签单独设置下边框，而其它三边都不设置边框样式。而且css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
当然，元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

　　　　div{padding:20px 10px 15px 30px;}

分开写就是：　　　　div{
　　　　　　　　　　　　padding-top:20px;
　　　　　　　　　　　　padding-right:10px;
　　　　　　　　　　　　padding-bottom:15px;
　　　　　　　　　　　　padding-left:30px;
　　　　　　　　　　　　}
注意：如果上下左右都填充为10px的话，就可以写为
　　　　　　　　div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：

　　　　　　　　div{padding:10px 20px;}

同理，它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

　　　　　　　　div{margin:20px 10px 15px 30px;}

注意：padding和margin的区别，padding在边框里，margin在边框外。