Html5笔记

• 引入css

• 浮动

    float:left//right..
  

  浮动属性，子元素如果都浮动了，那么该父元素就没有高度

• 清除浮动

    clear:left//right，both...清除左浮
  

• 常用习惯

  一般会在body中弄一个总的div，包裹所有的div

• margin

    margin:10px//表示全部都有
    margin-top：10px//表示仅上部分有
    margin:10px 20px 10px //从 挨次设置 上 右 下 左，如果没设置的就取对边
    margin:0px auto//会自动居中
  

  边距 ，盒子与盒子间的距离
  相邻的普通元素（漂浮就不会）margin取较大值

• 内联元素（行内元素）

  不会独占一行
  宽高，竖直方向margin都无效，水平有效，因为他只行内元素仅仅在行内发挥作用

    display:block//将内联元素转为块状元素
    display:inline//将块状元素转为内联元素
    display:none//将元素变无
  

• 段落缩进

    text-indent
  

• 背景

    background-color:blue;
    background-image:url(图片地址);//设置背景图地址
    background-repeat:no-repeat;//背景图平铺模式
    background-attachment:fixed;//背景图固定
    background-position:center right;//设置背景图位置,前水平后竖直，可以精确px值
  

• css文件引入

    //直接使用
    
    
    //外部引入
    
  
    //html标签中写
    
  
  
    //外部css中引入另一个外部css
    @import url(路径)
  

• a标签

  伪类

    a:link{}//默认
    a:hover{}//鼠标放上去
    a:active{}//点击的一瞬间
    a:visited{}//已经点击过的
    //必须按照顺序
  

• IE BUG

  双倍Margin BUG

    解决方案: _dispaly:inline;
  

• 相对定位

  相对自身原来的位置
  注意:原来的位置还会保存，不会被占用

    position:relative
    top:20px;//left,right,bottom
  

• 绝对定位

  相对于父元素任意两个边的定位
  注意，绝对定位的父元素必须要有position元素，否则将向上需找有position元素的父元素，直到body,原来的位置可以被占用，类似漂浮

    position:absolute;
    top:20px;//left,right,bottom
    z-index：10;//绝对定位浮动高度，高的覆盖低的
  

• overflow

  溢出处理

    overflow:hidden;//溢出的隐藏
    overflow:visible;//溢出的显示
    overflow:scroll;//溢出后滚动
    overflow:auto；//自动
  

• frameset

  框架集

  rows为行，cols为列。取值可为px,%，*(表示全部)
  target可使目标frame进行跳转