HTML和css笔记

制作有吸引力的段落
对于更有吸引力的段落排版，可以采用Robert Bringhurst的方法，它约定：用你的文字大小乘以30就可以得到段落的宽度。比如如果你的文字大小是12px，用30乘以它，也就是360px，这样每行大约可以呈现65个英文字符。行高用来限定每行文字之间的空白大小。一个经验之谈就是让行高比你的字体大6-7px。

IE6双倍边距BUG
原因：
块级元素；
左浮动；
设置了左边距。
（同时具备这三要素缺一不可）解决方法：display:inline;（display:inline-block;该方法不行）

连续的数字和英文字符自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大
1. 常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
2. 连续的英文字符和阿拉伯数字,使用word-wrap:break-word;或者word-break:break-all;实现强制断行
word-break:break-all和word-wrap:break-word的区别
word-break:break-all内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断。
word-wrap:break-word它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

CSS Hack——条件Hack
非IE浏览器可识别 （PS:无法显示代码请查看源码）

CSS Hack——属性级Hack
_height:300px;(for IE6)
*height:300px;(for IE6\7)
*hegiht:300px !important;(for IE7)
height:300px !important;(for IE7+ FF Chrome Opera)

@charset
@charset “utf-8”;在外部样式表文件内使用。指定该样式表使用的字符编码。
（PS:该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。 ）

behavior
div{behavior:url(fly.htc) url(shy.htc);}多个行为之间用空格分开。（PS:htc行为组件）

清除浮动
1.空标签清除浮动的弊端在于增加了无意义的结构元素。
2.overflow:auto\hidden;需要设置容器的宽度否则不兼容IE6\7。
出全屏

CSS透明
opacity:0.5;/for IE9、FF、Chrome、Opera/
filter:alpha(opacity=60);/for IE6~8 IE9也支持/
CSS实现背景透明，文字不透明（兼容各浏览器）
background:rgba(96,96,96,0.5); 而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜。

CSS3 resize
resize设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小
none：不允许用户调整元素大小；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：用户可以调节元素的高度；
inherit：默认继承。
（PS:如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。for FF\Chrome\Safair。）

CSS3 border-radius
border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。 除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius

CSS3 text-shadow

X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba透明色。 （PS：可以给一个对象应用一组或多组文字阴影效果，用逗号隔开。）

CSS3 box-shadow
box-shadow:inset x-offset y-offset blur-radius spread-radius color;
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值”inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为”inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小;
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

CSS3 background-size
background-size: auto || length || percentage || cover || contain
1、auto:此值为默认值，保持背景图片的原始高度和宽度；
2、length此值设置具体的值，可以改变背景图片的大小；
3、percentage此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；
5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

CSS3 Transition
Transition属性主要是用来对某个CSS属性的变化过程进行控制，简单地理解为”在某个时间段内，平滑地改变某个CSS属性。
1.transition-property:property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。
2.transition-duration:duration针对了过渡效果的持续时间。
3.transition-timing-function:它针对了过渡效果的特效，有多种特效展示。
4.transition-delay:duration针对了过渡效果的延迟执行时间。
.bb{
-webkit-transition:margin-left 2s;
-moz-transition:margin-left 2s;
-o-transition:margin-left 2s;
transition:margin-left 2s;
} /* 只有当鼠标移出时才处理 */
.bb:hover{margin-left:30px;} /* 只有当鼠标移入时才处理 注：若a:hover中不写transition,则会继承a中的transition */PS：IE9不支持CSS3 transition属性