Html5笔记

引入css

  <style>
      //css运行的代码
      标签名{
          ...//可以所有这类标签进行控制
      }
      
      #id{
          ...//对Id进行控制#开头
      }

      .class{
          ...//对class进行控制 .开头 
      }
  </style>

浮动

  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文件引入

  //直接使用
  <style></style>
  
  //外部引入
  <link rel="stylesheet" href="路径" />

  //html标签中写
  <div style=""></div>

  //外部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

框架集

  <frameset rows="200px,*">
      <frame src="" target="you"></frame>
      <frame src="" name="you" ></frame>
  </frameset>

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