2018-11-28 | UNLOCK

前端知识(CSS篇)

link标签和import标签的区别

link属于html标签,而@import是css提供的
页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

transition和animation的区别

Animation和transition大部分属性是相同的,他们都是随时间改变元素的属性值,他们的主要区别是transition需要触发一个事件才能改变属性,而animation不需要触发任何事件的情况下才会随时间改变属性值,并且transition为2帧,从from …. to,而animation可以一帧一帧的。

Flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool(语法篇)
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html(实例篇)
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

简单的分为容器属性和元素属性
容器的属性:
flex-direction:决定主轴的方向(即子item的排列方法)

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap:决定换行规则
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content:对其方式,水平主轴对齐方式

align-items:对齐方式,竖直轴线方向

项目的属性(元素的属性):

order属性:定义项目的排列顺序,顺序越小,排列越靠前,默认为0

flex-grow属性:定义项目的放大比例,即使存在空间,也不会放大

flex-shrink属性:定义了项目的缩小比例,当空间不足的情况下会等比例的缩小,如果定义个item的flow-shrink为0,则为不缩小

flex-basis属性:定义了在分配多余的空间,项目占据的空间。

flex:是flex-grow和flex-shrink、flex-basis的简写,默认值为0 1 auto。

align-self:允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items,默认属性为auto,表示继承父元素的align-items

垂直居中的方法

第一种 margin:0 auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//css
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
1
2
3
4
<!-- html -->
<div>
<img src="demo.jpg">
</div>

第二种 margin负值法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//css
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
/*或者将上面2个替换成 transform:translateX(-50%)和transform:translateY(-50%)*/
1
2
3
4
<!-- html -->
<div class="container">
<div class="inner"></div>
</div>

第三种(table-cell)

1
2
3
4
5
6
7
8
9
10
11
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}

第四种(flex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}

块元素和行元素的区别

块元素:独占一行,并且有自动填满父元素,可以设置margin和pading以及高度和宽度
行元素:不会独占一行,width和height会失效,并且在垂直方向的padding和margin会失
效。

多行元素的文本省略号

1
2
3
4
5
6
.div1{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}

css选择器

id 选择器,class 选择器,标签选择器,伪元素选择器,伪类选择器

让一个元素隐藏

1、display:none;
2、visibility:hidden;
3、opacity: 0;

了解一下盒模型 box-sizing

边距,边框,填充,和实际内容

block、inline、inline-block的区别。

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

css预处理器

sass、stylus、less