CSS盒子模型的使用以及注意事项

一、css盒子模型元素及其方向如下图所示：

①边框和内容之间的距离内边距是padding，边框的距离是border，margin外边距，是两个盒子之间的距离。
②盒子的实际宽度，高度=content+padding+border+margin
③其中的border属性又可以分为：1.边框宽度：border-width，可以自定义，也可以用thin细，medium中，thick粗来表示。2.边框样式border-style，可以用dashed横线，dotted点，solid实线，double双实线等等来表示。我们有时候在使用边框来设置样式可能只需要一条线，比如我们只需要下方有一条线的时候，可以书写为border-bottom：width style color；这样来设置这条线的各种属性。
④：“*”作为样式的名字，对浏览器的默认字体字号，边距等多种属性进行清零，如下：

⑤padding,margin属性都可以设置成一个固定的值，后面的单位是px，或者是设置成一个百分比（参照物是外面的盒子）。
⑥一般一个div标签做出来的盒子会占据一行，可以通过设置浮动与定位来改变盒子的摆放位置，以此来布置样式。
⑦margin属性垂直方向上的合并：当两个盒子都有margin属性的时候，浏览器会把它进行合并，哪一个的margin值高则两个盒子之间的垂直距离就是这个（水平方向不会这样）。
⑧关于居中的设置：文字居中用text-align：center；其他的水平居中可以用：margin：0 auto；（上下自己设定，浏览器根据屏幕来自动设置水平居中的值）
⑧行内元素：a,img,input,span这样的都是行内元素，内容决定宽高与其他行内元素从左到右的排列，设置无效。
⑨块级元素：在标准流布局中占据一行，如div是典型的块级元素，可设置。