使用JavaScript html css设计一个计算器的前端页面，具有计算器的计算功能。计算器包括加减乘除四则运算的标准计算器和进行科学运算的科学计算器，且具有历史记录的功能。

使用HTML、CSS和JavaScript设计一个计算器前端页面可以分为以下部分：

1. **HTML结构**：
- 创建一个包含主体容器的`<div>`，作为计算器的主要视图。
- 设计两个主要区域：数字按钮区（用于输入数字）和操作按钮区（包含运算符和科学运算符号）。
- 添加一个显示框（通常是`<input type="text">`）显示计算结果，以及一个隐藏的`<ul>`元素用于存储历史记录。

<div id="calculator">
  <input type="text" id="display" disabled>
  <!-- 数字和运算符按钮 -->
  <!-- ... -->
</div>

2. **CSS**：
- 配置按钮样式，包括大小、颜色、间距和位置，使其看起来像真实的计算器。
- 设置显示框的样式以适应计算器主题，并保持居中对齐。

#calculator {
  display: flex;
  justify-content: space-between;
}
button {
  /* 样式 */
}
input#display {
  /* 属性 */
}

3. **JavaScript**：
- 编写事件处理器来绑定按钮点击事件，获取用户输入并更新显示框。
- 实现加法、减法、乘法、除法以及科学运算（比如指数、根号）的计算逻辑。
- 每次用户按下等号或切换到另一个运算时，清空历史记录并保存新的计算结果。

// 获取DOM元素
const buttons = document.querySelectorAll('button');
const display = document.getElementById('display');
const historyList = document.querySelector('#history ul');

// 添加点击事件处理器
buttons.forEach(button => {
  button.addEventListener('click', (event) => {
    // 获取按钮值，处理计算逻辑...
  });
});

function calculate() {
  // 计算并更新显示...
}

function saveToHistory(result) {
  // 将计算结果添加到历史列表...
}

每次用户点击等号或换行，调用`calculate`函数，然后在完成计算后调用`saveToHistory`函数将结果保存到历史列表中。

相关问题：
1. 如何在CSS中实现按钮按下的效果？
2. 怎样防止用户直接修改显示框的数值？
3. 科学计算器如何处理异常情况，如开方负数？