114 lines
4.2 KiB
Plaintext
114 lines
4.2 KiB
Plaintext
box-shadow 盒子阴影模糊度
|
||
z-index 调整元素z轴的浮动层级 取值无范围，数值越大，越靠前
|
||
如果都没设置z-index，或者 z-index 都一样，那么按照顺序来堆叠，越靠后，堆的越高
|
||
|
||
margin:0 auto 块标签内部中还有一个块标签文本居中
|
||
！important 重要的 提升css属性的优先级运行
|
||
|
||
伪类选择器：
|
||
：hover 当鼠标悬浮时
|
||
：before 在每个元素之前插入内容
|
||
：after 在每个元素之后插入内容
|
||
：nth-child 传入表达式选择
|
||
：first-child 选择第一个
|
||
；last-child 选择第最后一个
|
||
|
||
组合写法：
|
||
选择器1 选择器2: 选择 标签1 中 的 标签2 无视层级 简写：嵌套关系
|
||
选择器1 > 选择器2: 选择 父标签为1 中 的 2标签 简写：嵌套关系
|
||
选择器1,选择器2: 同时选中 标签1和2
|
||
选择器1+选择器2: 选中同级 紧跟在 标签1 后面 的标签2
|
||
|
||
css 属性名：
|
||
字体：font-size 设置字体大小 font-width 设置字体加粗（bold最粗）
|
||
颜色：color 设置颜色
|
||
|
||
标签内部文本居中：
|
||
text-align ：center 水平方向居中 文字在父元素的宽度内部居中
|
||
line-height 水平方向居中垂直居中 数值和父元素的高度一样
|
||
注意：只针对单行文字 父元素内部子元素的居中方式
|
||
|
||
margin:0 auto 块标签内部中还有一个块标签文本居中
|
||
|
||
|
||
vertical-align 垂直居中
|
||
|
||
|
||
设置背景图background：background-repeat 重复(no-repeat 不重复) background-position 设置背景图定位
|
||
background-size cover 图片大小宽高不合适的时候使用
|
||
|
||
letter-spacing 字符之间的间距（x轴）
|
||
display:可以隐藏显示元素，将块 和 行 进行转换
|
||
inline -block 转换为 行 内 块标签 同时具有行标签 放在一行的特性，还具有块标签可以设置宽高的特性
|
||
none 隐藏元素
|
||
|
||
盒子模型：
|
||
内边距(padding) 外边距(margin) 边框(border) 内容(center)
|
||
padding 和 margin 写法一样
|
||
|
||
padding 会让元素变大
|
||
宽=左右边距 高=上下边距
|
||
|
||
solid 实线边框
|
||
|
||
margin: 10px; /** 同时对 上右下左 四个方向设置一样的数值**/
|
||
margin: 10px 20px; /** 同时对 上下 左右 设置数值 **/
|
||
margin: 10px 20px 30px; /** 对 上 左右 下 设置数值 **/
|
||
margin: 10px 20px 30px 40px; /** 上 右 下 左 **/
|
||
|
||
盒子模型的计算规则：
|
||
标准盒子模型：
|
||
|
||
元素真实宽高 = 你写的宽高（content宽高） + padding & border
|
||
|
||
在你写的宽高 基础上向外拓张
|
||
|
||
怪异盒子模型 box-sizing: border-box; ：
|
||
|
||
content 宽高 = 你写的宽高（元素真实宽高） - padding & border
|
||
|
||
在你写的宽高 基础上向内缩减
|
||
|
||
|
||
浮动：
|
||
注意：
|
||
浮动会让元素从原本的位置删除（文档流中删除），下面的元素会钻下去
|
||
|
||
如何解决：
|
||
|
||
1：clear: both; 加在受影响的那个元素上
|
||
2：手动加高度
|
||
3：overflow: hidden;
|
||
|
||
float: left right
|
||
|
||
border-radius 设置圆角(100%变成圆)
|
||
|
||
|
||
定位 position；
|
||
相对定位：relative 绝对定位：absolute 固定定位：fixed
|
||
|
||
z-index 调整元素z轴的浮动层级 取值无范围，数值越大，越靠前
|
||
如果都没设置z-index，或者 z-index 都一样，那么按照顺序来堆叠，越靠后，堆的越高
|
||
|
||
|
||
垂直方向居中：top: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
|
||
json 就是数组和对象的各种组合
|
||
// JSON.stringify 把对象或者数组转 string
|
||
// JSON.parse 把string 格式的对象，数组，转为对象数组
|
||
|
||
|
||
|
||
|
||
Vue
|
||
|
||
为什么组件内部的data必须是一个方法？？
|
||
答：因为组件会多次被使用，如果不是方法的话那么组件内部的变量 会被上一次使用污染
|
||
如果定义一个方法 每次调用的都是全新的值 不会产生变量之间的相互污染
|
||
|
||
|
||
|
||
|