html+css笔记

HTML（结构） CSS（样式） JS（行为） API
图片：png透明背景 jpg不透明
切图工具：Photoshop（滤镜） Fireworks（扁平）方便
Wamp：集成php环境的本地服务器


font-family:helvetica,"Microsoft Yahei",arial,sans-serif;


font-size: px  | em | rem


1em = 16px


1rem=16px


em换算相对父级   rem换算相对html；
rgba（255,255,255,255,0.5）不同于opacity，它只是背景色透明，不涉及内容




 通bug：a标签嵌套img，有时浏览器会出现有颜色边框，border：none解决
       图片空隙或下空隙（浮动、display：block、vertical-align：...解决）
       各浏览器的margin、padding不同（重置样式）  子元素margin加给父元素产生塌陷，父元素overflow：hiddren或浮动
       透明度兼容：opacity：0.5；filter：alpha（opacity=50）；
 ie6bug： 父子（子浮动  父clear：after...）  
         尽量不用margin，用padding
         双倍bug（浮动、块、margin横向、ie6==》display：inline解决）
         默认行高（overflow：hidden或设置行高小于设置高度或font-size：0解决）


         li下有空行==》display：inline或者浮动
         不支持最小最大宽高...


 （CSS hack）  后置==》  ！important（除了ie6都支持）
                   \9\0(ie9 10支持)
                   \0(ie 8 9 10支持)         
               前置==》  *或者+（ie6 7支持）
                   _(ie6支持)
         
         
          
margin属性bug：
               竖向叠加（取较大值）  横向加法
               对行标签只左右起作用
               子元素margin设置给父元素（塌陷）===》给父元素设置overflow：hidden 
                                                    或者浮动或者border：1px solid transparent




1、浏览器默认字体大小为16px
2、ul ol标签内只能有li标签，不能有其他标签，li标签中可以有其他标签
3、调用注意目录结构  ../代表父目录
4、同步、异步请求(页面刷新和部分刷新)
5、option中value是提交后台的数据而不是默认显示值
6、单选框name值要一致
7、label（需要for和id一致）扩大触摸点击响应范围
8、p,h1-h6标签可以包含行内和文本信息，但不允许含块元素
9、form表单method属性中，post安全性大于get
   get : 通过url提交数据，容量小，不安全，有缓存
   
post : 不通过url提交数据，容量大，安全，无缓存
10、strong（舍弃）、em标签（seo相关）
    b、i标签（仅是加粗斜体）
11、css同样选择器中，后面的覆盖前面的
    不同选择器有优先级仍然会结合不同属性
12、font复合写法：风格 粗细 大小 字体类型
    background复合：背景色 背景图url 定位 重复方式
13、link为xhtml标签，除加载css外还可以加载rss，而@import不是；
    前者载入css跟页面同时载入，后者页面完全载入时加载
    前者属于xhtml标签无兼容问题，后者在css2.1提出，低版本浏览器不支持
    前者可以使用js控制DOM改变样式，后者不支持
14、行内（1000） id（100） class（10） 标签（1）----绝对权值
    !important 同级最高
15、font-size  400正常   700加粗




 word-wrap: break-word;/*CSS3新增*/
 
 word-break:break-all;
}


 word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，
 不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词
 则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，
 当这一行放不下的时候就直接强制断句了。








16、text-align：justify（一般用于移动端）文本两端对齐
17、margin（auto只能设置水平居中，前提设置宽度）
18、标准盒模型的宽高计算方式（注意margin、padding、border边线）
19、visibility：hidden   隐藏 但占网页空间
    display：none 隐藏 不占空间
20、z-index设置元素堆叠顺序，可以负值（同级相比，不会越级）
21、脱离文档流定位：absolute fixed 定位后不占原来位置空间，释放
    不脱离文档流定位：relative 、sticky定位后仍占原来位置空间，不释放
    relative相对原本位置，absolute相对body（reset后的body）。
    fixed永远相对整个窗口固定，随滚动条滚动，但sticky（类似relative+fixed）可以在父级内滚动，父级不用设置relative。
           （只sticky不会越出body，也不会定位到上部已占用空间）
22、a标签状态  link   visited   hover   active

23、CSS hack ：  条件注释法   类内属性前缀法  选择器前缀法

62.5%/150% 表示字体大小为 62.5%，字的行距为 150%，arial是字体名称
一般写成：font-size: 62.5%; line-height: 150%; font-family: arial;