前端基础且常用的方法

文章目录     

• 一、CSS局中布局
• 二、背景设置
• 三、固定定位
• 四、设置边框
• 五、缩放平铺

---

前言

在前端新手编写网页时会遇到一些有看过有印象但不会具体运用的方法，本文就对一些编写网页中基础且常用的方法做了总结。

---

一、

1.水平居中

2.垂直居中

3.绝对定位

---

二、背景设置

---

三、固定定位

CSS固定定位是指将元素相对于浏览器窗口进行定位，不随页面滚动而滚动。可以使用position属性设置为fixed来实现固定定位。同时，可以使用left、right、top、bottom属性来设置元素相对于浏览器窗口的位置。

让固定定位的元素相对于父元素进行定位，可以将父元素的position属性设置为relative

如：

.parent {
  position: relative;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

另外，可以使用margin-left属性来调整固定定位元素的位置。

如：

.main {
  width: 1190px;
  margin: auto;
}

.box {
  width: 58px;
  height: 300px;
  position: fixed;
  top: 75px;
  left: 50%;
  margin-left: calc(1190px/2 + 20px);
}

---

四、设置边框

下面是设置边框的例子及方法注意点：

边距：

display:
    none：隐藏元素，不会在页面中显示，并且不再占据页面位置
visibility：
    visible默认值
    hidden元素不会显示
    用visibility：hidden；隐藏元素虽然不显示，但它位置保留
overflow:
    visible:默认值，子元素会出现在父元素以外的内容
    hidden，溢出的内容会被修建，不会显示
    scroll，会为父元素加滚动条
    auto，自动添加滚动条

---

五、缩放平铺

当你在HTML文件中使用CSS时，你可以将上述CSS代码放入style标签内或者在外部样式表中。

总结

这些仅是一些简单的基础的CSS方法，希望大家都能在前/后端学习上不断进步。

以此，共勉。