CSS(一)

● 说一下css盒模型

简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值哦):border-box,padding-box,content-box.

这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子模型中,width表示content+padding+border这三个部分的宽度,故这使得在计算整个盒子的宽度时存在着差异:

标准盒子模型的盒子宽度:左右border+左右padding+width
IE盒子模型的盒子宽度:width

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆,包含什么,width就从什么开始算起。

● 画一条0.5px的线

1.采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

viewport只支持移动端。

2.采用transform: scale()的方式

transform: scale(0.5,0.5);

● 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(语法篇)

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

简单的分为容器属性元素属性

容器的属性
flex-direction:决定主轴的方向(即子item的排列方法)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

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

flex-flow
.box {
flex-flow: || ;
}

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

比如说,用flex实现圣杯布局

● BFC(块级格式化上下文,用于清楚浮动,防止margin重叠等)

直译成:块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。

BFC区域不会与float box重叠

BFC是页面上的一个独立容器子元素不会影响到外面

计算BFC的高度时,浮动元素也会参与计算,可以用来解决浮动元素父元素高度塌陷问题

那些元素会生成BFC

根元素

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption,flex,inline-flex的元素

overflow不为visible的元素

CSS(一)

上一篇:js变量


下一篇:php 遇到问题记录(1)