CSS盒子模型与定位

盒子模型与定位

元素简单分三大类:块级元素,内联元素(行级),内联块级元素

块级元素:元素宽度在不设置的情况下，是它本身父容器的100%
常见的块级元素有:< div>,< p>,< h1>~< h6>,< ul>,< ol>,< dl>,< table>,等等

常见内联元素有:< span>,< a>

常见的内联块级元素有:< img>

盒子模型(所有html元素都可以看做盒子)

margin+border+padding+content=盒子

盒子的两种类型

• box-sizing:content-box(默认的):元素的width=content宽度
• box-sizing:border-box:元素的width=content+border+padding

对于行级元素,margin上下无效

建议优先级:width>padding>margin