网站服务器申请,长春好的做网站公司,安徽网站推广公司,网站做微信支付功能1.css的编码风格 多行式#xff1a;可读性越强#xff0c;但是CSS文件的行数过多#xff0c;影响开发速度#xff0c;增大CSS文件的大小 一行式#xff1a;可读性稍差#xff0c;有效减少CSS文件的行数#xff0c;有利于提高开发速度#xff0c;减小CSS文件的大小 2.id… 1.css的编码风格 多行式可读性越强但是CSS文件的行数过多影响开发速度增大CSS文件的大小 一行式可读性稍差有效减少CSS文件的行数有利于提高开发速度减小CSS文件的大小 2.id和class 区别1同一个网页相同的id只能出现一次不可重复而class可以任意出现多次 2id的权重选择符权重为100而class的选择符权重为10 3原生JS提供getElementById方法支持通过id对应到相关的HTMLLIElement但原生JS不支持通过class对应到相关的HTMLLIElement 建议尽量使用class少用id 3.CSS hack:使CSS代码兼容不同的浏览器 1.IE条件注释法 只在IE下生效 !--[if IE] link typetext/css hreftest.css relstylesheet ![endif]-- 只在IE 6下生效 !--[if IE 6] link typetext/css hreftest.css relstylesheet ![endif]-- 缺点将同一CSS选择符下的样式分散到三个文件夹去控制增加开发和维护成本 2.选择符前缀法 原理在CSS选择符前加一些只有特定浏览器才能识别的前缀从而某些样式只有特定浏览器才能识别 例如*html前缀只对IE6生效“*html前缀只对IE7生效 style typetext/css .test{width:80px;} /*IE6,IE7,IE8*/ *html .test{width:60px;} /*only for IE6*/ *html .test{width:70px;} /*only for IE7*/ /style 选择符前缀法不能用于内联样式 缺点向后兼容存在风险 3.样式属性前缀法 原理在样式的属性名前加前缀这些前缀只在特定的浏览器下才生效 例如_只在IE6下生效*在IE6 和IE7下生效 style typetext/css .test{width:80px;*width:70px;_width:60px;} /style 优点比选择符前缀法聚合程度更高代码更精简可维护性很强 缺点向后兼容存在风险 总结IE条件注释法在理论上是首推的hack方法但是它不利于开发和维护所以事实上最流行的hack方式是选择符前缀法和样式属性前缀法可以根据需要选择使用 4.解决超链接访问后hover样式不出现的问题 关于a标签的四种状态的排序问题love hate原则即l(link)ov(visited)e h(hover)a(active)te 5.hasLayout 是IE浏览器专有的属性用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现Bug其原因可能与hasLayout没有被自动触发有关我们通过一些技巧手动触发hasLayout属性就可以解决Bug了。 6.块级元素和行内元素的区别 块级元素1.独占一行 2.宽度自动填满其父级元素宽度 3.支持所有CSS命令 行内元素1.不会独占一行 2.相邻的行内元素会排列在同一行里直到一行排不下才会换行 3.宽度随元素的内容而变化 4.设置宽高属性无效 5.不支持上下的margin 7.display:inline-block和hasLayout Inline-block的特点 块在一行显示行内属性标签支持宽高没有宽度的时候内容撑开宽度1. 对于p标签设置display:inline-blockFirefox和IE 8都可以正常解析display:inline-block,而IE6和IE7不支持考虑兼容性必须舍弃这种用法 2.对于spanimgbutton标签IE8和Firefox正常显示IE6和IE7中span标签也有长宽并且显示在一行内display:inline-block并不是真的在IE6和IE7下生效只是令span触发了hasLayout属性其效果和设置zoom:1是一模一样的 实现IE6、IE7、IE8和Firefox都兼容的display:inline-block的应用存在一些问题 1.它只对行内元素实现display:inline-block;如果是块级元素就不行限制我们只能使用行内元素的标签。 2.用到针对IE的hack,*vertical-align,这是不好的能不使用hack就不要使用。 8.relative、absolute和float 文档流z-index:0 relative特点1.脱离文档流(z-index值大于0但是会保留自己在z-index0层的占位 2.如果没有定位偏移量对元素本身没有任何影响 3.不影响元素本身的特性 4.提升层级 5.相对于自己在z-index0层的位置进行定位 absolute的特点1.完全脱离文档流不会保留自己在z-index0层的占位 2.相对于自己最近的一个设置了position:relative和position:absolute的祖先元素如果祖先元素都没有设置position:relative和position:absolute那么就 相对于body元素进行定位 float的特点1.元素在z-index:0层排列 2.改变正常的文档流排列影响到周围元素 注意position:absolute和float会隐式的改变display类型不论之前什么类型的元素display:none除外)只要设置了position:absolute和floatleft或者float:right中的任意一个都会让元素以display:inline-block的方式显示可以设置宽高块在一行显示没有宽度的时候内容撑开宽度。就算我们显式地设置display:inline 或者display:block,也仍然无效float在IE6 下的双边距bug就是利用添加display:inline来解决。position:relative不会隐式改变display类型 转载于:https://www.cnblogs.com/15fj/p/7457303.html
