六、CSS

365psd、psd web、dribble.com

<一>重要概念

1.文档流

1）流动方向

inline 元素从左到右，到达最右边才会换行，不要在inline里写block元素

block 元素从上到下，每一个都另起一行

inline-block 也是从左到右

2）宽度

inline 宽度为内部 inline 元素的和，不能用 width 指定

block 默认自动计算宽度，可用 width 指定

inline-block 结合前两者特点，可用 width

3）高度

inline 高度由 line-height 间接确定，跟 height 无关

block 高度由内部文档流元素决定，可以设 height

inline-block 跟 block 类似，可以设置 height

4）overflow：hidden（隐藏溢出部分）、visible（显示溢出部分）、scroll（永远显示）、auto（灵活设置）

overflow-x\overflow-y

5）脱离文档流：

position：absolute/fixed

float：left

2.盒模型

 

1）content-box 内容盒 - 内容就是盒子的边界

border-box 边框盒 - 边框才是盒子的边界

2）公式

content-box width = 内容宽度

border-box width = 内容宽度 + padding + border

3）哪个好用

border-box 好用

4）margin上下合并：

<1>哪些情况会合并

父子 margin 合并

兄弟 margin 合并

<2>如何阻止合并

父子合并用 padding / border 挡住

父子合并用 overflow: hidden 挡住

父子合并用  display: flex，不知道为什么

兄弟合并是符合预期的

兄弟合并可以用  display: inline-block 消除

3.长度单位

1)px 像素

2)em 相对于自身 font-size 的倍数

3)百分数

4)整数

5)rem

6)vw 和 vh

4.颜色

1)十六进制 #FF6600 或者 #F60

2)RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)：a代表透明度

3)hsl 颜色 hsl(360,100%,100%)

<二>CSS布局

1.

2.float布局

1）步骤

子元素加float：left和width

父元素加.clearfix

2)经验

（1）最后一个块元素不加width，可以给一个max-width

（2）IE6/7:margin-left:10px + _margin-left:5px

or display:inline-block

3)利用负margin进行平均布局

代码：http://js.jirengu.com/wutigireje/1/edit?html,css,js,output

http://js.jirengu.com/darogaxeqa/1/edit

3.flex布局

1)container属性

flex-direction:row;/*row-reverse/column/colume-reverse*/

  flex-wrap:nowrap;/*wrap/wrap-reverse*/

  justify-content:space-between;/*space-around/space-evenly*/（横轴）

align-items:streach/center（纵轴）

align-content:streach/end/around/

2)item属性

(1)order可改变顺序

(2)flex-grow控制宽度（针对多余空间）

(3)flex-shrink:压缩宽度（针对多余空间）

flex-shrink:0防止变瘦

(4)flex-basis：基准宽度

(5)flex:flex-grow flex-shrink flex-basis

(6)align-self单独控制单个item

3)display：flex

 

4.grid布局

1）grid-temple-columns:40px 50px auto 50px 40px//横向布局

2）grid-temple-rows:25% 100px auto;//纵向布局

3）grid-row/column-start/end:第几根线

4）grid-（row/column）-gap:间隙

5）grid-template-areas:可放多个字符串

http://js.jirengu.com/fucucowafa/1/edit?html,css,output

5.CSS定位

1）div分层

2）position

<1>取值

(1)static:默认值（在文档流中）

(2)relative

升起来，在文档流中，位置偏移

给absolute元素做父元素

配合z-index使用

(3)absolute

找祖先元素第一个被定位的元素

ps：white-space：nowrap文字内容不转行

(4)fixed

以viewport为基准

(5)stiky粘滞定位   

<2>层叠上下文

（1）每一个层叠是一个新的小世界

（2）每个小世界的z-index与外界无关，只有同一个世界内才能相互影响

（3）opacity影响该整体内所有元素

 

6.CSS动画

1）各属性动画适用方式：https://csstriggers.com/

2）transform全解

transform:scale() rotate()

<1>translate

(1)translateX/Y/Z:**px

(2)translate(%,%),translateX/Y/Z(%):偏移自身长度的百分比

http://js.jirengu.com/wopahovika/1/edit?html,css,js,output

<2>scale缩放

(1)scaleX/Y(0.5/1.5)

(2)scale(1.5,0.5)

<3>rotate旋转

(1)rotate(1080deg)

(2)rotateX/Y

http://js.jirengu.com/wowonayaro/1/edit?html,css,output

<4>skew

(1)skew(1080deg)

(2)skewX/Y

<5>实例

跳动的心：http://js.jirengu.com/laboniloqa/1/edit?html,css,output

3）transition过渡

<1>补充中间帧

<2>transition:属性名 时长 过渡方式 延迟

<3>transition:left 200ms linear(匀速)

<4>可用逗号分隔两不同属性

<5>transition：left 200ms,top 400ms

<6>all代表全部属性 all 200ms

<7>过渡方式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/step-start/step-end/steps

<8>display:none->block没办法过渡,应该用visibility：hidden->visible

<9>background可以过渡

<10>opacity可过渡

<11>必须要有起始

<12>利用setTimeout或监听transitioned改编动画

http://js.jirengu.com/qupiluwonu/1/edit?html,css,output

4）animation

<1>@keyframes 名字{关键帧}(from to和百分数两种写法)

<2>forwards：动画执行后不回起始

<3>animation:时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名字

<4>方向：reverse/alternate/alternate-reverse

<5>天种模式：none/forwards/backward/both

<6>是否暂停：paused/running

<7>例子：http://js.jirengu.com/yitumituhi/1/edit