web前端笔记

1.单位

1. px 像素 1em 1em---1个字符 2em---2个字符（自动适应用户所使用的字体） % 百分比

2.文本

1. color文本颜色 red #f00 letter-spacing字符间距 2px -3px em line-height行高 14px 1.5em 120% （一般用于垂直居中） text-align对齐 center、left、right 、justify（两端对齐） text-decoration装饰线 none（去掉超链接下划线） overline（装饰线在文本的上方） undeline line-throuhg（装饰线作为删除线贯穿文本之中。（一般用于商品打折）） text-indent首行缩进 2em

3.字体

1. font-family 字体系列 font-size 字号 14px 120% font-style 斜体 italic font-weight 粗体 bold

2. font:斜体 粗体 字号/行高 字体 font:italic bold 16px/1.5em '宋体'

4.CSS背景

1. background-color background-image：url（"logo.jpg"） background-repeat：repeat repeat-x repeat-y no-repeat background：颜色 图片 repeat

5.超链接的四种状态

1. 1.a:link 普通的，未被访问的链接 2.a:visited 用户已访问的链接 3.a:hover 鼠标指针位于链接的上方悬停 3.a:active 链接被点击的时刻

6.无序列表ul有序列表ol共用样式

1. list-style 所有用于列表的属性设置于一个声明中 list-style-image：url（"images/bulletl.gif"） 为列表项标志设置图像 list-style-position 标志的位置 list-style-type 标志的类型、

7.CSS表格

1. table{ width:500px; height:200px; }

2. border 属性 table,td,th{ border:1px solid #eee;(1个像素宽，实线，灰色) } border-collapse属性{ border-collapse:collapse;(合并默认的表格样式) }

3. __:nth-child(old | even) 奇偶选择器 tr:nth-child(old){ background-color:#eaf2d3;(表格方便观看，隔行显示不同的颜色) }

8.盒子模型

1. overflow属性：当内容溢出盒子框时，overflow属性取值 hidden：超出部分不可见 scroll：显示滚动条 auto：如果有超出部分，显示滚动条

2. border属性 border-width：px、thin（细）、medium（中）、thick（粗） border-style：dashed（一个个横线）、dotted（点）、solid（实线）、double（双实线） border-color：颜色 border：width style color

3. 水平分割线

   .line{ height: 1px; width: 500px; border-top: 1px solid #ccc }

4. 对浏览器的默认设置清零 *{ margin:0； padding:0； }

5. margin:1px; margin:1px 1px 1px 1px;（上右下左） margin:1px 2px ; margin:1px 2px 1px 2px; margin:1px 2px 3px; margin:1px 2px 3px 2px;

6. margin的合并：垂直方向合并，水平方向不合并；（合并后显示大的）

7. 图片、文字水平居中：text-align:center;

8. div水平居中：margin:0 auto;(浏览器自动计算)

9.CSS 定位机制概述

1. 文档流folw：默认的一种情况，不需要额外设置。从上到下，从左到右依次，像写字一样。只是有的元素单独占一行。

2. 浮动定位float：水平并排排列，左右排列，大盒子拆分若干列时。

3. 层定位position：希望当前网页元素像图层一样前后层叠在一起。

10.文档流定位

1. 元素分类：block、inline、inline-block

   元素类型转换：display属性

   （1）block元素特点：独占一行，元素的height、width、margin、padding都可设置 常见的block元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form> 将inline元素a转换为block元素，从而使a元素具有块状元素特点。 a{ display:block; } （2）inline元素特点：不单独占用一行，width、height不可设置，width就是它包含的文字或图片的宽度，不可改变。 常见的inline元素：<span>、<a> 显示为inlin元素：display：inline； （3）inline元素之间有一个间距问题。 （4）inline-block元素特点：不单独占一行，但元素的height、width、margin、padding都可设置。 最常见inline-block元素是：<img>

11.浮动定位

1. div实现横向多列布局 float属性：left、right、none（不浮动） clear属性：both，清除左右两边的浮动。 left和right只能清除一个方向的浮动 none是默认值，只在需要移除已指定的清除值时用到。

12.层定位

1. position属性： static：默认值 没有定位，元素出现在正常的流中，top、bottom、left、right、z-index无效 fixed：固定定位 相对于浏览器窗口进行定位，top、bottom、left、right、z-index有效 relative：相对定位 相对于其直接父元素进行定位，top、bottom、left、right、z-index有效 absolute：绝对定位 相对于static定位以外的第一个父元素进行定位，top、bottom、left、right、z-index有效

2. z-index：值大在上面。

3. 区别1：

   相对定位：relative 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。

   [图片上传失败...(image-b2efae-1595788397108)]

   绝对定位：absolute 定位为absolute的层脱离正常文本流，但与relative的区别：其在正常流中的原位置不再存在。

   。[图片上传失败...(image-a393c-1595788397108)]

   区别2： relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。[图片上传失败...(image-9e5af4-1595788397107)]

   对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

   [图片上传失败...(image-c913c5-1595788397107)]

4. 对于absolute定位的层，如果其父层中都未定义absolute或relative，则其将相对于body进行定位。[图片上传失败...(image-b4571-1595788397107)]

5. relative+absolute

   相对定位和绝对定位通常结合在一起来使用。

   [图片上传失败...(image-190587-1595788397107)]

13.圆角边框与阴影

1. border-top-left-radius 左上角的形状

   border-top-right-radius 右上角的形状

   border-bottom-left-radius 左下角的形状

   border-bottom-right-radius 右下角的形状

2. border-radius：水平值 垂直值

3. 圆角边框

   border-radius：50%；

4. 阴影box-shadow

   box-shadow：水平偏移 垂直偏移 模糊距离 颜色

   10px 10px 5px #888(灰色)

14.CSS3 文字与文本

1. text-shadow（文本阴影）

   text-shadow：水平偏移 垂直偏移 阴影大小（可省略） 颜色

   2px 2px 4px #000

2. word-wrap属性：允许长单词、url强制进行换行

   word-wrap：break-word;

3. @font-face 规则

   [图片上传失败...(image-c138fb-1595788397107)]

   常见4种字体格式：.ttf .svg .woff .eot

15.2D 变换

1. 2D转换方法：对元素进行旋转、缩放、移动、拉伸

2. 旋转transform:rotate()

   transform:rotate( deg);

3. 缩放transform:scale()

   transform:scale(x,y);

   0~1,缩小；>1放大。

16.过渡与动画

1. 过渡transition：将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。[图片上传失败...(image-7d6ba4-1595788397107)]

2. transition-timing-function属性取值：[图片上传失败...(image-56f1fc-1595788397107)]

3. animation 动画

   （1）定义动画：@keyframes规则 （关键帧

   （2）调用动画：animation属性：animation-name animation-duration animation-timing-function

   动画名字 时长 方式

   [图片上传失败...(image-4afa-1595788397107)]

17. 3D变换

1. transform-style:perserve-3d

2. transform属性

   rotateX（） rotateY（） rotateZ（）

   角度deg

3. perspective透视属性 px 近大远小

   px越小，表示离舞台越近；px越大，表示离舞台越远；

18.弹性布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html