总结部分知识点 _ 杂（html, css, js）

搭载项目环境

• Html核心文件　　index.html
• CSS：base基本样式　|　global全局样式
• images：图片文件夹
• 站点＝项目＝项目文件夹＝根目录
• Js：音频视频
• 引入文件一般放在title下面
• 公共样式写在上面（public/base）
• www.网站URL/favicon.ico（可找到网站icon）
• <link rel="shortcut icon" href="icon路径">　　(shortcut可有可无)
• bitbug.net　　比特虫图标在线制作
• 防止多行文本框拖动
  • textarea{resize:none;}
• 去掉图片低测默认的3像素空白缝隙
  • img{border:0;vertical-align:middle;}
• 谷歌不支持12号以下的字体。
• 清除浮动clearfix

  .clearfix:before, .clearfix:after {
      content: "";
      display: table;
  }
  
  .clearfix:after {
      clear: both;
  }
  
  .clearfix {
      *zoom: 1; /*IE/7/6*/
  }
  

• 浮动的盒子不设置宽，容易掉盒子。
• font：加粗 字号／行高 格式；　　++行高如果不写，默认为0.++
  • font-weight:normal;　　加粗变正常
  • font-style:normal;　　倾斜变正常
  • text-decoration:none;　　下划线删除线 变正常
  • outline-style:none;　　去除蓝色外边框
  • resize:none;　　禁止文本框拖拽
• 文字居中：
  • text-align:center; //不能进准定位
  • 尽量使用padding-left/padding-right
  • 定位和margin
• 行内元素只能设置左右margin，转换成块元素（display:block;）才可以设置上下margin
• value另外一个属性：placeholder="..."——对于IE兼容性差<span style="color:red;">（IE7,8不支持）</span>
• padding:不可设置负值
• 选择器尽量不要超过三个
  • 废了会造成层叠属性困难
• 浮动、定位、都可以使行内元素转换为行内块元素
• 能浮动不定位
• 盒子的稳定性：
  • 只给宽高的盒子（高度剩余法）
  • 给padding的盒子（padding里面不能有内容，宽度不确定的时候使用）
  • 给margin的盒子（容易出现塌陷，不能继承背景色）
• bd+: border:1px solid #000;
• 做logo：
  1. 要加文字
  2. 文字移除：text-indent:－5000px(给a链接7位数的em/8位数的px会出现（BUG）—连接点不到)
  3. 加链接（a标签）
  4. logo图片做a标签背景
• 模拟鼠标：
  • cursor:pointer;　　鼠标变成小手
  • cursor:move;　　鼠标编程四角箭头
  • cursor:text;　　鼠标变成工形插入条光标
  • cursor:default;　　鼠标变成小白

圆角矩形

• border-radius:宽／高一半；
• border-radius:50%;
• border-radius:0.3em;
• border-radius:左上角 右上角 右下角 左下角

---

清除浮动

• 单伪元素标签法

  .clearfix:after{
      content:".";
      height:0;
      visibility:hidden;
      overflow:hidden;
      display:block;
      clear:both;
  }
  .clearfix{
      zoom:1;/*IE678*/
  }
  

• 双伪元素标签法

  .clearfix:before,.clearfix:after{
      content:"";
      display:table;
  }
  .clearfix:after{
      clear:both;
  }
  .clearfix{
      zoom:1;/*IE678*/
  }
  

---

层级

简单概述：谁高

• 使用：
  1. 必须有定位。（除去static）
  2. 用z-index来控制层级数

---

• 浮动的盒子千万不要让他超过父盒子
• 超出父盒子的部分会影响下面盒子中的浮动的子盒子。

---

何时使用margin和padding（不考虑宽高）

1. 需要使用背景图的时候必须使用padding
2. 会出现外边距合并或者margin塌陷的时候用padding
3. 行内元素上下只能设置padding,不能设置margin.(行内高16px)
4. 看border,如果是a链接，看能不能让字体变色，或者显示小手（cursor:pointer）
5. 视具体需求而定。

---

隐藏盒子问题

• overflow:hidden; 隐藏盒子超出的部分
• display:none; 隐藏盒子，并且不占位置（用的最多）
• visibility:hidden;隐藏盒子，而且占位置。
• opacity:0;隐藏／透明盒子，而且占位置。
• position/top/left/…-999px 隐藏盒子，而且占位置

---

浮动的盒子问题

• 浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。

JS关闭a链接的跳转

    <a href="javascript:;">1234</a>
    <a href="javascript:void(0)">1234</a>

---

权重问题

• left比right：权重高。有left又有right的时候，执行left的值
• top比bottom：权重高。有top又有bottom的时候，执行top的值

---

半透明

• ==opacity: 0.4;==
  优点：方便
  缺点：里面的内容也会变得半透明。
• C3的技术来解决半透明：

  background:rgba(0,0,0,0.3);
  background:rgba(0,0,0,.3);
  

---

定位问题

• relative不能给行内元素设置宽高。

---

层级问题（谁高）

• 总结：标准流盒子<浮动盒子<定位盒子（和占据位置无关）（除去static之外）
• 用法：
  1. 必须有定位（除去static之外）
  2. 给定z-index的值为层级的值（不给默认为0）
  3. （层级为0的盒子，也比标准流和浮动高）
  4. （层级为负数的盒子，比标准流和浮动低）
  5. （层级不取小数）
  6. （层级一样，后面的盒子比前面的层级高）
  7. （浮动或者标准流的盒子，后面的盒子比前面的层级高）
• 定位中：absolute是不占据位置的，relative是占位的。而层级的高低，是和占不占位置都没有关系的。