css知识点

1.清除浮动的方法

方法一：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。

优点：代码简洁 缺点：高度被固定死了，是适合内容固定不变的模块。

方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both})

原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。

方法三：让父级div 也一并浮起来

让父级浮动起来了，又会产生新的浮动问题。 不推荐使用

方法四：父级div定义 display:table

原理：将div属性强制变成表格 优点：不解 缺点：会产生新的未知问题

方法五：父元素设置 overflow：hidden、auto；

优点：代码简介，不存在结构和语义化问题 缺点：无法显示需要溢出的元素。

方法六：父级div定义 伪类:after 和 zoom

.clearfix:after{

    content:'.';

    display:block;

    height:0;

    clear:both;

    visibility: hidden;
}

.clearfix {zoom:1;}

优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）

缺点：代码不是非常简洁（极力推荐使用）

经益求精写法

.clearfix:after {

    content:”200B”; 

    display:block; 

    height:0; 

    clear:both;
 }

.clearfix { *zoom:1; } 照顾IE6，IE7就可以了

2.CSS隐藏元素的几种方式及区别

display:none

1.元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

2.不会触发其点击事件

visibility:hidden

1.和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

2.无法触发其点击事件,适用于那些元素隐藏后不希望页面布局会发生变化的场景.

opacity:0

1.将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

2.和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

3.可以触发点击事件

设置元素的position与left，top，bottom，right等，将元素移出至屏幕外

设置元素的position与z-index，将z-index设置成尽量小的负数

3. 基于伪元素的图片内容生成技术

需求：图片还没加载时就把 alt 信息呈现出来。

实现：图片没有 src ，因此，::before和::after 可以生效，我们可以通过 content 属性呈现 alt 属性值。

img::after{

    /* 生成 alt 信息 */
    content: attr(alt);

    /* 尺寸和定位 */
    postion:absolute; bottom: 0;

    100%;

    background-color:rgba(0,0,0,.5);

    transform: translateY(100%);

    transition: transform .2s;
}

img:hover::after{

    transform: translateY(0);
}    

4.轻松实现hover图片变成另外一张图片

img:hover{

    content: url(laugh-tear.png);

}

content 改变的仅仅是视觉呈现，当我们鼠标右键或其他形式保存这张图片时，

所保存的还是原来 src 对应的图片。这种方法还可以用在官网标志上。

由于使用 conetnt 生成图片无法设置图片的尺寸，要想在移动端使用该技术，建议使用SVG图片。

5.消除图片底部间隙的方法

1.图片块状化 - 无基线对齐：img { display: block; }

2.图片底线对齐：img { vertical-align: bottom; }

3.行高足够小 - 基线位置上移：.box { line-height: 0; }

6.CSS 引入的方式有哪些? link 和@import 的区别是?

有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)

link和@import的区别：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

7.元素垂直水平居中

//flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
//grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}
//transform 方案: 存在兼容问题：  未知宽高
.box {
  position: relative; 
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);    
}
//定位
.box-container{
     position: relative;
  }
.box {
   100px;
  height: 100px;
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0;
  margin: auto;
}
//table
.box {
      position: relative;
	 300px;
	height: 300px;
	border: 1px solid red;
	display: table-cell;	
	text-align: center;	
	vertical-align: middle;
}

8.display相关

1. block:div等容器类型

2. inline:img span等行内类型

3. table系列：将样式变成table类型

4. flex:重点把握，非常强大

5. grid:同上

6. inline-block:可设置宽度，两者间有一点间隙

7. inherit:继承父级