CSS盒子元素

padding：设置内边距，控制内容与边框距离。

1.多值写法：单值全边，双值上下 / 左右，四值上右下左。

2.不可为负，支持 px、em、% 等单位。

3.影响元素总尺寸（标准盒模型下）。

margin:

1.支持与 padding 类似的多值简写和单边设置

2.可设负值，实现元素偏移或重叠效果

3.水平居中：margin: 0 auto（块级元素定宽时）

4.存在垂直方向 margin 折叠现象（垂直方向 margin 折叠指相邻元素的上下 margin 会合并，取较大值而非叠加）

清除内外边距：

*{

margin：0

padding：0

}

border：

1.border：设置边框，含宽度、样式、颜色三要素。

2.简写：border: 1px solid #000（宽度 样式 颜色）。

3.单边设置：border-top、border-right 等单独控制。

4.样式值：solid（实线）、dashed（虚线）dotted（点线）...。

5.可隐藏：border: none 或 border-width: 0。

圆角边框：

1.border-radius: 设置元素圆角，值可为px,%。

2.多值规则：单值全角，双值对角，四值顺时针上右下左。

3.单独设置：border-top-left-radius等单边圆角。

4.50%可将正方形变为圆型，椭圆形需对应宽高。

float：

1.float 取值：left（左浮动）、right（右浮动）、none（默认不浮动）。

2.特性：脱离文档流，元素向指定方向移动直到触边界。

3.影响：父元素高度塌陷，后续元素环绕浮动元素。

4.清除浮动方法：

4.1父元素加 overflow: hidden（触发 BFC）

4.2末尾加空元素设 clear: both

4.3父元素用::after 伪元素清除（推荐）

5.注意：浮动元素会转为块级元素，inline 元素可设宽高。

position:

1.tatic：默认值，元素在文档流中，无偏移和层级。

2.relative：相对自身偏移，不脱离文档流，保留原位置。

3.absolute：脱离文档流，相对最近定位祖先偏移。

4.fixed：脱离文档流，相对浏览器视口固定位置。

5.sticky：滚动时在指定位置变为固定，结合相对与固定。

6.配合 top/right/bottom/left 控制偏移，z-index 调层级。（子级）(z-index 属性指定元素的堆叠顺序（哪个元素应该放在前面，哪个元素应该放在后面,元素的堆叠顺序可以是正数或负数)

img {

position: absolute;

left: 0px; top: 0px;

z-index: -1;

}

display:

1.display: block：块级元素，独占一行，可设宽高。

2.display: inline：行内元素，同行显示，不可设宽高。

3.display: inline-block：行内块，同行显示且可设宽高。

4.display: none：隐藏元素，不占空间。

5.display: flex：启用弹性布局，父级设此值。

6.display: grid：启用网格布局，父级设此值。

7.作用：改变元素显示类型，控制布局方式。

块级元素：<div> <h1>-<h6> <p> <form> <header> <footer> <section>

行内元素：<span> <a> <img>

盒子阴影 box-shadow

1.作用：为元素添加阴影效果，可设内外阴影。

2.语法：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 inset。

3.水平 / 垂直偏移：必填，正值右 / 下，负值左 / 上。

4.模糊半径：值越大阴影越模糊，默认 0。

5.扩散半径：正值扩大阴影，负值缩小，可选。

6.nset：关键字，将外阴影改为内阴影，可选。

7.多重阴影：用逗号分隔多个阴影设置。

/* 1. 基本阴影 */

.box1 {

box-shadow: 5px 5px 10px #999; /* 水平偏移 垂直偏移 模糊半径 颜色 */

}

/* 2. 带扩散半径的阴影 */

.box2 {

box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.3); /* 增加扩散半径 */

}

/* 3. 内阴影 */

.box3 {

box-shadow: inset 2px 2px 5px #666; /* inset关键字表示内阴影 */

}

/* 4. 多重阴影 */

.box4 {

box-shadow: 0 0 5px #f00, /* 红色发光效果 */

3px 3px 8px #999; /* 灰色投影 */

}

/* 5. 零偏移量的发光效果 */

.box5 {

box-shadow: 0 0 10px 3px #0cf; /* 水平和垂直偏移都为0 */

}