前端开发工程师 - 01.页面制作

CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多模块)(2001)--CSS2.1修订(2007)--全面推广on-going（部分属性已经实现）

为了兼容不同浏览器，会将私有属性写在之前，把标准写在最后

其他类型：基本类型的组合：<'padding-width'>(padding-width和属性同名，需要加引号)、

选择器

类选择器：在标签内加入class属性和对应值（注：class的值可以是多个），.class_value {......}

className: naming convention 字母、数字、中划线、下划线；必须以字母开头，case sensitive

i.e. [href ^= "#"] {......} /*href属性值以#开头的元素*/ （若属性值是符号或里面包含了空格，需要用到引号）

一些属性会自动继承到所有子元素中，如：color, font, text-..., list-style等

其他不能自动继承的属性，如：background, border, position...，需要在属性中写上inherited

文本

font-size:12px; font-size:2pm; font-size:200%; 2pm & 200%指大小为父元素的两倍

generic-family：通用字体名称，如 serif衬线字体 | sans-serif非衬线字体 | cursive草书 | fantasy幻想体 | monospace等宽字体，系统/浏览器对某类通用字体会有默认字体

i.e. font-family: arial, Verdana, sans-serif; // arial和Verdana均为英文字体，arial在前，Verdana无效，中文字体未被前两者指定，使用sans-serif在浏览器/系统中默认的sans-serif

粗细：font-weight: normal | bold | bolder | lighter （bolder/lighter为相对的）

oblique：倾斜（字体无斜体时，强制倾斜（效果不好）；字体有斜体时，使用italic）

综合：font : [ [ || || || ]? [/]? ] | caption | icon | menu | message-box | small-caption | status-bar

font-size和font-family是必填项，有line-height时要写在font-size后面用slash隔开

middle | bottom | text-bottom | (参照物line-height) | (参照物baseline往上为正)

（负值为反方向缩进，若text-indent设为一个负极大值，则里面的文字将跑出容器，达到隐藏文字的目的）

normal (浏览器决定，一般为连续tab或空格会被合并，换行会被合并，自动换行) |

pre (保留换行、保留space和tab，不自动换行 -- 完整保留在代码中的格式) |

i.e. text-shadow:1px 2px 3px red; // x offset, y offset, shadow radius, shadow color

文字标注：text-decoration: none | [underline || overline || line-throught] // 可写多个

i.e. text-overflow:ellipsis; overflow:hidden; white-space:nowrap; // 需要都写上

盒模型

margin: [ | < percentage>参照物为父元素 | auto(浏览器自动分配) ]{1,4}

margin合并：毗邻元素外边距共享，父元素和第一个/最后一个子元素共享边距

x-offset, y-offset, 模糊半径(往外往内各1.5px)，阴影大小, 阴影颜色 --x、y偏移必须设置

背景

i.e. background-image: url(aaa.png), url(blue.png); 先引入的图片在上层，叠加显示

= repeat-x | repeat-y (只沿单方向平铺) | [ repeat(default) | space图片间有空隙(x轴上等分，y轴上等分，空隙大小由正好容下若干个平铺图片等分) | round图片进行伸缩(不是等比，使容器正好容下若干个平铺图片) | no-repeat]{1,2} 一到两个值：x方向 y方向

当background-repeat后面有缺省值时（少了和多图片的对应值），和前面的值相同

= scroll(default 背景不动) | fixed(滚动参照物为窗口) | local(背景跟着滚动)

background-position: right; / 100%; // 一个值时表示x轴，y轴为默认的center

background-position: right 10px top 20px; // 右边距离10px，上面距离20px

linear-gradient(45deg, red, blue); // 0deg时从下往上，顺时针旋转45度角的方向进行渐变

linear-gradient(red, green, blue); // 红变绿变蓝, color-stop缺省时自动平分空间

i.e. background-image: radial-gradient(closest-side, red, blue); // 最近两条边，形状默认椭圆

