html的标签位置属性（学习笔记）

div：定义位置有两种方式：一种是使用相对位置，一是使用绝对位置。

绝对定位有两个属性：left和top，分别是距离网页左边和网页顶部的绝对位置。借助style属性，按照如下的格式进行设置：

style = "position:absolute;left:距离左边距离;top:距离顶部距离"

例如：

<div name = "mydiv" id="mydiv" style="position:absolute;left:200px;top:200px">
JavaScript
</div>

相对定位同样也是两个属性：left top

style="position:relative;left:距离左边距离;top：距离顶部距离"

除了定义位置，还能够定义尺寸大小，定义尺寸大小需要用到width和height属性，格式如下：

style="width:宽度;height:高度"

例如：

 <div style="position:relative;left:200px;top:100px;width:400px;height:50px">
         div 层
</div>

例如：

如何让div居中：

div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

注意：margin: 0 auto； 就是上下距离为0， auto就是左右自适应两边距离一样

margin:auto；效果就是左右自适应两边距离一样，效果是一样的 ,水平居中

例如：

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

HTML样式实例 - 背景颜色

---

背景色属性（background-color）是使用 bgcolor 属性定义。

---

HTML 样式实例 - 字体, 字体颜色 ，字体大小

---

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

---

HTML 样式实例 - 文本对齐方式

---

文本对齐属性 text-align取代了旧标签 <center> 。

<p style="text-align:center;">123</p>

---

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing