<!DOCTYPE html>就是告诉浏览器按照HTML5 规范解析页面.
<html lang="en">指定html 语言种类,language和english
UTF-8一定要大写
b和strong,i和em,均推荐后者
上一级路径在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推
D:\web\img\logo.gif绝对路径是\,相对路径和网络地址是/
锚点定位：<h3 id="two">第2集</h3>，<a href="#two">
<base target="_blank">/写在head，全体在新窗口打开
font顺序：style，weight，size / line-height，family。size和family必需
链接伪类顺序：lvha
text-, font-, line-, color都可以继承（a不能继承color）
font-weight：400 等同于 normal，而 700 等同于 bold
sublime快捷操作：.demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
background-position, 如果只指定了一个方位（方位名词或数值），另一个值默认center
如果background-position 第一个值是精确坐标， 那么必须是x 第二的是y
text-align对文本、行内元素和行内块元素有效
父元素权重高但是继承的权重为0
如果没有给一个盒子指定宽度，则padding不会撑开盒子。
文本或块元素水平居中：text-align
盒子水平居中：1. 盒子有width 2. 左右margin为auto
解决嵌套块元素垂直外边距的合并的方法：
可以为父元素定义上边框（不建议）
可以为父元素定义上内边距（加多少减多少）
可以为父元素添加overflow:hidden
实体化三要素：height，width，background
padding：加多少减多少
float属性会改变元素display属性，类似inline-block，但是没有缝隙
任何元素都可以浮动
浮动的元素要添加一个标准流的父元素，最大化的减小了对其他标准流的影响
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。两个子盒子，第一个是标准流，第二个左浮动，则不会有变化
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
bd+是border: 1px solid #00; 的简写， bd-是border: none; 的简写
超大背景一般设置在body
<a>xxxxx<span>></span></> span {float: right}
非标准流不会有margin合并
三种布局机制的上下顺序
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
34. 相对定位的特点：
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
35. 绝对定位的特点：
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为参照物
不保留原来的位置，完全是脱离文档流的。
36. 浮动的元素不会漂到img的上层
37. 绝对定位的参照物可以是除静态定位以外的所有定位模式
浮动不能漂在img和文字上层
相对定位仍在文档流里面，绝对定位完全脱离了文档流，原来的位置就被其他的盒子占有了；绝对定位完全脱离了文档流，原来的位置就被其他的盒子占有了
为什么用定位：定位可以将元素定在其他元素（包括标准流和浮动）的上面，位置可以任意更改；或固定到浏览器窗口的某一个位置
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
固定定位的参照物是浏览器窗口，完全脱离文档流
固定定位和绝对定位不能用margin：auto水平居中，相对定位可以，因为他没有脱离文档流
z-index只在绝对定位、相对定位和固定定位有用
浮动和绝对定位（固定定位）的元素拥有inline-block的特性
border-radius：左上，右上，右下，左下;
rgba(0,0,0,.2);
box-shadow: x, y, 距离, 颜色;
电梯紧贴内容的办法：
1. left: 50%;
2. margin-left: -(版心width的一半+width);
给屏幕加一层阴影：
.shadow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
li+margin右大于版心，给ul加宽度
链接间的竖线：</a> |
overflow可以解决margin塌陷
清除默认样式：
*
li
a
button, img: {border: none;}
input, textarea: {outline: none;}
textarea: {resize: none;}
img: {vertical-align: top;}
vertical align只对行内和行内块元素有效，必须和父元素的line-height搭配；vertical align: center主要用于图片或表单与文字的对齐
文字和图片在同一行时，图片底部与文字基线对齐（因此图片底部有一点空白，vertical-align: top/middle/bottom可去除，不是baseline即可，该方法比display: block更好），line-height无效
vertical-align: middel用于inline-block和文字对齐
line-height只对文字有效
溢出的文字省略号显示步骤：
1. white-space: nowrap; 所有文本同一行显示
2. overflow: hidden;
3. text-overflow: ellipsis; 省略号
滑动门
浮动元素是紧贴在一起的
浮动元素用margin-left: -1px时，hover改边框颜色时要相对定位
制作10px高的红三角形：
div {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent red transparent;
font-size: 0; （兼容）
line-height: 0; （兼容）
}
text-align: center对文本、inline-block和inline都有效
高度+行高可以让图片的基线居中
主导航用ul>li>a, 其余直接a即可
浮动不能漂在img和文字上层
相对定位仍在文档流里面，绝对定位完全脱离了文档流，原来的位置就被其他的盒子占有了；绝对定位完全脱离了文档流，原来的位置就被其他的盒子占有了
写header顺序：
同一高度，margin上下
3个盒子宽高，浮动
li宽高，margin右
display: none不会占位，visibility: hidden会占位
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它 。
<!-- 品优购第一天 S -->
使用ico图标：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
必须放根目录
制作ico图标：
图片传入www.bitbug.net选16-48尺寸
网站优化三大标签：（每个页面都有）
标题：<title></title>
网站说明：<meta name="description" content="" />
关键词：<meta name="keywords" content="" />
字体图标
链接间的竖线用宽度为1px的li设置
倒三角的字体图标最好放在i里面
文字和字体图标在同一行，可以改变字体图标的行高调节位置
搜索框和按钮直接的空隙可以用浮动解决
css属性值需要用到引号时，统一使用单引号
logo要放置在.logo>h1>a，a的href="index.html"，logo的文字写在a里，logo图片做背景
a display: block;
a的宽高与.logo相等
隐藏a里的文字：
1. 淘宝，要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden
2. 京东，font-size: 0
<!-- 品优购第一天 E --> |
|
收藏
淘帖
踩
