四时宝库

程序员的知识宝库

2024年09月01日

css 垂直居中的几种实现方式（css垂直居中方法）

前言

设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。

实现方式

2024年09月01日

css3新手入门(1)基础选择器（css基础选择器主要有哪些?）

今天学习下css3的基础选择器类型，只有使用选择器选中了元素，才可把样式应用于元素上，所以选择器对我们来说是至关重要的。选择器允许开发者根据元素的类型、类名、ID等属性来选择性地应用样式。

下面是一个包含HTML和CSS代码的例子，展示了CSS3中的几种基础选择器如何工作

2024年09月01日

CSS经典面试题-水平垂直居中之绝对定位方法

前言

对于使用CSS属性使得元素水平垂直居中问题，基本是在前端面试问题中必问的一个问题。由于这个问题的回答要分好几种情况，我也会写几篇文章分别讲述。

今天这篇文章我们首先看看，只有一个元素的时候采用绝对定位如何实现水平垂直居中的。

我已经将代码放到github上，感兴趣的同学可以去看看。

2024年09月01日

如何在 JavaScript 中使用大于和小于运算符

在你的 JavaScript 程序中，你经常需要比较两个值，以确定一个是否大于另一个或小于另一个。这就是大于和小于运算符派上用场的地方。

2024年09月01日

HTML+CSS:css的常用标签总结，了解各个标签的作用

css的标签有很多，本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。

（1） css的文字属性标签

文字颜色： color: #ffffff;

文字样式： font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

2024年09月01日

CSS 全屏布局（css全屏背景图）

什么是全屏布局

全屏布局就是指 HTML 页面铺满整个浏览器窗口, 并且没有滚动条。而且还可以跟随浏览器的大小变化而变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏布局</title>
<style>
html,
    body {
    margin: 0;
    overflow: hidden;
}
header {
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: lightgray;
}
.content {
    position: fixed;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background-color: lightblue;
}
.content .left {
    width: 300px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 100px;
    bottom: 100px;
    background-color: lightcoral;
}
.content .right {
    height: 1000px;
    margin-left: 300px;
    background-color: greenyellow;
}
footer {
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: lightslategray;
}
</style>
</head>
<body>
<header></header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>

2024年09月01日