前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录
弹性布局：
定位：
overflow溢出:
表单:
vue数据存取:
vuex store 全局数据:
vux弹窗，软提示，硬提示
ElementUI MessageBox 弹框简单用法
背景设置（简单，记录下）
字体设置
html div 禁止点击
弹性布局：
所有主流浏览器都支持 display 属性
display:inline // 默认,显示为内联元素不带换行符
----none // 此元素不会被显示
----block // 显示为块级元素带有换行符
----inline-block // 行内块元素
----list-item // 此元素会作为列表显示
----table // 作为块级表格来显示，表格前后带有换行符
----inline-table // 作为内联表格来显示，表格前后没有换行符
----inherit // 规定应该从父元素继承 display 属性的值
---- ... ... // 省略
display: flex; ----// 弹性布局 盒子，使用后浮动失效 所有浏览器支持
1、flex-direction:row; 沿水平主轴让元素从左向右排列
flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
2、flex-direction:row-reverse;沿水平主轴让元素从右向左排列
3、flex-wrap: nowrap; (默认)元素不换行// 会挤变形
flex-wrap: wrap; 元素换行
4、justify-content:
justify-content:flex-start |// 从左边（或者上）开始
flex-end | // 从右边（或者下）排列
center | // 居中对齐，从左右或上下排列
space-between | // 周围留白元素之间两侧的间隔相等
space-around// 外侧，两端也留白
5、align-items:
flex-start| // 靠上对齐
flex-end| // 靠下对齐
center| // 上下居中对齐,
space-between| //
space-around|
stretch| // 默认值。元素被拉伸以适应容器
baseline| // 行内轴与侧轴为同一条时与'flex-start'等效，其它情况下靠上对齐
6、align-content
align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠
align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠
align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠
align-content: center; 元素被拉伸以适应容器。如果剩余的空间是负数，等效于'flex-start'。
align-content: space-between;元素位于各行之间留有空白的容器内。各行平均分布。
align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行平均分布，
两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效
于'center'。
如果不想让子元素的发生伸缩 则可以在子元素中设置样式： flex-shrink: 0
关于主轴方向：
在父元素中设置 flex-direction的值为 column 为y轴为主轴 默认 row 为 x轴为主轴
flex-grow属性用来控制子元素沿主轴方向的大小。它的默认值是0，若将某个子元素的值设为大于0的数，
那么它就会变得比同行的其他元素更宽。
flex子元素上的属性（如果想让哪个子元素位置向前靠拢，则可以控制order的值越小则越靠前）定位：
position定位
static // 默认值。没有定位
absolute //生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
relative //生成相对定位的元素，相对于其正常位置进行定位
fixed //生成绝对定位的元素，相对于浏览器窗口进行定位
absolute 绝对定位 针对于父级 position 非static 的 元素进行定位
position: absolute;top: 90px"
relative 是针对于 自己原有位置 进行定位 ，当其移开后 原有位置依然被占据 其他元素则不能占据
position: relative;top:50px"
fixed 固定位置 针对的浏览器窗口
position: fixed;top: 50px;left: 100px"overflow溢出:
overflow：定义溢出元素内容区的内容会如何处理
属性 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容表单:
单行文本框：
密码域：
多行文本框：
复选框：
单选按钮：
下拉菜单：
列表：
文件域：
提交按钮：
重置按钮：
图像域：
隐藏域：
普通按钮：
图像过分拖拽影响布局
1、添加resize:none;
2、添加max-height，max-width
type 元素类型:text, password, checkbox, radio, submit, reset, file, hidden, image, button
size
如果type为text或password，则表单元素的大小以字符为单位。
对于其他输入类型，宽度以像素为单位
maxlength
指定可在text或password元素中输入的最大字符数。默认为无限大
table:
1、cellpadding: 单元格边距
2、cellspacing :单元格间距
3、colspan : 列跨度 左右
4、rowspan : 行跨度 上下,可选：thead、tbody、tfoot
vue数据存取:
localStorage 缓存
localStorage.setItem('key',value); // 存（普通类型）
localStorage.setItem('key',JSON.stringify(object));// 存（对象）
JSON.parse(localStorage.getItem("key"); // 取（对象）
localStorage.getItem("key"); // 取
localStorage.removeItem('key'); // 删除
localStorage.clear(); // 清空所有
vuex store 全局数据:
嵌套app使用localStorage 需要app开通权限，vuex store不受影响
cnpm install --save vuex //安装
store.index.js
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
state:{
count:0,
list:{}
}, // 引入 main.js
//改变state中的count数据、
mutations: {
increment(state){ //调用 this.$store.commit("increment", "");increment方法名
state.count++;
},
saveList(state, data) { //调用 this.$store.commit("saveList", "value");
state.list = data //取出 this.$store.state.list;
},
}
})vux弹窗，软提示，硬提示
安装vux
npm install vux --save
npm install vux-loader --save-dev
npm install less less-loader --save-dev
对build文件夹下的webpack.base.conf.js 文件进行配置，代码放下文
loading / toast / alert全局使用
main.js
import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
Vue.use(LoadingPlugin);
Vue.use(ToastPlugin,{position: 'top'});
Vue.use(AlertPlugin);
使用
// LoadingPlugin, 加载提示
this.$vux.loading.show({
text: '加载中...'
});
this.$vux.loading.hide();// 隐藏
// ToastPlugin, 软提示，text内容，支持html
this.$vux.toast.show({
text: '购买成功'
})
this.$vux.toast.text('hello', 'top'); //显示文字 top 顶部，middle 中部，bottom 底部
this.$vux.toast.hide(); // 隐藏
// AlertPlugin, 硬提示
this.$vux.alert.show({
title: '提交成功',
content: '您的申请已经提交，处理结果将在三日之内发送到您的手机',
onShow () {
console.log('onShow'); // 提示时执行
},
onHide () {
console.log('onHide'); // 关闭时执行
}
})
this.$vux.alert.hide(); // 隐藏
import { ConfirmPlugin } from 'vux';
Vue.use(ConfirmPlugin);
this.$vux.confirm.show({
title: '警告',
content: '该网站不安全，是否继续访问',
// 组件除show外的属性
onCancel : () => {
console.log("onCancel") //取消执行
},
onConfirm : () => {
console.log("onConfirm") //确定执行
}
});ElementUI MessageBox 弹框简单用法
MessageBox：
this.$confirm(
"您确认要重置密码吗？重置密码之后，用户将自动退出登录，默认密码为000000" ,
"系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,//属性设置为true，message 就会被当作HTML片段处理
type: 'warning',//消息类型，用于显示图标success/ info/ warning/ error
center: true //将 center 设置为 true 即可开启居中布局
}).then(_ => {
console.log("确认");
// done();
})
.catch(_ => {
console.log("取消");
});
文档地址：https://element.eleme.cn/#/zh-CN/component/message-box
Dialog 对话框：
打开嵌套表单的 Dialog
// 将center设置为true即可使标题和底部居中-boolean
// visible 是否显示 Dialog，支持 .sync 修饰符 -boolean
// width Dialog 的宽度 -String
// fullscreen 是否为全屏 Dialog -boolean
// modal 是否需要遮罩层 -boolean
文档地址：https://element.eleme.cn/#/zh-CN/component/dialog效果：
webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require("webpack")
const themeConfig={
name: 'less-theme',
path: 'src/assets/theme.less'
};
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const vuxLoader = require('vux-loader')
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
'babel-polyfill': 'babel-polyfill',
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', 'less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@static': resolve('static'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
options:{
plugins:['syntax-dynamic-import']
},
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
},
}
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
externals:{
"BMap":"BMap",
"wx": "wx",
},
}
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui',themeConfig] })
三级导航：https://www.jianshu.com/p/464c7eae7f70
icon: https://www.runoob.com/font-awesome/fontawesome-icons-chart.html
背景设置（简单，记录下）
/* 加载背景图 */
background: url("../static/images/index/backImg.jpg") no-repeat;
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: rgba(41, 50, 39, 1);
url(images/beijing.png)——图片路径的位置；
no-repeat—— 图片不重复；
center 0px——center是距离页面左边的定位，0px是距离页面上面的定位；
background-position: center 0——就是图片的定位，同上；
background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；
min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小字体设置
line-height:文字在此行的高度中垂直居中
line-height:
2em;文字内容占2倍行高,
em是参照当前文字的实际文字大小
需要设置字体大小，否则为默认高度,line-height: 98px
text-indent: 2em;——首行缩进两个字符
font-weight: 700;——文字粗细,正常粗细400,加粗700
font-style:italic;——文字倾斜
text-decoration: underline;——下划线 ；line-through——删除线
letter-spacing: 5px;——每个字符间的横向间距
text-align: center; 定义文字水平位置
border: 4px solid green;
font-size: 20px;
html div 禁止点击
disabled属性针对的是输入框下拉之类的, 有时候点击事件绑定在div上, 这时候disabled就不起效果了
pointer-events阻止元素成为鼠标事件
设置样式: style="pointer-events: none;"
/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;- auto与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
- none元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器
- /* SVG only */ 只适用于SVG, 对于浏览器来说，只有auto和none两个值可用
Js将json字符串转数组
var jsonstr = "[{'name':'xiaoming','age':'11'},{'name':'zhangsan','age':'18'}]";
var array = eval(jsonstr);
console.log(array); 
未完待续