css,html问题

css

1. 垂直居中：

   <div class="wrap">
   	<div class="cell">
   		<p>哈哈哈</p>
   	</div>
   </div>
   

   方法1：设置为表格：可以用vertical-align，优点：

   .wrap{
   	display: table
   }
   .call{
   	display: table-cell;
   	vertical-align: middle;
   }
   

   方法2：使用绝对定位：(水平同理)

   .wrap{
   	position:relative;
   }
   .cell{
   	position: absolute;
   	height: 240px;
   	top: 50%;
   	margin-top: -120px;
   }
   

   方法3：这个不是很能理解哦：

   .wrap{
   	float:left;
   	height: 50%;
   	margin-bottom: -120px;
   }
   .cell{
   	clear:both;
   	height: 240px;
   	position: relative;
   

   方法4：无边界水平居中

   .wrap{
   	position:absolute;
   	top:0;
   	bottom:0;
   	left:0;
   	right:0;
   	margin:0 auto;
   }
   

2. 无边界垂直水平居中：
   方法1：

   .wrap{
   	position: relative;
   }
   .centent{
   	width: 100px;
   	height:100px;
   	position: absolute;
   	top: 50%;
   	left: 50%;
   	transform: translate(-50%,-50%);
   }
   

   方法2：

   .wrap{
   	position:relative
   }
   .content{
   	width: 100px;
   	height: 100px;
   	position: absolute;
   	top:50%;
   	left: 50%;
   	margin: -50px 0 0 -50px;
   }
   

   方法3：无边界水平垂直居中

   .wrap{
   	position: relative;
   }
   .content{
   	position: absolute;
   	margin: auto;
   	top:0;
   	bottom: 0;
   	left: 0;
   	right: 0;
   }
   

   方法4：flex布局，设置父元素的属性就好

   .wrap{
   	display: flex;
   	justify-content: center;
   	aligh-item: center;
   }
   

   div中的文字内容居中(div有高度宽度)：

<div class="box">我要居中</div>

.box{
	width: 200px;
	height:200px;
	line-height: 200px;
	text-align: center;
	
}

高度等于屏幕高度

```
.container{
	display: flex;
	height: 100hv;
	flex-direction: colunm;
}
```

垂直3等分

圣杯布局

img的margin，白边问题

在div中的img在margin padding 为0，且broder为none的情况下依然存在白边，原因在于，
img标签默认情况下display:inline-block; img在div中的白边就是因为inline-block；造成的，
所以此时将img的display设置为block；白边就消失了

inline-block元素之间有间隙的问题

1. 标签之间连着

// a是一个inline-block，a之间会有间隙
<div>
	<a>元素</a>
	<a>元素</a>
	<a>元素</a>
</div>
//解决1：
<div>
	<a>元素</a><a>元素</a><a>元素</a>
</div>
// 解决2
<div>
	<a>
	元素</a><a>
	元素</a><a>
	元素</a>
</div>
// 解决3：
<div>
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>
// 解决4：只要一个闭合标签的写法
<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

2. 使用margin负值：margin-right:-3px(一般-3或者-4，不同浏览器不同，不建议)
3. 使用font-size:0

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}
.space a {
    font-size: 12px;
}

4. 使用letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

img在div居中

设置padding-top: 为img的25%高度的值

清除浮動

.clearfix:after{
  content:"";
  height:0;
  line-height:0;
  display:block;
  visibility:hidden;
  clear:both
}
.clearfix{
  zoom:1;
}

选择器优先级

1.总结排序：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS3新特性

1. CSS3的选择器

   1）E:last-child 匹配父元素的最后一个子元素E。

   2）E:nth-child(n)匹配父元素的第n个子元素E。

   3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E

2. 圆角:border-radius

3. 阴影：text-shadow: 5px 2px 6px rgba(64,64,64,0.5)

4. css弹性盒子模型:

.boxcontainer {   
    width: 1000px;   
    display: -webkit-box;   
    display: -moz-box;   
    -webkit-box-orient: horizontal;   
    -moz-box-orient: horizontal;   
}   
              
 .item {   
    background: #357c96;   
    font-weight: bold;   
    margin: 2px;   
    padding: 20px;   
    color: #fff;   
    font-family: Arial, sans-serif;   
} 

5. 弹性盒子常用属性：

 justify-content：横轴上的对齐方式
 align-items:纵轴上的对齐方式
 flex: 

6. 媒体查询：@media

BFC规范

1. 概念：格式化上下文，是盒模型布局的CSS渲染模式
2. 如何创建：
   • 浮动元素，float 除 none 以外的值；
   • 定位元素，position（absolute，fixed等）；
   • display 为以下其中之一的值 inline-block，table-cell，table-caption；
   • overflow 除了 visible 以外的值（hidden，auto，scroll）;
3. 原理:
   • 内部的Box会在垂直方向上一个接一个的放置。
   • 垂直方向上的距离由margin决定
   • bfc的区域不会与float的元素区域重叠。
   • 计算bfc的高度时，浮动元素也参与计算
   • bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
4. 解决什么问题：
   • 清除浮动
   • 外边距重叠

移动端适配方案，及实践

1、viewport配置width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。
2、使用rem,dpr默认为1
3、实践：使用手淘的Flexible实现

下载js资源，http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js。这个js会根据设备帮你计算html的font-size
使用rem–设计稿为750px,页面十等分，1rem=75px, 320px宽度就是320/75=4.26rem
4、进销存轻应用

<script type="text/javascript">
      var currClientWidth,fontValue,originWidth;
			//originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）
			originWidth=375;
			__resize();
			//注册 resize事件
			window.addEventListener('resize', __resize, false);
			function __resize() {
			    currClientWidth = document.documentElement.clientWidth;
			    //这里是设置屏幕的最大和最小值时候给一个默认值
			    if (currClientWidth>640){currClientWidth = 640};
			    if (currClientWidth<320){currClientWidth = 320};
			    fontValue = ((625 * currClientWidth) /originWidth).toFixed(2);
			    document.documentElement.style.fontSize = fontValue + '%';
			}
    </script>

em rem rpx

link和import的区别

link 是一个html 的一个标签 ，而@import 是css 的一个标签
link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css
用作换肤功能时，用link。用javascript去控制默认显示的样式title就ok了
link 的加载会在页面显示之前全部加载完全，而 @import 会是读取完文件之后加载，所以如果网速很好或很快的情况下，会出现先开始无css定义，而后加载css定义。@import加载页面时开始的瞬间会有闪烁 （无样式表的页面），然后才恢复正常（加载样式后的页面），Link没有这个问题。

input与inline元素便签不对齐（比如做一个搜索框）

input{ vertical-align: top }

cell表格实现下划线

.cell:after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 1px;
  left:0;
  right:0;
  bottom:0;
  border-bottom:1px solid #E6E6E6;
}
/* 用于第一行的顶部线 */
.cell:before{
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 1px;
  left:0;
  right:0;
  top:0;
  border-bottom:1px solid #E6E6E6;
}

关于背景图片填充

一般设置background:url()no-repeat center;
background-size: 100% 100%; 这是为了当屏幕宽度超出图片宽度时整屏幕填充，当然，之前的高度写死图片高度，就能是拉伸的效果