简单说说padding和margin有啥区别?
Padding和margin都是CSS中用来设置元素周围空间的属性，但它们有不同的作用和效果。
Margin（外边距）是指元素周围的空间，它影响元素与其它元素之间的距离和位置关系。Margin可以为元素创建额外的空间，使元素与其它元素分离开来，或者将元素推到页面的边缘。Margin可以设置为正值或负值，正值会增加元素与其它元素之间的距离，负值会减少元素与其它元素之间的距离。
Padding（内边距）是指元素内部的空间，它影响元素内容与元素边缘之间的距离。Padding可以为元素创建额外的空间，使元素内容与元素边缘之间产生间距。Padding只能设置为正值，它不会影响元素与其它元素之间的距离，只会影响元素内部的空间。
总之，Margin和Padding都是用来设置元素周围空间的属性，但Margin影响元素与其它元素之间的距离和位置关系，而Padding影响元素内容与元素边缘之间的距离。
div如何快速实现居中
- 使用margin: auto实现水平居中
div {
width: 200px;
margin: 0 auto;
}
- 使用flexbox实现居中
.container {
display: flex;
justify-content: center;
align-items: center;
}
- 使用grid实现居中
.container {
display: grid;
place-items: center;
}
- 使用position和transform实现居中
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5.通过操作父元素和div来快速实现
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
}
div{
background-color: aquamarine;
height: 200px;
width: 200px;
margin: auto;
}
`
这里不得不继续说下margin的用法 margin用于控制元素的外边距，即元素与其它元素之间的距离。margin可以设置四个方向的外边距，分别是上、右、下、左。
语法如下：
margin: 上 右 下 左;
也可以分别设置上、右、下、左四个方向的外边距，语法如下：
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
其中，上、右、下、左外边距可以使用像素、百分比、em等单位进行设置。也可以使用auto表示自动计算外边距。
另外，还可以使用margin属性的缩写形式进行设置，如：
margin: 10px; // 上、右、下、左外边距都为10px
margin: 10px 20px; // 上下外边距为10px，左右外边距为20px
margin: 10px 20px 30px; // 上外边距为10px，左右外边距为20px，下外边距为30px
margin: 10px 20px 30px 40px; // 上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px
vm和百分比有啥区别
在HTML中，vm和百分比都是用来设置元素的尺寸的单位。但是它们有以下区别：
-
vm是相对于视口的宽度或高度的百分比。例如，1vm等于视口宽度的1%或视口高度的1%。而百分比是相对于父元素的宽度或高度的百分比。
-
当视口大小发生变化时，vm单位会相应地调整元素的大小。而百分比单位不会自动调整元素的大小。
-
在某些情况下，vm可能更适合用于响应式设计，因为它可以根据视口大小自动调整元素的大小。
-
百分比继承父元素,vm只根据设备分辨率变化,不受父元素影响
总之，vm和百分比都是用来设置元素的尺寸的单位，但它们的用法和特点有所不同。
行内元素与块级元素
行内元素（inline element）和块级元素（block-level element）是HTML中常见的两种元素类型。
- 行内元素
行内元素通常用于包含文本内容，比如链接、图片、强调文本等。它们只占据所需的宽度，不会独占一行，可以与其他行内元素并排显示。
常见的行内元素有：
- a
- span
- img
- strong
- em
- input
- button
- select
- label
- 块级元素
块级元素通常用于包含结构性内容，比如段落、标题、列表、表格等。它们会独占一行，可以设置宽度、高度、内边距、外边距等样式属性。
常见的块级元素有：
- div
- p
- h1~h6
- ul
- ol
- li
- table
- form
需要注意的是，HTML5中还有一种元素类型叫做“行内块元素”（inline-block element），它既具有行内元素的特点，又具有块级元素的特点，可以设置宽度、高度等样式属性，并可以与其他行内块元素并排显示。
常见的行内块元素有：
- button
- input[type="button"]
- input[type="checkbox"]
- input[type="radio"]
- input[type="file"]
- select
- textarea
html中如何显示比12px小的字
可以使用相对单位来显示比12px小的字，例如em、rem、%等。具体方法如下：
-
使用em单位：em是相对于父元素的字体大小来计算的，因此可以使用em来设置比12px小的字体大小。例如，如果父元素的字体大小为16px，则设置字体大小为0.75em即可显示12px以下的字体。
-
使用rem单位：rem是相对于根元素的字体大小来计算的，因此可以使用rem来设置比12px小的字体大小。例如，如果根元素的字体大小为16px，则设置字体大小为0.75rem即可显示12px以下的字体。
-
使用%单位：%是相对于父元素的字体大小来计算的，因此可以使用%来设置比12px小的字体大小。例如，如果父元素的字体大小为16px，则设置字体大小为75%即可显示12px以下的字体。
-
使用transform:scale(0.5)来实现
总之，可以根据具体情况选择合适的相对单位来设置字体大小，以达到显示比12px小的字体的效果。
