CSS盒子模型(Box Model):

盒子模型
元素的宽度 = width+leftpadding+rightpadding+leftborder+rightborder+leftmargin+rightmargin
元素的高度计算方法同上
块级元素(block)和行内(inline)元素:
默认情况下,块级元素会另起一行,并尽可能的充满整个容器。
行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间,只能包含数据和其他行内元素
级元素和行内元素的区别
块级元素:
1.会另起一行,
2.可以设置width,height,margin,padding,border属性
3.默认宽度是容器的100%
行内元素:
1.和其他元素在同一行内
2.高度和宽度就是内容的高度和宽度
3.可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
4.border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加
如何判断是block还是inline:看元素是否换行就行
inline-block
既有block的宽度高度特性,又有inline的同行特性