第一个box为background-origin，最后一个为background-clip，若只出现一个，则都是。

布局

display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

布局：将元素以正确的大小摆放在正确的位置上 -- 元素的摆放模式

block：默认宽度为父元素宽度（充满父元素），可设置宽高，相对于前后元素换行显示（元素摆放位置）

inline：默认宽度为内容宽度，不可设置宽高，同行显示 (在元素内换行)

inline-block: 默认宽度为内容宽度，可设置宽高，同行显示（可设置宽高的inline--区别，整块换行：若后面元素宽度超过可用空间，会整块换行，而inline可以在元素内换行??）

三行代码可以解决：

display: inline-block;

*display: inline;

*zoom: 1;

通过 *zoom: 1; 去出发hasLayout的行为，然后通过 *display: inline; 去支持IE7及以下版本（高版本会直接使用display: inline-block;）

当hasLayout和inline在一起的时候，就触发了inline-block的行为在IE7及以下版本

ref：https://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block

.content {margin:0 auto; width:978px;} // 浏览器自动平分水平方向空白

li, a{display:inline-block; width:..; height:...;} // 同行显示，可设置宽高--inline-block

relative：元素仍在文档流中，参照物为元素本身，可改变z轴的层级（覆盖其他元素）

absolute：默认宽度为内容宽度，脱离文档流（不占位置），参照物为第一个定位元素/根元素

fixed：默认宽度为内容宽度，脱离文档流，参照物为视窗（不是）--不随滚动条滚动

top/right/bottom/left, z-index --配合position设置位置，元素边缘和参照物边缘的距离

若同时设置了top/bottom会怎么样呢？同时满足top和bottom，元素的大小改变了

z-index: 设置在z轴上的重叠，默认值为0，可为负值；若相同，则根据元素在文档流的顺序覆盖

--两个绝对定位的元素，z-index值大的元素一定在z-index值小的元素的上方。

特征：title覆盖在图片之上，右下角按钮覆盖在图片之上，图片轮换

半脱离文档流(float元素在同一文档流内)--对后序元素，脱离文档流，对内容而言，是在文档流内的

默认为内容宽度，向指定方向一直移动（到不能移动为止(父元素边界)）

红色虚线框表示后序元素位置，被float覆盖了，但是后序元素中的内容却没有被float元素覆盖

.clearfix:after {content:'.'; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}

原理：在浮动元素的后续元素加一个内容为点的(块级元素)，并将其设置为不可见

侧栏

主栏

要求如效果图中标注，两栏间距为10px，请写出这个两列布局的CSS。

Flex: 弹性布局

terms：

flex container包含了flex item；

main axis 主轴方向； cross axis 辅轴方向

创建flex container：

display: flex

flex container中在文档流中的直接子元素：flex item 弹性元素

float在文档流中，是flex item；

position:absolute脱离文档流，不是flex item；

grandson

不是直接子元素（是孙元素），不是flex item。

flex的特性：

方向：

flex-direction 排列方向

flex-direction: row (default) | row-reverse | column | column-reverse

flex-wrap 弹性换行 (空间不够元素会进行收缩--称为弹性)

flex-wrap: nowrap (default) | wrap | wrap-reverse (从下往上)

flex-flow 弹性流

flex-flow: <'flex-direction'> || <'flex-wrap'>

order 排列先后顺序

order: --优先级

default (0), can be negative.

弹性：

flex-grow 元素所能分配到的空余空间比例

flex-grow:

default (0), flex-basis + (flow-grow / Sum(flow-grow)) * remain

巧用：如何使第三个元素的宽度为第二个元素的两倍呢（不是分配剩余空间的2/3）

.item2 {flex-basis:0; flex-grow:1;}

.item3 {flex-basis:0; flex-grow:2;}

flex-shrink 剩余空间为负时，如何分配空间

flex-shrink:

