浅谈盒模型

1.width,height

指定的是content-box的box

百分数相对于父容器的content-box的width

只有当父容器的height不依赖该元素时，百分比height才生效

 

2.margin重叠

相邻的2个盒子，相邻方向的2个margin值相同会合并成一个，若一大一小，以大的为准

 

3.margin也可以为负值，表示2个盒子可重叠的距离

 

4.box-sizing(>=IE8)

取值：border-box,content-box

初始化：content-box,一般默认都是content-box

应用：一般在百分比布局时，可用border-box，比较好控制

box-sizing:inherit;继承

若想让页面中的所有元素都继承box-sizing属性 

可设置*{

box-sizing:inherit;

}

html{

box-sizing:border-box;

}

 

5.min-width,max-width

可以让文字内容自适应显示，或响应式布局

min-height,max-height

min-height使用场景：当一个页面刚进入时列表中无内容，但后续向列表中动态的增加内容时，可用min-height限制其min-height

 

6.overflow(x,y方向)

取值：visible,hidden,scroll,auto

默认:visible

 

7.margin,padding

margin:行级盒子的margin-top和margin-bottom不会有效果

padding:行级盒子的padding-top和padding-bottom不影响行布局

 

8.块级盒子中的子盒子的生成

块级盒子可以包含多个子块级盒子

也可以包含多个行级盒子

不在行级元素里的文字，会生成匿名的行级盒子

块级盒子中若同时包含块级和行级盒子，块和行级盒子不会在一行显示，浏览器会生成匿名块级盒子来包含行级盒子

 

9.行级盒子内子盒子生成

行级盒子可包含行级盒子

行级盒子包含块级盒子时，会被块级盒子拆分成2个行级盒子，这2个盒子又分别被匿名块级盒子包含

 

10.块级和行级不能并列

11.display

inline-block：生成行级盒子，为其内容生成块级盒子

 

12.generated content

在css中控制它多产生一个盒子去装内容

控制元素：

:before,:after

content

eg:

<a href="http://example.com">访问链接</a>

<style>

a:before{//意为：在a盒子里最前面再产生一个盒子放其content

content:"\2693"

}

a:after{//意为：在a盒子里最后面再产生一个盒子放其content

content:"（‘attr(href)’）"

}

</style>

效果：小图标访问链接（http://example.com）