CSS(CSS3)笔记
1.CSS规则
由两个主要部分构成：选择器以及一条或多条声明。
2.选择器
1）分类：
基础选择器、复合选择器。
2）基础选择器：标签选择器、类选择器、id选择器、通配选择器。
3）复合选择器
1 后代选择器：父 子（包含在父里面所有符合的子元素）
2 子代选择器：父>子（最近一级元素亲儿子，不包含孙元素以下的）
3 并集选择器：逗号分隔，任何形式选择器都可以
4 伪类选择器：前面有个冒号
4.1 链接伪类选择器
a:link --未被访问的链接
a:visited --已访问的链接
*a:hover --鼠标指针位于其上的链接
a:active --活动链接（鼠标按下未弹起）
*在样式表中，这几个选择器顺序不应该颠倒
4.2 :focus伪类选择器
获取焦点的表单元素。
3.字体属性
font-family：字体（微软雅黑/Microsoft Yahei、Arial、Helvetica、sans-serif）
font-size：大小
font-weight：粗细(100-900,bold=700,无单位,normal=400)
font-style：文本风格（normal倾斜/粗体标签改不倾斜/粗体等、italic倾斜）
复合属性，简写方式：
font:[font-style font-weight ]font-size/line-height font-family;--顺序不能变，/不是或的意思
4.文本属性
color:颜色（预定义颜色值、十六进制、RGB代码）
text-align:center/left/right文本水平对齐
text-decoration:none/underline/overline/line-through
text-indent:缩进距离
em：一个文字大小，如文字16px，则1em=16px。
line-height：文字行与行的距离。（上间距+下间距+文本高度）
5.样式表
分类：行内样式表（行内式）内部样式表（嵌入式）、外部样式表
<link rel="stylesheet" href="" />
6.Emmet语法
1）快速生成html结构语法
1 输入标签名按tab键
2 *生成多个标签
3 >用来生成带子元素标签，如ul>li
4 $为自增符号，如div.demo$*5
5 标签内部写内容用{}，如div{$}*5
6 +是并排
2）快速生成CSS样式语法
1 w100 --> width: 100px;
2 tdn --> text-decoration: none;
3）格式化文档：shift+alt+F
4）保存页面自动格式化代码
1 文件-->【首选项】-->【设置】
2 搜索emmet.include
3 在settings.json下的【用户】中添加以下语句：
"editor.formatOnType":true,
"editor.formatOnSave":true
*现在的版本可直接在正在格式化中勾选
7.元素显示模式
分类：块元素、行内元素
1）块元素：h、p、div、ul、ol、li等
特点：
1 独占一行。
2 高、宽、外边距、内边距都可控。
3 宽度默认是父级容器的100%。
4 是一个容器或盒子，里面可以放行内或者块级元素。
5 文字类标签不能再放块元素，如h、p。
2）行内（内联）元素：a、strong、b、em、i、del、s、ins、u、span等
特点：
1 相邻行内元素在一行上，一行可以显示多个。
2 高、宽直接设置无效。
3 默认宽度是本身内容的宽度。
4 行内元素只能容纳文本或其他行内元素。
5 链接里不能再放链接。
6 a里面可以放块级元素，最好是转换成块级元素。
3）行内块元素：img、input、td。
特点：
1 和相邻元素之间由空白间隙，一行可以显示多个。
2 默认宽度为本身内容宽度。
3 高度、行高、外边距以及内边距都可以控制。
4）转换：display:block/inline/inline-block;
8.截图小工具snipaste
1）F1截图
2）F3在桌面置顶显示
3）点击图片，alt取色，按下shift可以切换取色模式
4）按下esc取消图片显示
9.背景
1）背景颜色| color;
2）背景图片background-image:none | url(url);
3）背景平铺background-repeat:repeat(默认) | no-repeat | repeat-x | repeat-y;
4）背景图片位置：background-position:x y;
x,y可以是数值（px），可以是top/center/bottom/left/right的组合，可以是数值跟方位名词的组合，也可以只写一个。
5）背景图片固定：background-attachment:scroll(默认) | fixed
6）复合写法：background:颜色 图片地址 平铺 滚动 位置;（位置不固定，但一般这么写）
7）背景色半透明：background:rgba(0,0,0,0.3);
*最后一个参数是alpha透明度，0-1，0.3可写为.3。
10.CSS的三大特性
1）层叠性原则：遵循就近原则，哪个样式离结构近执行哪个。
2）继承性：子标签会继承父标签的某些样式（与文字有关的，包括text-,font-,line-,color等），如文本颜色和字号。
*恰当使用可降低CSS样式复杂性。
*行高的继承：
1 父：font:12px/24px '字体'; 子的行高是24px。
2 父：font:12px/1.5 '字体'; 子的行高是自身字体大小的1.5倍。
3）优先级：
优先级权重如下
继承或* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器，属性选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
1 权重叠加：复合选择器会有权重叠加的问题。
如ul li复合选择器：0,0,0,1+0,0,0,1 = 0,0,0,2 > 0,0,0,1
*权重虽然会叠加，但不会有进位的问题。
11.盒子模型
1）组成：border+content+padding+margin
2）边框：border-width/style/color
1 复合写法：border:width style color;
2 只一边有边框：border-top/bottom/left/right
3 表格的细线边框：border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。
border-collapse:colapse;表示相邻边框合并在一起。
4 边框会影响盒子实际大小，盒子大小不包括边框。
3）内边距：padding/padding-left/right/top/bottom
1 padding两个值为上下和左右，三个值是上和左右和下，四个值是上右下左。
2 padding影响盒子大小，撑大盒子大小。
3 盒子不指定宽高，padding就不会撑大盒子。
4）外边距：margin/margin-left/right/top/bottom
1 应用：盒子水平居中：指定盒子宽度，左右外边距为auto。
2 行内元素或行内块元素水平居中：text-align:center;
3 相邻块元素垂直外边距合并：下面盒子的margin-top和上面盒子的margin-bottom会合并。
4 嵌套块元素垂直外边距的塌陷：对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
*解决方案：
为父元素定义上边框，或为父元素定义上内边距，或为父元素添加overflow:hidden;
12.圆角边框
border-radius:length;
原理：圆和边框交集形成圆角效果。
某个角圆角：border-top-right...
13.盒子阴影
box-shadow:h-shadow v-shadow[ blur spread color inset];
h-shadow：水平阴影位置，允许负值。
v-shadow：垂直阴影位置，允许负值。
blur：模糊距离。
spread：阴影的尺寸。
color：阴影颜色。
inset：将外部阴影改为内部阴影。（默认为outset，不允许写）
*盒子阴影不占空间，不影响其他的元素。
14.文字阴影
text-shadow:h-shadow v-shadow blur color;
15.传统网页布局的三种方式
标准流、浮动、定位。
*标准流：标签按照规定好默认方式排列。
16.浮动
float:none/left/right;
1）特性：
1 浮动元素会脱离标准流，不再保留原先位置。
2 浮动元素会一行内显示并且元素顶部对齐。
3 浮动元素会具有行内块元素的特征（如span有了浮动可以设置宽高等）。
2）浮动元素经常搭配标准流父元素。
1 网页布局第一准则：先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置。
2 网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
*浮动元素只会影响它后面的标准流，不影响它前面的标准流。
3）清除浮动
clear:left/right/both;
1 原因：子盒子浮动，脱标，父盒子没有高度就为0，不会被撑开盒子。
2 本质：清除浮动元素脱离标准流造成的影响。
3 方法：
额外标签法/隔离法（块元素，结构化较差）、父级添加overflow:hidden/auto/scroll属性、父级添加after伪元素、父级添加双伪元素。
*伪元素：
父元素:after{ --添加一个类
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
父元素{--IE6、7实现兼容
*zoom:1;
}
*双伪元素：
父元素:bofore,父元素:after{
content:"";
display:table;
}
父元素:after{clear:both;}
父元素{--IE6、7实现兼容
*zoom:1;
}
17.PS切图
1）常见的图片格式
1 jpg：JPEG对色彩的信息保留较好，高清，颜色较多，产品类图片经常用。
2 gif：最多只能存储256色，通常用来显示简单图形及字体，可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
3 pbg：新兴的网络图形格式，结合了gif和jpg优点，具有存储形式丰富的特点，能够保持透明背景，可以做到切成背景透明的图片。
4 PSD图像格式是PS的专用格式，可存放图层、通道、遮罩等多种设计稿，可直接从上面复制文字，还可以测量大小和距离。
2）切图
方式：图层切图、切片切图、PS插件切图等。
1 图层切图：
最简单：右击图层->快速导出为PNG。
或先合并图层再导出。
2 切片切图：
使用PS内切片工具手动划出。
*隐藏背景可以切出透明背景的PNG图片。
导出选中图片：文件菜单->导出->存储为web设备所用格式->选择要的图片格式->存储。
3 PS插件切图：Cutterman插件，完整版PS才能安装。
18.CSS属性书写顺序
布局定位属性：display/position/float/clear/visibility/overflow
->
自身属性：w/h/margin/padding/border/background
->
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
->
其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
19.定位
定位=定位模式+边模式
1）定位模式：
position:static(默认)/relative/absolute/fixed;
2）边偏移：
top/bottom/left/right
3）相对定位relative
相对定位是元素在移动位置时，是相对于它原来位置来说的，类似于小学题目位移。
注意：
1 移动位置的时候参照点是自己原来的位置。
2 不脱标，继续保留原来位置。
3 一般给绝对定位做父亲。
4）绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
注意：
1 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
2 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3 脱标，不保留原来位置。
5）子绝父相
1 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子。
2 父盒子需要加定位限制盒子在父盒子内显示。
3 父盒子布局时，需要占有位置，因此父亲只能时相对定位。
4 父级需要占有位置，相对定位，子盒子不需要占有位置，据对定位。
6）固定定位fixed
固定定位是元素固定于浏览器可视区位置，主要使用场景，可以在浏览器页面滚动时元素位置不会改变。
特点：
1 以浏览器的可视窗口为参照点移动元素。
2 跟父元素没有关系。
3 不随滚动条滚动。
4 固定定位脱标，不占有原先位置。
*固定版心右侧位置
1 让固定定位的盒子left:50%;。
2 让固定定位的盒子margin-left:版心宽度一般距离。
7）粘性定位
可以被认为是相对定位和固定定位的混合。
语法：position:sticky;top:10px;
特点：
1 以浏览器的可视窗口为参照点移动元素。
2 粘性定位占有原先的位置。
3 必须添加top/bottom/left/right其一才行。
*兼容性差，IE不支持。
8）定位叠放次序z-index
*带定位的盒子才有效。
值可以是正负或auto，值越大，盒子越靠上，值相同则按照书写顺序，后来居上。
9）定位小总结
1 行内元素添加绝对/固定定位，可直接设置宽高。
2 块级元素添加绝对/固定定位，不给宽高，默认大小是内容大小。
3 浮动/绝对/固定元素都不会触发外边距合并问题。
4 绝对/固定定位会完全压住盒子，而浮动元素只会压住下面标准流盒子，不会压住下面标准盒子里面的文字/图片。
*原因：浮动元素一开始只是为了做文字环绕效果，文字会围绕浮动元素。
*绝对定位的盒子不能通过margin:0 auto;水平居中。利用固定版心右侧位置类似的方法实现水平/垂直居中。
*或：left:calc(50%-自身宽度px/2);--calc为CSS计算属性
20.元素的显示和隐藏
1）display显示隐藏
值：block|none
不常用的值：
inline|compact|market|inline-table|list-item|run-in|table|table-caption/cell|table-column|table-column/footer/header-ground|table-row|table-row-group
*隐藏不占原有位置。
2）visibility显示隐藏
值：visible|hidden|collapse|inherit
*隐藏继续占有原有位置。
3）overflow溢出显示隐藏
值：visible|auto|hidden|scroll
*scroll不管需不需要（溢出）都有滚动条，但auto只在有需要才有滚动条。
21.精灵图
1）目的：为了有效减少服务器接收和发送请求次数，提高页面的加载速度。
2）核心：
1 主要针对背景图片，把多个小背景图片整合到一张大图片中。
2 大图片称为sprites精灵图或雪碧图。
3 利用background-position移动背景图片的位置。
4 移动距离为目标图片的x,y坐标，一般都移动负值。
5 使用精灵图需精确测量，每个小背景图片的大小和位置。
3）缺点
1 图片文件还是比较大的。
2 图片本身放大缩小会失真。
3 一旦图片制作完毕想要更换非常复杂。
22.字体图标
展示图标，本质是字体。
优点：轻量级、灵活性、兼容性。
*字体图标不能代替精灵技术。
字体图标网站：IcoMoon(http://icomoon.io)
23.三角形
div {
width:0;
height:0;
line-height:0;
font-size:0;--这两行为了解决兼容。
border:50px solid transparent;
border-left-color:pink;
}
*长的三角形
div {
width:0;
height:0;
border-top:100px solid transparent;
border-right:50px solid pink;
border-bottom:0 solid blue;
border-left:0 solid red;
}
24.用户界面样式
1）鼠标样式cursor
属性：
default:小白，默认
pointer:小手
move:移动
text:文本
not-allowed:禁止
2）轮廓线outline
值：0或none，如表单获得焦点得到的轮廓线
3）防止拖拽文本域resize
值：none
4）vertical-align
1 概念：用于设置一个元素的垂直对齐方式，只针对行内元素/行内块元素。
2 语法：vertical-align:baseline|top|middle|bottom;
3 描述
baseline：默认，元素放在父元素的基线上。
top：把元素顶端与行中最高元素的顶端对齐。
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
*图片底侧空白缝隙解决方案
1 vertical-align:middle/top/bottom;--更推荐
2 display:block;
5）溢出文字省略号显示
1 单行文本
强制一行内显示文本：white-space:nowrap;--默认normal
超出部分隐藏：overflow:hidden;
超出部分用省略号显示：text-overflow:ellipsis;
2 多行文本--存在兼容性问题，最好让后台来做更合适
overflow:hidden;
text-overflow:ellipsis;
弹性伸缩盒子模型显示：display:-webkit-box;
限制在一个块元素显示的文本行数：-webkit-line-clamp:2;
设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient:vertical;
25.CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容。
以下为部分京东CSS初始化
* {
margin:0;
padding:0;
}
em,i {
font-style:normal;
}
li {
list-style:none;
}
img {
border:0;
vertical-align:middle;
}
button {
cursor:pointer;
}
a {
color:#666;
text-decoration:none;
}
a:hover {
color:#c81623;
}
......
26.CSS3新特性--兼容问题
1）属性选择器
1 标签[属性]
如input[value] {}
2 标签[属性=值]--不用引号
3 标签[属性^=值]--以‘值’开头
4 标签[属性$=值]--以‘值’结尾
5 标签[属性*=值]--含有‘值’的元素
2）结构伪类选择器
1 XX:first-child --第一个孩子
2 XX:last-child
3 XX:nth-child(n) --第n个孩子
*n可以是数字、关键字（even偶/odd奇）和公式，直接写n选择所有孩子。
4 XX:first-of-type
5 XX:last-of-type
6 XX:nth-of-type
*两者区别：
1 nth-child对父元素里面所有孩子排序选择（序号固定），先找到第n个孩子，然后看看是否和XX匹配。
2 nth-of-type对父元素里面指定子元素进行排序选择，先去匹配XX，再根据XX找到第n个孩子。
3）伪元素选择器
1 ::before 元素前插入内容
2 ::after 元素后插入内容
*content必需的
3 伪元素清除浮动
额外标签法（不推荐）
额外标签法的升级优化
第一.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
第二.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
4）盒子模型
box-sizing:content-box|border-box;
1 box-sizing:content-box盒子大小：width+padding+border（向来默认的）
2 box-sizing:border-box盒子大小为：width --padding、border不会撑大盒子
5）滤镜filter
将模糊或颜色偏移等图形效果应用于元素。
filter:函数();
如filter:blur(5px); blur模糊处理，数值越大越模糊。
6）计算盒子宽度函数
calc();
如width:calc(100px+100%);
7）过渡
transition:要过度的属性 花费时间[ 运动曲线 何时开始];
属性：宽高、背景颜色、内外边距等，所有属性写all。
花费时间：单位为秒。
运动曲线：linear|ease|ease-in|ease-out|ease-in-out，默认ease。
何时开始，单位为秒，延迟触发时间默认是0s。
多个属性变化需利用,分开，或直接写all。
27.申请免费远程服务器（免费空间）
网址：http://free.3v.do/
1 注册账号
2 记录主机名、用户名、密码、域名
3 利用cutftp软件上传网站到远程服务器
4 在浏览器中输入域名，即可访问
————学习笔记