default (1), flex-basis + (flow-grow / Sum(flow-grow)) * remain (remain为负值)

flex-basis 设置flex item的初始宽/高(宽还是高要结合主轴方向(flex-direction)来看)

flex-basis: main-size |

flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>

default: 0 1 main-size

对齐：

justify-content 设置main axis主轴下的对齐方式

justify-content: flex-start (default) | flex-end | center | space-between | space-around

align-items 设置cross axis辅轴下的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch (default)

align-self 设置单个flex item在cross axis方向上的对齐方式

align-content （容器中有多行内容）设置cross axis方向上行的对齐方式

实例：

三行自适应+两列自适应：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行自适应+两列自适应title>
    <style type="text/css">
        html, body {
      
            margin-left: 0;
            text-align: center;
        }
        .head, .foot {
      
            line-height: 100px;
            background-color: grey;
        }
        .side {
      background-color: yellow;}
        .main {
      background-color: pink;}
    
        html, body {
      height:100%;}
        body {
      
            display: flex;
            flex-flow: column;
        }
        .head, .foot {
      height: 100px;}
        .body {
      
            flex-grow: 1;
            display: flex;
            margin: 0 100px;
        }
        .side {
      flex-grow: 1;}
        .main {
      flex-grow: 3;}
    style>
head>
<body>
    <div class="head">headdiv>
    <div class="body">
        <div class="side">sidediv>
        <div class="main">maindiv>
    div>
    <div class="foot">footdiv>
body>
html>

变形

transform：旋转、缩放、移动等--左手坐标系！！！

transform: none | +

rotate( ):

i.e. transform: rotate(45deg); - positive value: clock-wise

translate:

translate ( [,]?)

translateX( )

translateY( )

i.e. transform: translate(50px); // x:50px; y:0; positive value: right bottom

transform: translate(50px, 20%); // %的参照物为元素本身的宽/高

transform: translateX(-50px);

scale( [, ]> ) 第二个值省略时默认与第一个值相同

scaleX ( );

scaleY ( );

i.e. transform: scale(1.5, 2);

skew( [, ]? ) 第二个值省略时即等价于skewX()

skewX(); skewY();

i.e. transform: skew(30deg); // 元素的y轴向x轴偏移了30° (右下方象限）

transform: skew(30deg, 30deg);

tranform-origin:

