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
图片: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;