语言教程
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 条评论
下一页