与基础知识分手

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

命名规范

id、class和文件的命名规范：

  • 命名使尽量使用英文
    不会可以查词典，实在不会可以使用拼音，但是不可以英文和拼音混合使用。
  • 命名格式
    • 驼峰命名法
      首字母小写，之后每个单词开头字母大写
      例：aaaBbbCcc helloWorld
    • 所有字母小写，单词之间使用“_”或“-”连接
      例：aaa_bbb_ccc hellow-word

IE6双倍边距Bug

在IE6浏览器中，当为一个向左浮动的元素设置左外边距或为一个向右浮动的元素设置右外边距时，该外边距将被IE6以指定值的2倍渲染。

例：

<!-- CSS -->
<style type="text/css">
        .box1 {
                widht: 100px;
                height: 100px;
                float: left;
        }
</style>

<!-- HTML -->
<body>
        <div class="box1"><div/>
</body>

添加display: inline;来解决该问题。

<!-- CSS -->
<style type="text/css">
        .box1 {
                widht: 100px;
                height: 100px;
                float: left;
                display: inline;
        }
</style>

<!-- HTML -->
<body>
        <div class="box1"><div/>
</body>

对于一个浮动元素来说，设置display: inline;没有任何意义，但是该设置可以解决IE6的双倍边距问题，并且不影响其他浏览器显示效果。

页面练习

页面练习效果

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/70.html