学习笔记
回眸惊觉太浮躁，便从头开始，今天开始逐步更前端基础。
表格
IE浏览器、火狐、谷歌浏览器、Edge浏览器、Safair浏览器、Opera浏览器
浏览器内核
可分为两部分: 渲染引擎（layout engineer或者Rendering Engine）和JS引擎
常见浏览器内核：Trident、Geoko(苹果)、WebKit(safair)、Chromium/Blink(chrome)、Persto(Opera)
Android,大部分为Webkit二次开发
iOS以及WP7平台，大部分是Safair和IE 的Trident
Web标准
w3c和其它标准化组织制定的一系列标准的集合
结构标准(Structure)：html
表现标准(Presentation)：css
行为标准(Behavior)：js
HTML超文本标记语言
h5标签语义化
下划线、换行标签、文本格式化标签
<b></b><strong></strong>粗体
<i></i><em></em>斜体
<s></s><del></del>删除线
<u></u><ins></ins>下划线
前面的没有强调意思，后面语义更强烈
图像标签
alt(图像不能显示时，提示)
title(鼠标悬停时显示内容)
链接标签（anchor）
target(目标窗口弹出方式)==>_self(原窗口) blank(new)
base标签
head标签之间 <base target="_blank">
特殊字符标签
//(  < > & © 空格 <> & 版权符号
注释标签<!-- -->
相对路径
绝对路径
列表标签
无序列表ul
有序列表ol
自定义列表
<dl>
<dt></dt>
<dd></dd>描述说明dt
</dl>
认识 很多标签
表单由表单域、表单控件、文本提示信息组成
input控件（重点）
单标签
label标签
textarea(文本域)
下拉菜单
select控件
表单域（form)
get(安全性差) post（匿名）
w3c
MDN
CSS初始
行内样式(内联样式)
<h4 style="color: pink"></h4>
内部样式表
<style>
选择器 { 属性：值}
</style>
外部样式表
<link ref="stylesheet" href="css.css" />
css基础选择器
标签选择器
类选择器
.类名 {} 类名先后没关系，css书写关系
id选择器
# 唯一、 不可重复
通配符选择器*
font-size (em, px) 1em就是一个字的距离
font-family （字体类型）
现在网页普遍使用14px+
尽量使用偶数数字字号
各种字体用英文逗号隔开
中文字体加英文引号隔开、遇空格、#、$，必须加引号(单，双)
尽量用默认字体
font-weight(字体粗细)
bold----700px
normal----400
font-style:字体风格 normal italic
font 综合字体设置样式
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性，按格式书写，不能更换样式，各个属性以空格隔开，font-size/font-family都必须保留
color
text-align(水平对齐)与html 中的align相同
text-indent(首行缩进)
text-decoration(文本装饰)line-through
css复合选择器
交集选择器 div.red 既又
并集选择器div,p,span
后代选择器 (包含选择器) ul li a
子元素选择器 ul li>a
伪类选择器
链接伪类选择器
:link /*未访问的链接*/
:visted /*已访问的链接*/
:hover /*鼠标移动到链接*/
css注释
标签的显示模式 display
块级元素（block-level）
:active /*选定的链接*/
h1-h6 p div ul ol li
行内元素(inline-level)只能容纳文本或其他行内元素(a特殊)
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
行内块元素 (inline-block)
<img /><input /><td>
模式转换 diaplay: inline
行内元素、行内块元素可当做文本来看 text-align:center起作用
p h1-h6 尽量不放块级元素 （文字块元素）
选择器嵌套层级应不大于3级
基线与基线距离为行高、
css三大特性
层叠（就近）、继承（父性子承）、优先级
每个元素贡献值 0，0，0，1
每个类伪类贡献值 0，0，1，0
每个ID贡献值 0，1，0，0
每个行内样式贡献值 1，0，0，0
每个!important贡献值 无穷大
继承权重为0
<div class="father">
<p>继承的问题</p>
</div>
.father {
color: yellow
}
p {
color: blue
}
该继承为blue,继承权重为0
background-image: url()
background-repeat
background-position (精灵图)
background-attachment: fixed(背景固定)
background: transparent url(image.jpg) repeat-y scroll 50% 0;
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置（位置无强制要求）
背景透明(css3)（高级浏览器支持）
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度 取值范围0-1之间（盒子背景半透明）
盒子模型（css重点）
css三大模块：盒子模型、浮动、定位，其余为细节，需学精通
边框（border）（四边由上右下左）
border-color border-width border-style: solid(实验) dashed(虚线) dotted(点线)
border: 1px solid red
border-collapse: collapse;表示边框合并一起（table,td齐设定）
内边距（padding）
padding: 10px 20px 30px;上 左右 下
padding: 10px 20px 30px 40px 上右下左
问题（padding 会撑开盒子）
盒子居中
text-align: center(可以让盒子内容（文字 行内元素 行内块）居中对齐）
margin：0 auto;(通俗写法)
使用要求：块元素， 指定宽度
外边距合并
相邻块元素垂直外边距合并，取两者最大
嵌套元素垂直外边距合并，如果父元素无上内边距和边框
则父元素与子元素的上外边距发生合并，两者中的较大，即使 父为0，
也会发生合并。
解决方法：
可以为父元素添加overflow:hidden。
使用优先选择 width> padding（撑开）>margin(外边距合并)
圆角边框（css3）
border-radius: 50%
圆角阴影
border-radius: 50% 0；对角看
三个值
h-shadow 水平阴影的位置
v-shadow 垂直阴影位置
（blur spread color inset） (模糊距离 阴影尺寸 阴影颜色 内部阴影)
浮动（flooat）
普通流（normal flow）
这个单词很多人翻译为文档流， 普通流或者标准流都可以
css的定位机制：普通流（标准流）、浮动和定位
用浮动可以让元素在一行显示，方便布局，用inline-block会有间隙
浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动
浮动无法跨越父盒子内边距
浮动有隐藏模式转换，转换为行内块
float: 浮漏特
版心与布局流程
清除浮动(不是所有浮动都需清除，影响布局)
额外标签法（w3c推荐，最好不用）
最后一个添加浮动元素后面，添加标签<div class="clear"></div>
.clear {
clear: both
}
优点：通俗易懂，书写方便
缺点：会添加很多无意义标签，造成结构混乱
父级添加overflow
overflow: hidden
使用after 伪元素清除浮动(网易)
.clearfix：after{ content： ""; display: block; height: 0; clear: both; visibility:hidden; } .clearfix{ *zoom:1;/ie6能识别，*ie7以下版本所能识别，其他浏览器略过 }
给父元素加clearfix
使用after和before双伪元素清除浮动(小米)
.clearfix:before,.clear:after{ content:""; display:table; } .clearfix:after { clear:both } .clearfix{ *zoom:1; }
定位（position）
background-position(背景定位)
元素定位哦属性主要包括定位模式和边偏移
边偏移属性（top bottom left right）
定位模式
static 自动定位（静态定位，标准流特性，边偏移无法改变位置）
唯一用处：取消定位
relative 相对定位，相对其原文档流的位置进行定位（自恋型 ）
以自己左上角为准，相对定位不脱标，仍保留原位置
absolute 绝对定位，相对上个已经定位父元素进行定位（拼爹型）
完全脱标，完全不占位置 ,若父元素无定位，以浏览器当前屏幕为准对齐 会随可滚动文档滚动
以最近已定位父元素进行定位
子绝父相
fixed 相对浏览器窗口进行定位
发现问题之图片（文字亦是）使用float: left依旧占位置
定位的盒子居中对齐
加了浮动 定位 的盒子 margin：auto失效
left: 50%;（大盒子一半）
margin-left: -100px;(自己盒子一半)
固定定位fixed(认死理型)
特定的绝对定位(脱标不占位) ，只认浏览器
默认的隐式转换，跟浮动一样，元素添加了绝对定位和固定定位后，元素转换为行内块模式
行内块的宽度高度与内容有关(需给宽度)
叠放次序（z-index）
加了定位元素（仅限此），后来居上
css高级技巧
元素的显示与隐藏
display: none;block;隐藏之后不保存位置
visibility 可见性 visible hidden 不保留位置
overflow (溢出隐藏) visible auto hidden scoll
鼠标样式、cursor: default pointer move text(小白箭头，小手，移动，文本)
轮廓outline：none;加个border: 1px splid red
防止拖曳文本域 textarea {resize: none;}
vertical-align垂直对齐
baseline top middle bottom
默认图片与文字基线对齐（图片底部留白）换成其他模式 或display:block
溢出的文字隐藏
white-space: normal nowrap(强制一行显示，直至结束或遭遇br)
text-overflow: clip(不显示) ellipsis（省略号）
css精灵技术（sprite）小精灵 雪碧
减少服务器请求次数，提高加载速度
background-position
维护成本高
滑动门
导航栏字数不同+有图片（微信）
微信导航栏中遇到的问题及解决方式
导航栏中给定margin-left和margin-right出现第一个和最后一个左右间隙处理方式
字体图标
追加字体图标，保留原图标，导入json文件
css reset类库，推荐用、normalize.css
icon图标引入
<link rel=" shortcut icon" href="favicon.ico" type="image/x-icon/">
网站优化三大标签 seo
现主要为站内优化 title(网页入口) description（网站说明） keywords
代码检验
cssstats.com(z在线代码分析工具)
http://validator.w3.org/unicorn/(w3c统一验证工具)
http://tool.chinaz.com/CssFormat.aspx (css代码压缩)
代码压缩
浙公网安备 33010602011771号