CSS补充与JavaScript基础
一、CSS补充
position
1.fiexd
固定在页面的某个位置;
示例将顶部菜单始终固定在页面顶部
position: fixed; 将标签固定在某个位置
right: 0; 距离右边0像素
left: 0; 距离左边0像素
top: 0; 距离上边0像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: #2459a2;
color: #DDDDDD;
/* 将顶部固定 */
position: fixed;
right: 0;
left: 0;
top: 0;
}
.ph-body{
background-color: #DDDDDD;
height: 5000px;
/* 内容要空余出上面的高度否则内容会被压在下面 */
margin-top: 48px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">头部</div>
<div class="ph-body">
内容
</div>
</body>
</html>
2.relative+absolute
实现返回顶部效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto;">
<div style="width: 50px;height: 50px;background-color: cornflowerblue;position: absolute;right: 0;bottom: 0;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
</body>
</html>
实例：relative+absolute实现自定义浮动位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto">
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left :0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>
3.页面遮罩样式
opcity: 0.5 透明度
z-index: 层级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="../css/commons.css"> -->
<style>
.level-1{
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background-color: white;
height: 400px;
width: 500px;
/*隐藏属性
display: none;
*/
}
.level-2{
z-index: 9;
position: fixed;
opacity: 0.5;
background-color: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*隐藏属性
display: none;
*/
}
</style>
</head>
<body style="margin: 0 auto">
<!-- 最上面一层白色 -->
<div class="level-1">
<input type="text" />
<input type="text" />
</div>
<!-- 第二层透明 -->
<div class="level-2"></div>
<!-- 第一层底部绿色 -->
<div style="height: 5000px;background-color: green">内容</div>
</body>
</html>
4.overflow
overflow:
hidden 不显示超过对象尺寸的内容，如果图片设置了width: 200px;height: 300px;那么图片超过设置的内容全部不显示
auto 超过设置对象的尺寸内容时自动加上滚动条
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
</body>
</html>
效果图
5.hover
设置对象在其鼠标悬停时的样式。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
top: 0;
left: 0;
right: 0;
position: fixed;
height: 48px;
line-height: 48px;
background-color: #2459a2;
}
.pg-body{
margin-top: 50px;
}
.share-head-body{
margin: 0 auto;
width: 980px;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/* 当鼠标经过时，css样式才生效
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="share-head-body">
<a>LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="share-head-body">
内容
</div>
</div>
</body>
</html>
效果图
6.background其它
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat;
取值:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
background-position-x: 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。
background-position-y: 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bk-img{
background-image: url(1.png);
background-repeat: no-repeat;
height: 20px;
width: 20px;
border: 1px solid red;
background-position-x: 0px;
background-position-y: 0px;
}
</style>
</head>
<body>
<div style="height: 100px"></div>
<div class="bk-img"></div>
</body>
</html>
7.小结输入框实现
所用知识点background-image、position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
height: 35px;
width: 400px;
position: relative;
margin-top: 5px;
float: left;
margin-right: 20px;
}
.login .span{
position: absolute;
right: 6px;
top: 10px;
height: 16px;
width: 16px;
/*让span标签具有块级标签的特性*/
display: inline-block;
}
</style>
</head>
<body>
<div class="login">
<input type="text" style="height: 35px;width: 370px;
padding-right: 30px;"/>
<span class="span" style="background-image: url(name.jpg)"></span>
</div>
</body>
</html>
效果图
二、JavaScript
独立的语言，浏览器具有js解释器
1.JavaScript代码存在形式
JavaScript代码存在形式：
- Head中
<script>
//javascript代码
alert(123);
</script>
//如果写在head中推荐下面方式
<script type="text/javascript">
//javascript代码
alert(123);
</script>
- 文件中
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
2.JavaScript注释
单行注释 //
多行注释 /* */
3.JavaScript变量命名方式
python 命名方式：
name = 'alex'
JavaScript 命名方式:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
4.通过浏览器console编写JavaScript代码
通过浏览器的console也可以临时编写JavaScript代码
5.JavaScript基本数据类型
数字
a = 18;
字符串
a = "alex"
a.chartAt(索引位置) 通过字符串下标获取指定字符串
a.substring(起始位置，结束位置) 通过字符串下标对字符串进行切片
a.lenght 获取当前字符串长度
...
列表(数组)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
true
false
6.for循环
for循环是循环的是元素的索引，for循环通常有两种方式
第一种方式
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
循环字典时循环的是key
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
- 上面代码的执行结果为
第二种方式
第二种方式不支持字典的循环
for(var i=0;i<10;i++){
console.log(i)
}
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
console.log(a[i])
}
- 上面代码的执行结果为
7.条件判断
if判断语法:
else if 相当于python中的elif
if(条件){
}else if(条件){
}else if(条件){
}else{
}
表达式:
== 值相等;例如 1 == "1" 值都为1，但是类型不同一个是数字一个是字符串，
=== 值和类型都相等；1 === 1
&& and
|| or
8.函数
语法：
定义函数
function func(arg1,arg2){
}
执行函数
func(1,2)
9.定时器
每隔400毫秒自动执行一次指定的函数
setInterval('函数名()', 400)
10.alert和console.log
alert实现鼠标点击时弹出对话框效果
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 400px;border: 1px solid black;width: 300px;margin: 0 auto">
<div style="margin-top: 10px;text-align: center">
<input type="text" />
<input id='i1' onclick="func()" type="button" value="点我">
</div>
</div>
<script>
function func() {
alert("警告")
}
</script>
</body>
</html>
实现效果
console.log
将内容输出到浏览器的console控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="func()" id="i1">你好，世界</div>
<script>
function func() {
// 获取指定ID的标签
var tag = document.getElementById('i1');
//获取i1标签的内容
var content = tag.innerText;
//内容输出到console
console.log(content);
}
func()
</script>
</body>
</html>
实现效果
11.DOM
1.查找标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2.操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
3.实例1：查找标签修改标签内容实现循环标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1{
background-color: red;
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
height: 38px;
line-height: 30px;
}
</style>
</head>
<body style="margin: 0 auto">
<div id="i1" class="i1">欢迎光临共享商城</div>
<script>
function func() {
//根据ID获取指定标签的内容
var tag = document.getElementById('i1');
//获取标签的内容
var content = tag.innerText;
// 获取内容的索引为1的字符
var start = content.charAt(0);
// 获取从1到最后的值
var end = content.substring(1,content.length);
// 重新拼接内容
var new_content = end + start ;
// 重新赋值i1标签的内容
tag.innerText = new_content;
}
//定时器每个500毫秒执行一次func
setInterval('func()',500)
</script>
</body>
</html>
实现效果
4.通过JavaScript实现添加样式删除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.remove{
display: none;
}
.level-1{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
z-index: 9;
}
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<table border="1" style="width: 200px;text-align: center">
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="button" value="添加主机" onclick="ShowModel()"/>
</div>
<!-- 透明层 -->
<div id='i1' class="level-1 remove"></div>
<div id='i2' class="level-2 remove">
<p style="text-align: center">
<input type="text" value="主机名"/>
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="DelModel()">
</p>
</div>
<script>
//移除样式
function ShowModel() {
document.getElementById('i1').classList.remove('remove')
document.getElementById('i2').classList.remove('remove')
}
//添加样式
function DelModel() {
document.getElementById('i1').classList.add('remove')
document.getElementById('i2').classList.add('remove')
}
</script>
</body>
</html>
实现效果
5.实例：使用标签直接查找与间接查找实现全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 隐藏样式 */
.hide{
display: none;
}
/* 透明层 */
.level-1{
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
z-index: 9;
}
/* 弹出框 */
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<!-- 表格 -->
<div>
<input type="button" value="添加主机" onclick="ShowModel()">
<input type="button" value="全部取消" onclick="AllRemove()">
<input type="button" value="全选" onclick="Allchoose()">
<input type="button" value="反选" onclick="ReverseAll()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>IP地址</th>
<th>端口号</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.1-webngx</td>
<td>192.168.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.2-webngx</td>
<td>192.168.1.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.3-webngx</td>
<td>192.168.1.3</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<!-- 透明层 -->
<div id="i1" class="level-1 hide"></div>
<!-- 弹出框 -->
<div id="i2" class="level-2 hide">
<p style="text-align: center">
<input type="text" value="hostname">
</p>
<p style="text-align: center">
<input type="text" value="ip">
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="Cancel()">
</p>
</div>
<!-- js -->
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function Cancel(){
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
//全选
function Allchoose(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为true就自动全选
checkbox.checked = true;
}
}
//全部取消
function AllRemove(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为false
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为false
checkbox.checked = false;
}
}
//反选
function ReverseAll(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.如果当前的checkbod等于true就设置为false，否则就设置为true
if(checkbox.checked){checkbox.checked = false;}else{
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
实现效果
6.实例：左侧菜单栏效果
- 存放css样式文件
.pg-header{
height: 48px;
line-height: 48px;
background-color: #DDDDDD;
}
.container{
width: 980px;
margin: 0 auto;
}
.pg-info{
color: brown;
font-weight: bold;
font-size: 16px;
}
.pg-li{
margin: 0 5px;
float: left;
}
ol, ul {
list-style: none;
}
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<!-- 头部信息 -->
<div class="container">
<ul class="pg-li">
<li><a class="pg-info">后台管理</a></li>
</ul>
</div>
</div>
<!-- 左侧菜单 -->
<div style="text-align: center;width: 310px;">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">家用电器</div>
<div class="content">
<div>合资品牌</div>
<div>国产品牌</div>
<div>互联网品牌</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">电脑办公</div>
<div class="content hide">
<div>笔记本</div>
<div>游戏本</div>
<div>平板电脑</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">厨具</div>
<div class="content hide">
<div>烹饪锅具</div>
<div>剪刀菜板</div>
<div>厨房配件</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">个护化妆</div>
<div class="content hide">
<div>洁面</div>
<div>洗发</div>
<div>沐浴</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid){
//获取当前id的标签
var head = document.getElementById(nid);
//找到父标签的父标签下的所有子标签
var item_list = head.parentElement.parentElement.children;
//循环所有子标签找到索引为1的标签添加hide样式隐藏标签
for(var i=0;i<item_list.length;i++){
//当前的标签
var current_item = item_list[i];
//修改当前标签内部索引为1的div，添加hide演示
current_item.children[1].classList.add('hide');
}
//所有标签全部添加上隐藏样式属性后删除当前标签的下一个子标签隐藏属性
head.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
实现效果
CSS补充与JavaScript基础的更多相关文章
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- (五)CSS和JavaScript基础
DHTML :制作动态HTML页面的技术 DHTML=HTML+层叠样式表CSS+脚本语言javascript 一.CSS 1.1 CSS样式的分类: 行内样式:只影响一行,其他相同标签也不影响.如下 ...
- JavaScript基础--事件驱动和访问CSS技术(十)
1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 第三篇：web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- JavaScript基础三
1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数. ...
- JavaScript基础（2）-DOM
一.伪数组arguments arguments代表的是实参,有个讲究的地方是:arguments只在函数中使用. 1.返回函数实参的个数:arguments.length,例如: fn(2,4); ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
随机推荐
- Handler类、异步线程和Message类的参数传递
声明HandlerThread对象,实现了使用Looper来处理消息队列的功能 //这个类由Android操作系统提供 HandlerThread handlerThread = new Handle ...
- 【原创】轻量级移动端即时通讯技术 MobileIMSDK 发布了
申明:MobileIMSDK目前为个人原创开源工程,投入了大量的时间和精力,希望对需要的人有所帮助.如需与作者交流,见文章底部个人签名处,互相学习.Q群:215891622,欢迎共同志趣者学习和交流. ...
- 细说Cookie
阅读目录 开始 Cookie 概述 Cookie的写.读过程 使用Cookie保存复杂对象 Js中读写Cookie Cookie在Session中的应用 Cookie在身份验证中的应用 Cookie的 ...
- 关于C#的继承结论
1.继承:继承是一个类可以使用另一个类的属性和方法(成员) 2.子类继承父类使用的符号为“ : ”(冒号) 3.子类可以继承父类私有成员,但不能访问(不能使用) 4.父类的构造,子类不能被继承 5. ...
- 火狐浏览器与Chorme的兼容性小问题
1.如果 result 返回时空字符串, 则在 火狐里面 回调函数不会进入执行. 如果是 谷歌浏览器,则会 执行回调. $.post(, ipagesize: , strSearchKey: strk ...
- UVALive 6908---Electric Bike(DP或记录型深搜)
题目链接 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- 【夯实PHP基础系列】JQuery easyUI的使用
最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引. 体会有以下3个方面: 1)快速创建表格的能力: 后端程序,比如PHP只需要 ...
- 服务器判断http是否中断
一般来说,只需要send或者recv一下,如果结果为零,则为掉线. 1.当recv返回值为0是表示对方已经正常(MSDN说是完美的)的断开连接.2.当recv返回SOCKET_ERROR时,说明对方已 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- js中的位运算
按位运算符是把操作数看作一系列单独的位,而不是一个数字值.所以在这之前,不得不提到什么是"位": 数值或字符在内存内都是被存储为0和 1的序列,每个0和1被称之为1个位,比如说10 ...