Base标签
放在head标签内部，设置属性target="_blank" 即可让所有标签都在新页面内打开，相当于一个全局设置
相对路径与绝对路径
- 同级：<img src="logo.gif" />
- 下一级，不要再最开始加/,直接打目录名：<img src="img/img01/logo.gif" />
- 用..表示上一级目录，再从上一级目录中开始寻找：<img src="../logo.gif" />
自定义列表
<dl>
<dt>Jenny</dt>
<dd>大老婆</dd>
<dd>厉害，不愧大老婆</dd>
<dt>女儿</dt>
<dd>超可爱</dd>
<dd>但是很独立，自我意识已觉醒</dd>
</dl>
天天沉醉在ul和ol的时候不要忘记了dl dt 和dd
行内与块级元素
- 块级元素的特点：
- （1）总是从新行开始
- （2）高度，行高、外边距以及内边距都可以控制。
- （3）宽度默认是容器的100%
- （4）可以容纳内联元素和其他块元素。
- 行内元素的特点：
- （1）和相邻行内元素在一行上。
- （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
- （3）默认宽度就是它本身内容的宽度。
- （4）行内元素只能容纳文本或则其他行内元素。（a特殊）
- 行内块元素（input，img，td）的特点：
- （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
- （2）默认宽度就是它本身内容的宽度。
- （3）高度，行高、外边距以及内边距都可以控制。
- 给行内元素加上浮动，会将元素变成inline-block，这个要记住，是个小技巧
继承
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。CSS外观样式 这几个经常用用，别忘记了
- color:文本颜色
- line-height:行间距 一般情况下，行距比字号大7.8像素左右就可以了。
- text-align:水平对齐方式
- text-indent:首行缩进
- text-decoration 文本的装饰
布局常用套路
可以用表格来布局表单。在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：- 必须是块级元素。
- 盒子必须指定了宽度（width）
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 解决方案：- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
盒子模型布局稳定性
优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。 由此可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。子绝父相
这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。 这句话的意思是 子级是绝对定位的话， 父级要用相对定位。绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了 定位的盒子也可以水平或者垂直居中，有一个算法。- 首先left 50% 父盒子的一半大小
- 然后走自己外边距负的一半值就可以了 margin-left。
定位模式转换
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式， * 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。*BFC(块级格式化上下文)
不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC. 注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。什么情况下可以让元素产生BFC
同样，要给这些元素添加如下属性就可以触发BFC。 -float属性不为none -position为absolute或fixed -display为inline-block, table-cell, table-caption, flex, inline-flex -overflow不为visible。BFC元素所具有的特性
BFC布局规则特性： 1.在BFC中，盒子从顶端开始垂直地一个接一个地排列. 2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠 3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
BFC 总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。INPUT元素的type属性设置成image
就可以使用图片作为按钮了，在还原网页设计的时候非常有效。CSS属性
CSS属性名前加*号，其他浏览器看到之后都不会执行，只有IE6和IE7才会去执行。 z-index 只有定位的盒子才能设置这个属性。默认是0。 用类似a:hover mask 的方法可以在a悬停的时候选中其他元素，可以达到简单的JS效果。
input 等表单元素在处于焦点的时候会有一圈蓝色，可以用 outline:none 来取消。
想让盒子动只能靠左侧和上侧的距离，所以排版的时候可以使用右边距的负数来方便调整两个盒子实际内容区的距离。
网站Logo
div一个logo部分，然后在其中设置H1 标签，之内再设置A标签，背景图给A标签，A其中一定要有文字，这个搜索权重很高，不能删除，可以用各种方法让其不显示。这是做网站Logo的一般套路。多组属性的同时控制
这里有个来自传智的泡泡例子，当设置了多组背景图片的时候，想让其运动，也对应着用多组属性控制即可：
div {
width: 300px;
height: 80px;
border-radius: 20px;
background: url("images/paopao.png") no-repeat top left, url("images/paopao.png") no-repeat right bottom,blue;
transition: all 3s;
}
div:hover {
background-position: right bottom, top left;
}
这里就是让第一张背景图片从左边移到右下，第二张背景图片从右下移动到左上，交替效果。