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;
width: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 {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
//table
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
8.display相关
-
block:div等容器类型
-
inline:img span等行内类型
-
table系列：将样式变成table类型
-
flex:重点把握，非常强大
-
grid:同上
-
inline-block:可设置宽度，两者间有一点间隙
-
inherit:继承父级
