CSS盒子模型

Posted shadowplay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS盒子模型相关的知识,希望对你有一定的参考价值。

盒子模型

其实,css就三大模块:盒子模型、浮动、定位,其余的都是细节。这三大模块必须学得很精通。

网页布局的本质:把网页元素比如文字图片等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。

1.盒子的边框(border)   

语法:

border: border-width || border-style || border-color

border-width:边框的粗细

boder-style:样式,实线、虚线、点线等

简写:

border/border-top: 宽度 样式 颜色

2.内边距(padding)

内边距:边框与内容之间的距离

padding-top:

padding-right:

padding-bottom:

padding-left:

padding: 10px; 内容距离边框x,y分别10px

pading: 上 右 下 左 (顺时针)

注意:padding会使盒子变大

3.外边距(margin)

写法同内边距

4.让盒子居中对齐 

margin: 0 auto; /*上下是0 左右是auto*/

margin往哪边auto,哪边留空白。

写法2:

margin: auto

写法3:

margin-right: auto;
margin-left: auto;

只要是块级元素,并且有宽,保持左右auto就行。

5.外边距合并问题    

1)相邻元素垂直外边距合并:以大的为准。

2)嵌套元素垂直外边距的合并(外边距塌陷):

两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,

合并后的外边距为两者中的较大者。

解决方案:

1.可以为父元素的定义1px的上边框或者内边框(padding-top: 1px);

2.可以为父元素添加overflow:hidden.

注意:

1.盒子的宽度属性width和高度属性仅适用于(块级元素),对内联元素无效(img和input)除外。

2.如果一个盒子没有给定宽度/高度或者继承父元素的宽度/高度,则padding不会影响盒子的大小。

6.盒子布局稳定性

稳定性从大到小:width > padding  > margin

以上是关于CSS盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

CSS盒子模型

初学css盒子模型,对于盒子的使用不是很明白,请问这样的盒子布局怎么写?

css 盒子阴影片段

css,关于盒子模型

什么是css盒子模式(框模型)

请简述 css 盒子模型与css怪异盒模型