css常用情景
场景1：如何把input和验证码放在一个框？
.valiateBox{width: 500px;position: relative;}
.valiateBox>input{
width: 100%;height: 30px;line-height: 30px;
}
.valiateBox>img{
width: 100px;height: 30px;position: absolute;right: 0px;top: 3px;
}
<div class="valiateBox">
<input type="text">
<img src="captcha.png" alt="验证码">
</div>
效果图：
image.png
场景2：chorme 浏览器记住密码后input黄色背景处理方法
解决方法：阴影覆盖
由于是设置颜色覆盖，所以只对非透明的纯色背景有效
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
场景3：placeholder在IE上面的兼容性
placeholder只兼容IE10及其以上的，如果兼容IE8？
解决方法一：http://www.jq22.com/jquery-info5830
/**
* 解决IE下不支持placeholder属性
* 可以根据自己的需要去扩展
* ps:写的很简单 根据自己的需求来 不喜勿喷
*/
;
(function($) {
$.fn.placeholder = function(options) {
var opts = $.extend({}, $.fn.placeholder.defaults, options);
var isIE = document.all ? true : false;
return this.each(function() {
var _this = this,
placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
if (isIE) {
_this.setAttribute("value", placeholderValue);
_this.onfocus = function() {
$.trim(_this.value) == placeholderValue ? _this.value = "" : '';
};
_this.onblur = function() {
$.trim(_this.value) == "" ? _this.value = placeholderValue : '';
};
}
});
};
})(jQuery);
//使用
if(!"placeholder" in document.createElement("input")){
$("input[type='text']").placeholder();
}
解决方法二：增加span标签
<div class="formContainer">
<img src="imgs/user.png" class="usernameImg">
<input type="text" class="username" name="username" placeholder="用户名">
<span class="usernamespan hidden placeholder">用户名</span>
</div>
image.png
思路：
1、如果浏览器不支持placeholder，span的定位到input上面显示placeholder内容。默认span全部显示
2、如果点击span，就input.focus
3、如果input.focus，处理span隐藏
4、如果input.blur，处理根据内容，span隐藏或者显示
场景4：浏览器刷新没有清空表单
参考文章：https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
input[type='text'] form设置 autocomplete="off"
场景5：label和input搭档使用
<div>
<label><input type="radio" name="fruits">苹果</label>
<label><input type="radio" name="fruits">香蕉</label>
<label><input type="radio" name="fruits">西瓜</label>
</div>
<div>
<input type="radio" name="animals" id="cat">
<label for="cat">猫</label>
<input type="radio" name="animals" id="dog">
<label for="dog">狗</label>
<input type="radio" name="animals" id="pig">
<label for="pig">猪</label>
</div>
场景6：居中
1、行内元素水平和垂直居中
.parent{
width: 200px;
height: 200px;
border: 1px solid rebeccapurple
}
.child{
width: 60px;
line-height:60px;
height: 60px;
border:1px solid darkorange;
text-align: center
}
<div class="parent">
<div class="child">内容</div>
</div>
划重点：text-align:center；line-height: 60px;height:60px
以下代码都沿用parent，child
2、块级元素水平和垂直居中
方式一：
.parent-1{position: relative;}
.child-1{
position: absolute;
top: 100px;
left: 100px;
margin-top: -30px;
margin-left: -30px;
}
划重点：
parent position:relative;childposition:absolute;
topparent的height/2;leftparent的width/2;
margin-topchild的height/2;margin-bottomchild的width/2
方式二：
上述情况用于元素自身宽高是固定的情况，当宽高不固定时，我们就无从知晓元素该偏移多少距离。以下方式：
.parent-1{position: relative;}
.child-1{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
transform: translate(-50%,-50%)//当采用百分比写法时，移动距离是相对自身的宽高，例如此处是本身宽高的10%
方式三：
.parent-1{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
方式四：
.parent3{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child3{
margin-right: auto;
margin-left: auto;
}
3、块级元素水平居中-子元素增加margin-left:auto;margin-right:auto;
场景7：F5与CTRL+F5区别，浏览器缓存机制
转载：https://blog.csdn.net/guanfl/article/details/78487855
1、F5进行页面刷新时会向服务端发送If-Modify-Since请求头到服务端，服务端返回304 Not Modified，浏览器则使用本地缓存；
image.png
2、CTRL+F5进行页面刷新的直接从服务端获取。返回HTTP状态码200；原因：Ctrl+F5在发出请求时，会在请求消息头中加入Cache-Control:no-cache，Pragma:no-cache参数
image.png
场景8：jquery validate在IE8上面的兼容性处理
$('form').submit(function() {
if ($('form').valid()) {
login();
}
return false;//永远禁止页面表单提交
});
场景9：swipper IE8上面的兼容性
使用swipper2：https://2.swiper.com.cn/，并增加如下代码
.swiper-container{width:100%;height:500px;}
.pagination{
position:absolute;
bottom:10px;
z-index:20;
width:100%;
text-align:center;
}
.swiper-pagination-switch{
display:inline-block;
margin:0 5px;
width:8px;
height:8px;
border:1px solid #fff;
border-radius:8px;
background:#555;
opacity:.8;
cursor:pointer;
}
.swiper-active-switch{background:#fff;}
场景10： float浮动问题
.pull-left{float:left}
.pull-right{float:right}
<div class="parent">
<div class="child pull-left">向左</div>
<div class="child pull-right">向右</div>
</div>
子元素浮动，父元素没有高度
解决方法一：
<div class="parent">
<div class="child pull-left">向左</div>
<div class="child pull-right">向右</div>
<div class="clear"></div>
.clear {clear: both;}
</div>
解决方法二：设置父元素float
解决方法三：父元素设置overflow:hidden;或overflow:auto;
解决方法四：
<div class="clearfix parent"></div>
.clearfix:after{
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
场景11：去掉浏览器默认边框
*:focus { outline: none; }
场景12： 背景图片的平铺实现
background-size：100% 100%;---按容器比例撑满，图片变形
background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变
.banner {
background-image: ;
height: 515px;
background-position: center center;
background-size: cover;
}
场景13：容器问题：屏幕/浏览器/页面
页面依赖浏览器，浏览器依赖屏幕
容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。
屏幕：
屏幕高度（screen.height）=屏幕可用高度（screen.availHeight）+任务栏高度
屏幕宽度（screen.width）=屏幕可用宽度（screen.availWidth）+任务栏宽度
screen.height:1024
screen.width:1280
screen.availHeight:984
screen.availWidth:1280
浏览器
浏览器高度（window.outerHeight）
浏览器内页面可用高度（window.innerHeight）包含滚动条高度
浏览器宽度（window.outerWidth）
浏览器内页面可用高度（window.innerWidth）包含滚动条宽度
window.outerHeight：984
window.outerWidth：1280
window.innerHeight：565
window.innerWidth：1164
页面
body总高度(body.offsetHeight )
body总宽度(body.offsetWidth )
body展示的高度(body.clientHeight)
body展示的宽度(body.clientWidth)
document.body.offsetHeight :565
document.body.offsetWidth:1164
document.body.clientHeight:565
document.body.clientWidth:1164
滚动条高度=浏览器内页面可用高度(window.innerHeight)
- body展示高度(body.clientHeight)
滚动条宽度=浏览器内页面可用宽度(window.innerWidth)
- body展示宽度(body.clientWidth)
常用属性
position:static(默认) /relative/absolute/fixed(相对于浏览器)
relative/absolute/fixed 可以使用z-index
relative与absolute的主要区别：
1、relatvie脱离正常的文本流中，但其在文本流中的位置依然存在；absolute脱离正常的文本流，但其在文本流中的位置不存在
2、relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式；absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
fixed
position:fixed
当position:fixed，设置top/left/right/bottom，与不设置之间的区别?
如果没有设置left、top、right、bottom属性的时候，会相对于父级元素进行定位，如果设置了left、top才会相对于窗口进行定位。
position:absolute
一个元素绝对定位，
如果只设置left 或right , 他会在有定位的父级内，在正常文档流位置的基础左右移动；
如果只设置top 或botttom,则在正常文档流决定的位置上下移动；
如果只设置left:0; right:0; margin:auto; 子元素可以水平居中；
如果只设置bottom:0; top:0; margin:auto; 子元素可以垂直居中；
选择器优先级如何确定？
1、选择器越具体，优先级越高。#xxx 大于 .yyy
2、同样优先级，写在后面的覆盖前面的。
3、color:red !important；优先级最高。
