css盒模型

---------标签元素显示方式:

display: none / block / inline /inline-block /table/flex;

隐藏 / 块级/ 行内 / 行内块元素 / 表格排列 / 弹性模型

---------模型设置

box-sizing: border-box/ content-box;

padding向内盒模型 pdding向外盒模型

---------内边距

padding: 0 - 99999px / 0 – 100%px / em / rem; 全选边距

padding-top/right/bottom/left:; 单选边距

padding: 上px  右px  下px  左px; 四值表示位置

padding: 上px  右左px  下px; 三值表示位置

padding: 上下px  右左px; 二值表示位置

---------外边距

margin: 0 - 99999px / 0 – 100%px / em / rem; 全选边距

margin-top/right/bottom/left:; 单选边距

margin: 上px  右px  下px  左px; 四值表示位置

maigin: 上px  右左px  下px; 三值表示位置

margin: 上下px  右左px; 二值表示位置

 

-----边距重合-----

 

1.元素嵌套时父元素未设置边框，会与子元素边框重合。当子元素设置外边距时, margin失效,子元素不能与父元素分开,父元素会移位。

2.元素垂直排列时,下边距距离为元素外边距设置的绝对值最大者,外边距不会相加,padding相加。

解决方法:

1.设置父元素边框

2.父元素设置内边距padding

3.父元素添加overflow:hidden样式

 

-----元素特性-----

 

块元素,行内块元素

--可设置--

宽width

高height

背景background:color;

外边距margin-top/right/bottom/left;

内边距padding-top/right/bottom/left;

定位position:relative/absolute/fixed;

浮动float:left/right;

--转换--

display:inline; 转换为行内元素

display:inline-block; 转换为行内块元素

 

行内元素

--可设置—

背景background:color;

外边距-左右margin-left/right;

内边距-左右padding-left/right;  上下可以设置有背景色,不占位置

定位position:relative/absolute/fixed;

浮动float:left/right;

--转换--

display:block; 转换为块元素

display:inline-block; 转换为行内块元素

float:left/right; 宽高,内外边距可设置

position:absolute; 宽高,内外边距可设置