怪异的盒子模型

盒子尺寸:

box-sizing设置盒子属性值

box-sizing:content-box 默认值(内容盒子)

如下:

 

页面显示:

由此可见,盒子设置的200*200是盒子的储物空间,盒子实际一边的大小为200+padding的30+border的40+margin的20组成,也就是290*290.

box-sizing:border-box 边框盒子

如下:

 

由此可见,盒子设置的200*200是盒子包含边框内的盒子全部尺寸,也就是去除margin外总的尺寸为200*200.

display

块级元素:独占一行,可以识别宽高属性.

一个块级元素的实际宽度=width+left/right+padding-left/right+margin-left/right

margin-right默认值是auto,

通过display属性可以设置标签的显示方式,inline表示行内元素,block表示块级元素,none表示不显示

inline-block表示行内块元素,既有块元素可以识别的宽高特点又有行内元素在一行显示的特点.

块级元素与行内元素的转变

            display:inline;元素会被显示为行内元素

两个块元素同行显示必须两个都设置display: inline-block;

         两个div之间会产生空隙,原因是标签之间的空白区域引起的

例如;