css：层叠样式展示，用于制作静态页面
css样式分为三大类：行间样式、内部样式、外部样式
- 行间样式：写在body中，缺点：该标签内所有，优先级最高。
- 内部样式：写在head中，缺点：该页面内所有，优先级比外部样式高。
- 外部样式：写在.css文件中，通过链接调用，整个工程所有，优先级最低，在实际开发中一般采用外部样式设计。例如<link rel="stylesheet"type="text/css" href="../css/test.css"/
1. 万能居中
1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模拟表格，all
6.绝对定位，50%减自身宽高
7.绝对定位，上下左右全0，margin:auto
8.绝对定位加相对定位。不需要知道宽高
9.IE6，IE7：给父元素设一个font-size:高度/1.14,vertical-align:middle
过度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>
2. BFC优化
块格式化上下文, 特性:
- 使 BFC 内部浮动元素不会到处乱跑；
- 和浮动元素产生边界。
3. 盒模型哪两种模式？什么区别？如何设置
- 标准模式: box-sizing: content-box; 宽高不包括内边距和边框
- 怪异模式: box-sizing: border-box
4. 常用清除浮动的方法，如不清除浮动会怎样？
当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.
- 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
- 父元素添加overflow:hidden; (触发BFC)
- 使用after伪元素清除浮动（推荐使用）
- 使用before和after双伪元素清除浮动
5. 删格化的原理
比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式
6. 纯css实现三角形
// 通过设置border
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}
7. 高度不定，宽100%，内一div高不确定，如何实现垂直居中？
- verticle-align: middle;
- 绝对定位50%加translateY(-50%)
- 绝对定位，上下左右全0，margin:auto
8. 至少两种方式实现自适应搜索
- rem, em
- 百分比
- 媒体查询
- bs, antd等的栅格布局
9. 设置一段文字的大小为6px
- 谷歌最小12px, 其他浏览器可以更小
- 通过transform: scale实现
10. css菊花图
四个小圆点一直旋转
// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s
11. 关于em
<div style="font-size: 20px">
123
<div style="font-size: 2em;width: 2em">456</div>
</div>
// 此时子元素的font-size为40px, 宽度为80px(还要乘以子元素font-size的系数)
12. 关于vh, vw
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
13. Flex布局
- flex-direction控制主副轴
- flex-wrap控制换行(默认不换行)
- flex-flow是上两个的结合
- justify-content主轴对齐方式
- align-items交叉轴对齐方式
14. overflow原理
-
overflow: hidden能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动 - 创建BFC条件(满足一个):
- float的值不为none；
- overflow的值不为visible；
- position的值为fixed / absolute；
- display的值为table-cell / table-caption / inline-block / flex / inline-flex。
15. 实现自适应的正方形:
- 使用vw, vh
-
width百分比,height: 0,padding-top(bottom): 50%
16. 标准模式和怪异模式
- document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。
- 怪异模式是为了兼容旧版本的浏览器, 因为IE低版本document.documentElement.clientWidth获取不到
- 怪异模式盒模型:
box-sizing: border-box; 标准模式:box-sizing: content-box
17. CSS3实现环形进度条
两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转
18. css优先级
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器*对特殊性没有贡献，即0,0,0,0。
- 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
19.定位position
定位分为四种：相对定位 relative，绝对定位 absolute，固定定位 fixed，没有定位 static。
**relative**：不脱离文档流，提升层级，一般作为父级元素，为子级元素的定位提供参考范围。
**absolute**：脱离文档流，提升层级，一般作为子级元素。
**fixed**：针对于窗口进行定位，脱离文档流，提升层级。加入针对body做固定定位。
无论鼠标怎么滚动，肉眼观察被定为的元素，位置都是不变的。
注意点：不管是那种定位，子级元素的位置都是针对于父级元素来定的。在实际开发中，子级元素需要定位，父级元素一般也会有定位。
如果父级有定位
绝对定位的子集元素都是针对父级在定位
使子div相对于父div垂直水平居中
.parent-div{
position: relative;
}
`方法一`
.child-div{
`设置绝对坐标系，然后设置top、left、right、bottom的值相等即可，不一定要都是0。并设置margin:auto;`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
`方法二`
.child-div{
`设置绝对坐标系，让left和top都是50%,这样让目标div的最左边与父级框体的最左相距50%,垂直方向相同.`
`然后再用transform:translate(-50%,-50%)将目标框体向左(上)平移自己宽度(高度)的50%`
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
20.animation:动画效果
设置动画 animation 时，需要设置三个参数：关键帧名称 时间（多长时间内完成动画展现） 是否循环（不写：默认不循环；infinite：无限循环）在设置完成动画后，需要创建@keyframes方法（关键真名称 同keyframes方法的名称）用大括号编写方法内的运动方式
#sina{
position: absolute;
left : 100px;
top ：100px;
amination :关键帧名称 10s infinite; /*三个参数中间只有空格 没有其他符号
}
@keyframes 关键帧名称{
0%{
left: xpx;
top: ypx;
}
....
....
100%{
left: wpx;
top: zpx;
}
}
21.外边距存在的问题
1.水平方向不存在叠压问题，两个元素水平距离取两个元素左右margin值之和。
2.垂直方向存在叠压问题，取上、下margin值得最大值。
3.在嵌套中，margin存在传递问题。当自己元素有上外边距时，父级元素没有外边距，
且该父级元素与该子级元素相邻（紧挨着），会造成该父级元素产生上外边距。
**margin的传递问题的解决方案：给父级元素加上外边框或添加内边距。**
22.表单标签 form
表单form：一切与数据交互有关的
action：数据提交的路径
method：提交方式（get,post二选一）
- get请求:会把请求参数，拼写在请求url的末尾，用问号？连接。以key1=value1&key2=value2的方式
一般情况下查询请求都是get，因为明文所以有安全隐患，但是效率较高，但有长度限制（1k） - post请求：会把请求参数放在“请求体”中，不是明文的。一般情况下用于数据的增删改。安全性有保证，长度无限制。
表单控件
input
name属性 表单控件的名字，与数据交互有关，很重要的属性
value属性：框内的数据最终都会传给value。表单控件的值，与数据交互有关，很重要的属性。
type属性
text 文本输入框
password 密码框中密码加密。
submit 提交按钮，将表单的所有数据提交到指定的action
reset 重置按钮，将表单重置
button 自定义按钮
radio 单选框，如果想互斥（只能选男或女），就需要将name属性相同，
checked="checked"默认为选中状态。
checked 默认选中
checkbox： 向后台传递的是value数组，如果没有相同的name，则向后台传递多个数组，
每个数组一个value。如果想传一个数组，多个value，必须统一name。
checked 1默认选中
image 有提交功能的图片
file 文件域，上传文件。
email 有邮箱格式校验的text
date 日期
hidden： 具有隐藏域。需要向后台传递内容，又不想在前台界面上看到。
hidden 隐藏域email属性：文本框校验是否含有@。
随机生成16进制的颜色代码
getColorRadom () {
let randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
while (randColor.length < 6) {
randColor = "0" + randColor;
}
console.log('randColor----->', "#" + randColor)
return "#" + randColor;
},