[ left|center|right|top|bottom|| // one value

| [left|center|right||] [top|center|bottom||] ? // 3 values

i.e. transform-origin: 50% 50%; // default

transform-origin: 0 0; // left top corner

transform-origin: 20%; // 20% 50%;

transform-origin: right 50px 20px; // x: right; y: 50px; z: 20px(towards outside of the screen);

transform-origin: top right 20px; // top right corner, z: 20px;

i.e. transform: translate(50%) rotate(45deg); is different from transform: rotate(45deg) translate(50%);

NB: It is the axis that is rotated, not just the shape itself.

3D视图：

perspective: none | 透视

i.e. perspective: none (default);

perspective: 2000px; (the distance between the view point and the object

i.e. perspective: 500px; transform: rotateY(45deg); // rotate along the y axis

perspective-origin:

[ left|center|right|top|bottom|| // one value

| [left|center|right||] [top|center|bottom||] // 2 values

i.e. perspective-origin: 50% 50%; // default

perspective-origin: left bottom; // the view point is left bottom corner

perspective-origin: 50% -800px; // view from upside -- positive value: bottom

perspective-origin: right; // perspective-origin: right 50%

translate3d( , , )

translateZ(); // 离view point靠近了，会导致size变大一些

i.e. transform: translate3d(10px, 20%, 50px);

transform: translateZ(-100px);

scale3d(, , )

scaleZ()

i.e. transform: scaleZ(5); // totally the same as scaleZ(1)

transform: scaleZ(5); translateZ(100px); // -- translate(500px);

rotate3d( , , , )

rotateX();

rotateY();

i.e. transform: rotate3d(1, 0, 0, 45); // rotate along x axis

transform: rotate3d(0, 1, 0, 45); // rotate along y axis

transform: rotate3d(0, 0, 1, 45); // rotate along z axis

transform: rotate3d(1, 1, 1, 45); // rotate along (0,0,0)-(1,1,1) direction

效果的叠加：transform-style

transform-style: flat 扁平化(default) | preserve-3d（元素内部也可设置3d空间）

i.e. .parent {transform-style: preserve-3d; transform: rotateX(45deg);} .child {transform: rotateY(45deg);}

backface-visibility: visible (default) | hidden

动画

transition-property: none (default) | [',' ]*

= all |

i.e. transition-property: none; // default

transition-property: all; // 对所有属性都做过渡效果

transition-property: left // 只对left属性做过渡效果，当left变化时，会有过渡效果

transition-property: left, color // left属性或/和color属性有变化时有过渡效果

transition-duration: [, ]*

transition-duration: 0s; (default) == transition-property: none;

transition-timing-function: 移动速率

transition-timing-function: [',' ]*

= ease | linear | ease-in | ease-out | ease-in-out（幅度比ease大）

| cubic-bezier (, , , )

| step-start | step-end | steps( [, [ start | end ] ]?)

cubic-bezier曲线（前两个值：P1；后两个值：P2）

step: 一步一步移动：start表示每一步开始时就移动，end表示每一步结束时才开始移动;

i.e. step(3, start); // 一共分三步移动，每一步开始时就开始移动

i.e. transition-timing-function: ease; == transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.1);

transition-timing-function: linear; == transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay: [, ]*

transition: [',' ]*

= [ none | ] || || ||

i.e. transition: left 2s ease 1s, color 2s;

transition: 2s; // == all(default) 2s ease(default) 0s(default)

另一种动画效果：animation

区别：

animation进入页面时，动画自动运行；而transition是需要触发的

animation可以做多帧动画；而transition只能从首到尾两帧

animation-name: [',' ]*

= none | (可以任意写，不同于transition只能是属性名）

i.e. animation-name: abc, abcd;

div {
     
    -webkit -animation-name: abc;
}
@-webkit -keyframes abc{
     
    0%{left:0; top:0;}
    50%{
     left:250px; top:100px;}
    100%{
     left:500px; top:0;}
}

animation-duration: [, ]*

animation-timing-function: [',' ]*

animation-iteration-count: [',' ]*

= infinite | (default:1)

animation-direction: [',' ]*

= normal | reverse | alternate (往返) | alternate-reverse

animation-play-state: [',' ]*

= running | paused

i.e. .aaa:hover {-webkit -animation-play-state: paused;}

animation-delay: [, ]*

animation-fill-mode: [',' ]*

动画开始/结束时是否要保持在首尾帧的截图

= none | backwards (开始时第一帧) | forwards (结束时最后一帧) | both

animation: [',' ]*

= || || || || || || ||

i.e. animation: abc 2s ease 0s 1 normal none running;

@keyframes:

@keyframes name {

from {...}

to {...}

}

@keyframes name {

0%, 25%, 50%, 75%, 100% ... {...}

}

i.e. homework：

loading1:

loading2:

单元测验

CSS单元测验：http://www.jianshu.com/p/c9542fdf10df

CSS单元作业：http://www.th7.cn/web/html-css/201605/167618.shtml；http://www.codes51.com/article/detail_1082224.html

	Spaces and Tabs	New Lines	Text Wrapping
normal	Collapse	Collapse	Wrap
nowrap	Collapse	Collapse	No wrap
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Collapse	Preserve	Wrap

前端开发工程师 - 01.页面制作 - 第4章.CSS

第4章.CSS

CSS简介

选择器

文本

盒模型

背景

布局

变形

动画

单元测验

你可能感兴趣的:(前端)