CSS知识总结

六、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.盒模型

CSS知识总结

 

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.

CSS知识总结

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分层

CSS知识总结

2)position

<1>取值

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

(2)relative

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

给absolute元素做父元素

配合z-index使用

(3)absolute

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

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

(4)fixed

以viewport为基准

(5)stiky粘滞定位   

<2>层叠上下文

CSS知识总结

(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

上一篇:编辑的时候获取默认值


下一篇:matlab gui simulink