盒模型的一些介绍

盒模型:

在html中每一个标签都有一个盒模型,和模型有以下内容组成

1. content(内容)
2. padding(内边距)
3. border (边框)
4. margin (外边距)

content: 

        用来承载当前标签中的内容,通过width和height两个属性来设置

padding: 

        控制当前标签内容与边框之间的间距,通过padding属性来设置

border: 

        控制当前标签的边框,通过属性border来设置

margin: 

        控制当前标签与相邻标签之间的间距,通过属性 margin来设置

padding margin 属性复合了以上四个属性;

padding: 20px ; 一个值代表:上下左右都是50px;

padding: 20px 20px; 两个值代表:上下 左右分别都是20px;

padding: 10px 20px 30px; 三个值代表;上 左右 下 分别是10px 20px 30px;

padding: 10px 20px 30px 40px; 四个值代表:上 右 下 左 分别是10px 20px 30px 40px;

border属性复合了以上三个属性:

其中border-width,border-style是边框比不可少的两个元素

border-color 默认为 黑色

如果各个边的边框不一致需要单独设置

边框样式:

•        solid 实线
•        dotted 点线
•        dashed 虚线
•        double 双实线

margin的两个坑:

      1, 上下排布的两个标签,上边元素的margin-bottom与下边元素的margin-top两者取最大关系,不会叠加.

      2, 父子嵌套的两个标签: 如果父元素没有边框,同时给子元素设置了垂直方向的margin,此时子元素的margin会传递给父级(父子共用margin)

最佳解决方案: 给父元素设置overflow:hidden; 属性

闲来无事,总结下...

转载于:https://juejin.im/post/5c8f4773f265da60f5610736