CSS盒子模型

Posted 2022-01-16 shadowplay

盒子模型

其实，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