HTML/CSS

如何垂直居中一个浮动元素

1. 父盒子有宽高

父元素相对定位，子元素绝对定位，top：50%；left：50%。margin负的左右二分之一的height，width`

.content{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
float: left;
height: 100px;
background-color: #ff6700;
margin-top: -50px;
margin-left: -50px;
}
2.父盒子没有高宽

父盒子相对定位，子盒子决定定位，上下左右都为0，margin：auto；

.content{
    width: 200px;
    height: 200px;
    background-color: #ff6700;
    float: left;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

css的三大特性以及选择器的优先级

css三大特性：继承、优先级、层叠 选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 >
继承

简单说一下盒模型

盒模型: 内容 + padding + border + margin

有用过less这种预编译吗?用过它的那些方法

less是对css进行一个预编译,它重新定义了css样式的书写,样式可以嵌套,同时还定义了变量和函数

<!--定义变量-->
@color: #ccc;
.content{
  background-color:@color;
}
<!--定义函数-->
.textCenter(@marginT: 10px){
  text-align:center;
  margin-top:@marginT;
}

Css3颜色渐变有那两种

线性渐变所用的属性是linear-gradien 径向渐变用到的属性是radial-gradient

说说H5和C3新增了那些特性

H5主要新增了一些语义化标签，比如header,nav,main等等，还有音频视频，本地存储等技术。
Css3新增了一些属性选择器，伪类选择器，过度transition，2D3D旋转transform，动画animation等

实现页面间通信有那些方法,他们有什么区别

可以使用H5新增的本地存储技术localstorage, 将数据存储到本地硬盘 使用cookie存储,sessitionStorage
区别:cookie兼容性较好,但是存储体积小只有时4kb,生命周期短,会话结束数据就消失,而且不安全容易被劫持。而其他两者不一样,存储体积大,存储时间长,除非手动删除否则不会消失。

说一下rem和em的区别

在css中的单位主要有px,em,rem px单位是固定的像素,一但设置就无法适应页面大小而改变
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em相对于父元素，rem相对于根元素(参照的是html)

说一下flex弹性布局的属性

justify-content： //子元素水平排列的方式
                center  //居中
                space-between  //两端对齐
                space-around   // 子元素拉手分布
                flex-start     // 居左
                flex-end      //居右

align-items  ：  // 子元素的垂直居中的排列方式
                enter    // 居中
                flex-end   //底部
                flex-start   //开始

align-content :  //多行的时候，子元素的垂直排列方式
                 center    //居中
                 flex-end   //底部
                 flex-start   //开始
                 flx-direction：  // 排列方式row 横向排列
                 row-reverse    //横向反向排列

flex-wrap ： //子元素是否在一行显示
                no-wrap   //不换行
                wrap    //换行

控制元素显示隐藏有那些方式,有什么区别

display:none和visibility:hidden display:none控制隐藏的元素不占位置
visibility:hidden隐藏元素,但保留元素空间