语言教程
2025-10-22 17:25:08 0 举报AI智能生成
Java,Linux Shell,React,JS,CSS
作者其他创作
大纲/内容
书籍
Java
并发容器
ConcurrentHashMap
参考
深入浅出ConcurrentHashMap1.8
Shell
函数
函数基本知识
函数的定义和调用
定义
调用
函数的返回值
带参数的函数
位置参数
$i
$1：第一个参数
$2：第二个参数
$i：第i个参数
checkFileExist_v2
power:$1的$2次方
指定位置参数
移动位置参数
函数库
自定义函数库
函数库/etc/init.d/functions简介
递归函数
正则表达式
sed
介绍
语法
删除
awk
find
xargs
-exec
grep
-n -v --color
egrep
通用
正则表达式
教程
正则表达式30分钟入门教程
案例
6到16位数字、字母、特殊字符且必须包含数字、字母
^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z!@#$%^&*]{6,18}$
解读
^
匹配字符串的开始
(?=表达式)
.*\d
. 匹配除换行符以外的任意字符
* 重复零次或更多次
\d 数字
.*[a-zA-Z]
[\da-zA-Z!@#$%^&*]
数字、英文字母和特殊字符
{6,18}
重复6到18次
$
匹配字符的结束
？
且必须是如何实现的？
golang
问题列表
1.解决 go 语言加载模块超时 https://proxy.golang.org i/o timeout
react
入门
基本认识
官网
英文官网
中文官网
介绍描述
用于构建用户界面的JavaScript库（只关注于view）
由Facebook开源
React的特点
Declarative（声明式编码）
Component-Base（组件化编码）
Learn Once,Write AnyWhere（支持客户端与服务器渲染）
高效
单向数据流
高效的原因
虚拟（vitual）DOM，不总是直接操作DOM
DOM Diff算法，最小化页面重绘
基本使用
注意：此时只是测试语法使用，并不是真实项目开发使用
效果
直接生成HTML，JS
相关JS 库
react.js：React的核心库
react-dom.js：提供操作DOM的react扩展库
babel.min.js：解析JSX语法代码转为纯JS语法代码的库
在页面中导入JS
编码
使用React开发者工具调试
JSX
虚拟DOM
React提供了一些API来创建一种特别的一般js对象
var element = React.createElement('h1',{id:'myTitle'},'hello')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据，react会转转换为真实DOM变化而更新界面
JSX
全称：JavaScript XML
react定义的一种类似于XML的JS扩展语法：XML+JS
作用：用来创建react虚拟DOM对象
var ele = <h1>Hello JSX!</h1>
注意1：它不是字符串，也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象
标签名任意：HTML标签或其它标签
标签属性任意：HTML标签属性或其它
基本语法规则
遇到<开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其它标签需要特别解析
遇到以{开头的代码，以JS语法解析：标签中的js代卖必须用{}包含
babel.js的作用
浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel",申明需要babel来处理
渲染虚拟DOM
语法：ReactDOM.render(virtualDOM,containerDOM)
作用：将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
参数1:纯js或jsx创建的虚拟dom对象
参数2:用来包含虚拟DOM元素的真实dom元素对象（一般是一个div）
建虚拟DO的2中方式
纯JS（一般不用）
React.createElement('h1',{id:'myTitile',title)
JSX
<h1 id='myTitile'>{title}</h1>
JSX练习
需求：动态展示列表数据
模块与组件和模块化与组件化的理解
模块
理解：向外提供特定功能的js程序，一般就是一个js文件
为什么：js代码更多更复杂
作用：复用js，简化js的编写，提高js运行效率
组件
理解：用来实现特定功能效果的代码集合
为什么：一个界面的功能更复杂
作用：复用编码，简化项目编码，提高运行效率
模块化
当应用的js都以模块来编写的，这个应用就是一个模块化的应用
组件化
当应用是以多个组件的方式实现，这个应用就是一个组件化的应用
React面向组件编程
基本理解和使用
自定义组件（Component）
定义组件（两种方式）
工厂函数组件
ES6类组件
渲染组件
ReactDOM.render(<MyComponent/>,document.getElementById('example'))
注意
组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
render()渲染组件标签的基本流程
React内部会创建组件示例对象
得到包含的虚拟DOM并解析为真实DOM
插入到指定的页面元素内部
组件三大属性1：state
理解
state是组件对象重要的属性，值是对象（可以包含多个数据）
组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
编码操作
初始化状态
读取某个状态值
更新状态-->组件界面更新
组件三大属性2：props
理解
每个组件对象都会有个props（properties的简写）属性
组件标签的所有属性都保存在props中
作用
通过标签属性从组件外向组件内传递变化的数据
注意：组件内部不要修改props数据
编码操作
内部读取某个属性值
对props中的属性值进行类型限制和必要性限制
扩展属性，将对象的所有属性通过props传递
默认属性值
组件类的构造函数
与state的区别
state：组件自身内部可变化的数据
props：从组件外部向内部传递数据，组件内部只读不修改
组件三大属性3：ref与事件处理
案例
需求
一个input一个button，通过点击button显示input中的输入内容；一个input，在input失去焦点时显示input中的内容
源码
组件的3大属性之三ref属性
组件内的标签都可以定义ref属性来标识自己
<input type="text" ref="{input => this.msgInput = input}"/>
回调函数在组件初始化渲染完成或卸载时自动调用
组件中可以通过this.msgInput来得到对应的真实DOM元素
作用：通过ref获取组件内容特定标签对象，进行读取其相关数据
事件处理
通过onXxx属性指定组件时间处理函数（注意大小写）
React使用的是自定义事件，而不是使用原生DOM事件
React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
通过event.target得到发生事件的DOM元素对象
强烈注意
组件内置的方法中的this为组件对象
在组件类中自定义的方法中this为null
强制绑定this，通过函数对象的bind()
箭头函数（ES6模块化编码才能使用）
组件的组合
案例
需求
一个input、一个button和一个ul,输入文本，点击按钮显示到列表的首位，并清除输入的文本
源码
功能界面的组件化编码流程（重要）
拆分组件：拆分界面，抽取组件
实现静态组件：使用组件实现静态页面效果
实现动态组件
动态显示初始化数据
交互功能（从绑定事件监听开始）
收集表单数据
案例
需求
两个input，一个是username，一个是password；一个button，点击获取到两个input的数据
源码
理解
问题：在react应用中，如何收集表单输入数据
包含表单的组件分类
受控组件
表单项输入数据能自动收集成状态
非受控组件
需要时才手动读取表单输入框中的数据
组件生命周期
案例
需求
让指定的文本做显示/隐藏的渐变动画
切换持续时间为2S
点击按钮从界面中移除组件界面
理解
组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包括一系列的勾子函数（生命周期回调函数），在生命周期特定时刻回调
我们在定义组件时，可以重写特定的生命周期回调函数，做特定的工作
生命周期流程图
生命周期详述
组件的三个生命周期状态
Mount：插入真实DOM
Update：被重新渲染
Unmount：被移除真实DOM
React为每个状态都提供了勾子函数
componentWillMount()
componentDidMount()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
生命周期流程
第一次初始化渲染显示：ReactDOM.render()
constructor()：创建对象初始化state
componentWillMount()：将要插入回调
render()：用于插入虚拟DOM回调
componentDidMount()：已经插入回调
每次更新state：this.setState()
componentWillUpdate()：将要更新回调
render()：更新（重新渲染）
componentDidUpdate()：已经更新回调
移除组件：ReactDOM.unmountComponentAtNode(containerDom)
componentWillUnmount()：组件将要被移除回调
重要的勾子
render()：初始化渲染或更新渲染调用
componentDidMount()：开启监听，发送ajax请求
componentWillUnmount()：做一些首位工作，如：清理定时器
componentWillReceiveProps()：后续需要讲
虚拟DOM与DOM Diff算法
案例
实时显示当前日期时间
源码
基本原理
初始化显示界面
创建虚拟DOM树
真实DOM树
绘制界面显示
更新界面
setState()更新状态
重新创建虚拟DOM树
新/旧树比较差异
更新差异对应真实DOM
局部界面重绘
react应用（基于react脚手架）
使用create-react-app创建react应用
react脚手架
xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模版项目
包含了所有需要的配置
指定好了所有的依赖
可以直接安装/编译/运行一个简单效果
react提供了一个用于创建react项目的脚手架库：create-react-app
项目的整体技术架构为：react+webpack+es6-eslint
使用脚手架开发的项目的特点：模块化，组件化，工程化
创建项目并启动
npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start
react脚手架项目结构
node_modules:第三方依赖模块文件夹
publc
index.html：主页面
scripts
build.js：build打包引用配置
start.js：start运行引用配置
src：源码文件夹
components：react组件
index.js：应用入口js
.gitignore：git版本管制忽略的配置
package.json：应用包配置文件
README.md：应用描述说明的readme文件
demo：评论管理
需求
输入用户和评论内容，点击提交，发布评论到评论列表的最前面
源码
react ajax
理解
前置说明
React本身只关注于界面，并不包含发送ajax请求的代码
前端应用需要通过ajax请求于后台进行交互（JSON数据）
react应用中需要集成第三方ajax库（或自己封装）
常用的ajax请求库
jQuery：比较中，如果需要另外引入不介意使用
axios：轻量级，建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器和node服务器端
fetch：原生函数，但老版本浏览器不支持
不再使用XmlHttpRequest对象提交ajax请求
为了兼容低版本的浏览器，可以引入兼容库fetch.js
案例
根据指定的关键字在github上搜索匹配的最受关注的库
显示库名，点击连接查看库
测试接口地址
axios
文档
相关API
GET请求
POST请求
Fetch
文档
https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652
相关API
GET请求
POST请求
几个重要技术总结
组件间通信
方式1:通过props传递
共同的数据放在父组件上，特有的数据放在自己组件内部
通过props可以传递一般数据和函数数据，只能一层一层传递
一般数据-->父组件传递数据给子组件-->子组件读取数据
函数数据-->子组件传递数据给父组件-->子组件调用函数
方式2:使用消息订阅（subscribe）-发布（publish）机制
工具库：PubSubJS
下载npm install pubsub-js --save
使用
import PubSub from ‘pubsub-js'//引入
PubSub.subscribe('delete',function(data){});//订阅
PubSub.publish('delete',data)//发布消息
方式3:redux
事件监听原理
原生DOM事件
绑定事件监听
事件名（类型）：只有有限的几个，不能随便写
回调函数
触发事件
用户操作界面
事件名
数据
自定义事件（消息机制）
绑定事件监听
事件名（类型）：任意
回调函数：通过形参接收数据，在函数体处理事件
触发事件（编码）
事件名（类型）：与绑定的事件监听的事件名一致
数据：会自动传递给回调函数
ES6 常用新语法
定义常量/变量：const/let
解构赋值
let {a,b} = this.props
import {aa} from 'xxx'
对象的简介表达：{a,b}
箭头函数
常用场景
组件的自定义方法：xxx=()=>{}
参数匿名函数
优点
简洁
没有自己的this，使用引用this查找的是外部this
扩展（三点）运算符：拆解对象（const MyProps = {}.<Xxx {...MyProps}>)
类：class/extends/constructor/super
ES6模块化：export default|import
react-router4
相关理解
react-router的理解
react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库
SPA的理解
单页Web应用（single page web application)
整个应用只有一个完整的页面
点击页面中的连接不会刷新页面，本身也不会向服务器发请求
当点击路由链接时，只会做页面的局部更新
数据都需要通过ajax请求获取，并在前端异步展现
路由的理解
什么是路由
一个路由就是一个映射关系（key:value)
key为路由路径，value可能是function/component
路由分类
后台路由
node服务端路由，value是function，用来处理客户端提交的请求并返回一个响应数据
前台路由
浏览器端路由，value是component，当请求的是路由path时，浏览器端没有发送http请求，但界面会更新显示对应的组件
后台路由
注册路由：router.get(path,function(req,res))
当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
前端路由
注册路由：<Route path="/about" component={About}>
当浏览器的hash变为#about时，当前路由组件就会变成About组件
前端路由的实现
history库
网址：https://github.com/reactTraining/history
管理浏览器会话历史的工具库
包装的是原生BOM中的window.history和window.location.hash
history API
History.createBrowserHistory()：得到封装window.history的管理对象
History.createHashHistory()：得到封装window.loacation.hash的管理对象
history.push()：添加一个新的历史记录
history.replace()：用一个新的历史记录替换当前的记录
history.goBack()：回退到上一个历史记录
history.goForword()：前进到下一个历史记录
history.listen(function(location){})：监视历史记录的变化
react-router相关API
组件
<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>
其他
history对象
match对象
withRouter函数
基本路由使用
案例
准备
下载reat-router：npm install --save react-router@4
下载react-router-dom：npm install --save react-router-dom
引入bootstrap.css
路由组件
嵌套路由使用
案例
二级路由
向路由组件传递参数数据
多种路由跳转方式
react-ui
最流行的开源React UI组件库
material-uid（国外）
官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui
ant-design（国内蚂蚁金服）
PC官网: https://ant.design/index-cn
移动官网: https://mobile.ant.design/index-cn
Github: https://github.com/ant-design/ant-design/
Github: https://github.com/ant-design/ant-design-mobile/
ant-design-mobile使用入门
redux
redux理解
学习文档
英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux
redux是什么？
redux是一个独立专门用于做状态管理的JS库（不是react插件库）
它可以用在react,angular，vue等项目中，但基本与react配合使用
作用：集中式管理react应用中多个组件共享的状态
redux工作流程
组件
React Components
Action Creators
store
reducers
什么情况下需要使用redux
总体原则：能不用就不用，如果不用比较吃力才考虑使用
某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
redux的核心API
createStore()
store对象
applyMiddleware()
combineReducers()
redux的三个核心概念
action
reducer
store
小结
render()方法中如何实现跳转
return <Redirect>
组件方法中如何实现跳转
this.props.hisotry
如何获取当前的url
搭建后台管理系统Admin
约定
页面放在pages目录下
组件放在components目录下
页面
登入页面
首页
操作
创建项目
react-create-app
安装依赖
npm install --save react-router@4
npm install --save react-router-dom
npm install antd
npm install axios
筛选条件
表格
弹窗Form
React+bootstrap管理系统
操作
创建项目
react-create-app
安装依赖
npm install --save react-bootstrap
npm install --save react-router-bootstrap
npm install --save react-router-bootstrap
npm install --save axios
遇到的问题
路由传参
https://www.better.dev/route-parameters-with-react-router
Scala
下载安装
下载
国外CSS教程
选择器
三大选择器
元素选择器
类选择器
id选择器
属性声明
属性
font-size
22px
color
purple
text-transform
uppercase
backgroud-color
gold
font-family
monospace
border
3px solid red
font
inherit
line-height
1.5
margin
0
padding
0
box-sizing
border-box
min-height
100vh
border-radius
50px
outline
outline-offset
-20px
display
block
inline-block
z-index
1
特殊属性值
!important
颜色
backgroud
papayawhip
color
rgb(255,0,0)
rgba(0,0,0,0.5)
颜色编号
#000000
颜色名称
dark
单位和大小
单位
px
rem
em
ch
vm
盒模型
margin
margin-top
margin-right
margin-bottom
margin-left
border
border-top
border-top-width
border-top-style
ridge
border-right
padding
排版
text-decoration
uderline
overline
line-through
text-transform
uppercase
text-align
left
justify
text-indent
2en
line-height
1.5
letter-spacing
1
0.1em
word-spacing
0.1em
font-weight
900
font-style
italic
链接样式
描述
带下划线
未访问是蓝色字体
访问了是紫色
a
text-decoration
none
cursor
not-allowed
pointer
a:visited
color:purple
a:hover
color:dodgerblue
opacity:0.8
a:active
color:red
a:focus
列表样式
ul
ordered list
list-style-type
lower-alpha
序号显示小写英文字母
georgian
decimal
序号显示数字
decimal-leading-zero
序号显示零引导的数字
disc
实体点
circle
圆环
upper-roman
序号显示大写的罗马字符
none
ol
unordered list
start
5
reversed
list-style-type
square
指针显示实体正方形
list-style-position
inside
outside
list-style-image
url("../images/checkmark.png')
list-style
square url("../images/checkmark.png') inside
li
value
li:nth-child(even)
::marker
显示
display
none
inline-block
浮动
float
left
clear
both
overflow
auto
列
column-count
4
column-width
250px
columns
4 250px
column-rule
3px solid #333
column-gap
3rem
break-inside
avoid
break-before
column
cloumn-span
all
位置
position
absolute
relative
fixed
sticky
flexbox
display
flex
justify-content
flex-start
flex-end
center
space-around
space-between
space-evenly
gap
1rem
align-items
center
flex-start
flex-end
flex-direction
cloumn
row
row-reverse
flex-wrap
wrap
flex-flow
row wrap
align-content
space-evenly
align-items
center
flex-basis
100px
flex-grow
1
网格
display
grid
grid-auto-flow
column
grid-template-column
2fr 1fr 1fr
grid-auto-rows
minmax(150px,auto)
国内CSS教程
CSS样式
CSS添加方法
行内样式添加
<p style>
内嵌样式
style标签
单独文件
<link rel="stylesheet" href="css/style.css" />
优先级
就近原则
行内样式>内嵌样式>链接样式>浏览器默认样式
CSS选择器
标签选择器
标签同名
类别选择器
.类别名
分类设置样式
ID选择器
#ID
嵌套声明
p span p标签下的span标签，嵌套声明标签间用空格分隔
集体声明
h1,p 通过,分隔
全局声明
*
混合
多个class选择器混用，用空格分开
id和class混用
id选择器不可以多个同时使用
CSS样式
文字样式
单位与颜色
单位
px:像素
em:字符
1em——一个字符，自动适应用户所使用的字体
%:百分比
继承关系
上层设置的大小的百分比大小，例如：上层设置的大小是12px，本层设置的百分比大小为120%，则本层的大小为12px*120%
颜色
red,blue,green
颜色名
rgb(x,x,x)
RGB值，每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色(66,66,66)
rgb(x%,x%,x%)
RGB百分比值 0%-100% 红色：rgb(100%,0,0)
rgba(x,x,x,x)
RGB值，透明度 a值：0.0（完全透明）与1.0（完全不透明） 红色半透明：rgba(255,0,0,0.5)
#rrggbb
十六进制数 红色：#ff0000 红色：#f00 两位相同时可以去掉重复值
文本
color 文本颜色，取值：red #f00 rgb(255,0,0)
letter-spacing 字符间距，取值：2px -3px
line-height行高，取值：14px 1.5em 120%
利用line-height垂直居中
text-align对齐，取值：center left right justify
justify，两端对齐
text-decoration：装饰线，取值：none overline underline line-through
text-decoration:none 去掉超链接下划线
text-indent 首行缩进，取值：2em
字体
font
在一个声明中设置所有的字体属性
font:bold 18px '幼圆'
font:斜体 粗体 字号/行高 字体
font:italic bold 16px/1.5em '宋体'
font-family
字体系列
font-family:"Hiragino Sans GB","Microsoft YaHei",sans-serif;
依次寻找,分隔的字体
font-size
字号
14px 120%
font-style
斜体
italic
font-weight
粗体
bold
背景和超链接样式
背景属性
background
background: 颜色 图片 repeat
background-color
backgrond-color:red
background-image
background-image: url("logo.jpg")
background-repeat
background-repeat:repeat|repeat-x|repeat-y|no-repeat
超链接
链接的四种状态
a:link
普通的、未被访问的超链接
a:visited
用户已访问的链接
a:hover
鼠标指针位于链接的上方悬停
a:active
链接被点击的时刻
:伪类选择器
按照以下次序
a:hover必须位于a:link和a:visited之后
a:active必须位于a:hover之后
列表和表格样式
列表
属性
list-style
所有用于列表的属性设置于一个声明中
list-style-image
取值
url("图片相对路径")
list-style-position
取值
inside
标记在列表的内部
outside
标记在列表的外部
list-style-type
取值
none
无标记
disc
默认。标记是实心圆
circle
标记是空心圆
square
标记是实心方块
decimal
标记是数字
lower-roman
小写罗马数字（ⅰ，ⅱ，ⅲ，ⅳ，ⅴ登）
upper-roman
大写罗马数字（Ⅰ，Ⅱ，Ⅲ，Ⅳ，Ⅴ）
low-alpha
小写英文字母The marker is lower-alpha(a,b,c,d,e等）
upper-alpha
大写英文字母The marker is upper-alpha(A,B,C,D,E等）
low-greek
小写希腊字母（alpha，beta，gamma等）
lower-latin
小写拉丁字母（a,b,c,d,e等）
upper-latin
大写拉丁字母（A，B，C，D，E等）
有序列表ol
无序列表ul
表格
属性
width
height
border
border-collapse
边框叠加或坍缩
取值
collapse
奇偶选择器
:nth-child(odd|even)
CSS布局与定位
布局与定位概述
盒子模型（元素什么样）
页面元素的大小
边框
与其他元素的距离
定位机制（元素放在哪）
文档流
浮动定位
层定位
盒子模型
盒子模型组成
content内容
height高度
width宽度
border边框
padding内边距
margin外边距
一个盒子的实际宽度、高度
content+padding+border+margin
当内容溢出盒子框时，overflow属性取值
hidden
超出部分不可见
auto
显示滚动条
scroll
如果有超出部分，显示滚动条
border属性
border-width
px
thin
medium
thick
border-style
dashed
dotted
solid
double
border-color
颜色
border
width style color
padding
margin
垂直外边距合并
水平居中auto
CSS定位机制概述
文档流定位
元素分类
block
block元素特点
独占一行
元素的height、width、margin、padding都可设置
常见的block元素
<div>
<p>
<h1>...<h6>
<ol>
<ul>
<table>
<form>
将元素显示为block元素
a{display:block}
inline元素a转换为block元素从而使a元素具有块状元素特点
inline
inline元素特点
不单独占一行
width、height不可设置
width就是它包含的文字或图片的宽度，不可改变
常见的inline元素
<span>
<a>
显示为inline元素
display:inline
inline元素之间有一个间距问题
a标签之间有间隙
可以将inline元素转换为block标签来解决
inline-block
同时具备inline元素、block元素的特点
不单独占一行
元素的height、width、margin、padding都可以设置
常见inline-block元素
<img>
显示为inline-block元素
display:inline-block
元素类型转换
display属性
取值
none
元素不会被显示
block
显示为block元素
inline
显示为inline元素
inline-block
显示为inline-block元素
浮动定位
float属性
浮动定位
脱离文档流的定位
取值
left：左浮动
right：右浮动
none：不浮动
clear属性
清除浮动定位
取值
both
清除左右两边的浮动
left
清除左侧的浮动
right
清除右侧的浮动
none
默认值
层定位
层定位概述
像图像软件中的图层一样可以对每个layer能够精确定位操作
position属性
取值
fixed
relative
absolute
left属性
right属性
top属性
bottom属性
z-index属性
position属性和z-index属性
position属性
fixed 固定定位
relative 相对定位
absolute 绝对定位
通过以下属性定位
top
right
bottom
left
z-index
值大在上面
position属性
static
默认值
没有定位，元素出现在正常的流中
top,bottom,left,right,z-index无效
fixed
固定定位
相对于浏览器窗口进行定位
top,bottom,left,right,z-index有效
relative
相对于其直接父元素进行定位
top,bottom,left,right,z-index有效
absolute
绝对定位
相对于static定位以外的第一个父元素进行定位
top,bottom,left,right,z-index有效
固定定位position:fixed
不会随浏览器窗口的滚动条滚动而变化
总在视线里的元素
相对定位position:relative
定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在
其下的static定位的元素不会占据relative的原位置
relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式
绝对定位position:absolute
定位为absolute的层脱离正常文档流，但与relative的区别：其在正常流中的原位置不存在
其下的static定位（默认的文档流定位）的元素会占据obsolute的原位置
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层不一定是其直接父层
对于absolute定位的层，如果其父层中都未定义absolute或relative，则其将相对body进行定位
relative+absolute
0 条评论
下一页
