零碎的html和css知识点

1.对于标签<a>可以通过

  text-decoration:none;

   来去掉<a>标签的下划线

2.<ul>或者<ol>标签，可以通过

  list-style:none;

   来去掉默认的序号和点

3.常见的css重置问题

*{
    margin:0;
    padding:0;
  }
img{
   border:0;
   }
a{
   text-decoration:none;
 }
ul{
   list-style:none;
 }

4.background是一个集合属性

background-color:#cccccc;
background-image:url(img/2.jpg);
background-repeat:no-repeat;图片不重复

background:repeat-x;图片水平平铺

background-position:right bottom;背景位置从左上变到右下

background:#cccccc  url(img/2.jpg)  no-repeat  10px 50px;合起来写也一样，无顺序要求。

5.透明度

     opacity:0.5; 取值在0-1之间（标准浏览器下）

   filter:alpha(opacity=50);(ie下，取值范围是0-100）

6.图片和文字位置问题

vertical-align:top;图片和旁边文字在上面对齐
vertical-align:middle;图片和旁边文字在中间对齐
vertucal-align:bottom;默认图片和文字在底下对齐

 ！！！这个属性加在img身上！！！
7.让鼠标变成小手

   cursor:pointer;
8.  body自带8px的外边距

   <p>自带16px的上下外边距

9.子元素的宽和高的百分比是相对于父元素的

< style >

# div1{

width : 200 px ;

height : 200 px ;

background : #ff0;

}

# div2{

width : 50 % ;

height : 50 % ;

background : #0ff;

}

< / style >

</ head >

< body >

< div id = "div1" >

< div id = "div2" ></ div >

</ div >

</ body >

10.子元素设置margin-top，父元素一起掉下来，给父元素设置溢出隐藏 overflow:hidden

   

< style >

# div1 {

width : 200 px ;

height : 200 px ;

background : #ff0;

overflow : hidden ;

}

# div2 {

width : 50 % ;

height : 50 % ;

background : #0ff;

margin-top : 50 px ;

}

< / style >

</ head >

< body >

< div id = "div1" >

< div id = "div2" ></ div >

</ div >

</ body >

  11.兄弟元素的两个div，上面的元素设置margin-bottom,下面的元素设置margin-top 中间的间距取他们两个的最大值。

   

< style >

# div1{

width : 200 px ;

height : 200 px ;

background : #ff0;

/* margin-bottom:50px; 两个都是50px的时候，间隙为50px*/

margin-bottom : 100 px ; /* 取大的这个100px */

}

# div2{

width : 200 px ;

height : 200 px ;

background : #0ff;

margin-top : 50 px ;

}

< / style >

</ head >

< body >

< div id = "div1" >div1 </ div >

< div id = "div2" >div2 </ div >

</ body >

12.input标签中的的输入的内容在默认情况下是顶着开头写的，为了让内容不顶在开头需要加属性 text-indent：10px;

< style >

input{

text-indent : 5 px ;

}

< / style >

</ head >

< body >

< label >

姓名： < input type= "text" >

</ label >

</ body >

13.获取焦点的时候input会变成蓝色，去掉这个默认属性用outline:none;

< style >

input{

/* text-indent:5px; */

outline : none ;

}

< / style >

</ head >

< body >

< label >

姓名： < input type= "text" >

</ label >

</ body >

14.rowspan和colspan

< body >

< table border= 1 >

< tr >

< td >11 </ td >

< td rowspan=" 2" >22 </ td > <!--让22跨两行-->

</ tr >

< tr >

< td >33 </ td >

<!-- <td>44</td> -->

</ tr >

</ table >

</ body >

< body >

< table border= 1 >

< tr >

< td colspan=" 2" >11 </ td > <!--让11跨两列-->

<!-- <td>22</td> -->

</ tr >

< tr >

< td >33 </ td >

< td >44 </ td >

</ tr >

</ table >

</body>

15.input表单

< body >

< form action= "" >

<!--action里面写后台方法的地址-->

姓名：

< input type= "text" > 密码：

< input type= "password" >

</ form >

<!--单选框 radio-->

< input type= "radio" name= "sex" >男

< input type= "radio" name= "sex" >女

< br >

<!--多选框 checkbox-->

< input type= "checkbox" name= "hobby" >篮球

< input type= "checkbox" name= "hobby" >足球

< input type= "checkbox" name= "hobby" >排球

< br >

<!--下滑菜单-->

< select >

< option >黑大 </ option >

< option >林大 </ option >

< option >农大 </ option >

</ select >

<!--提交按钮 submit value里面是按钮上的名字 内容提交到form里面action-->

< input type= "submit" value= "上传" >

<!--重置按钮 reset-->

< input type= "reset" value= "reset" >

</body>

16.em和rem

< style >

# div1{

font-size : 10 px ;

width : 10 rem ; /*单位rem是相对于html字体大小的倍数 默认字体大小为16px 所以div1 宽160px 高160px*/

height : 10 rem ;

background : #0ff;

}

# div2{

width : 10 em ; /*单位em 相对于父元素font-size的倍数 所以div2 宽100px，高100px-*/

height : 10 em ;

background : #ff0;

}

< / style >

</ head >

< body >

< div id = "div1" >

< div id = "div2" ></ div >

</ div >

</ body >

17.行级元素的margin

< style >

*{

margin : 0 ;

padding : 0 ;

}

div{

width : 200 px ;

height : 200 px ;

background : #000;

}

span{

margin-left : 50 px ;

margin-top : 50 px ;

display : block ; /*行级元素设置margin 左右好使，上下不好使，需要把行级元素变成块级元素才可以*/

}

< / style >

</ head >

< body >

< div ></ div >

< span >aaaaaaaaa </ span >

</ body >

18.z-index属性

< style >

# div1{

width : 400 px ;

height : 400 px ;

background : #ff0;

position : absolute ;

top : 0 ;

left : 0 ;

z-index : -1 ; /*在不用z-index的时候，div2在div1上面，给div1加上z-index属性之后，

div1离眼睛更近一些，所以div1在上面了 z-index属性只能给已经定位的元素加（可以为负值）*/

}

# div2{

width : 200 px ;

height : 200 px ;

background : #0ff;

position : absolute ;

top : 0 ;

left : 0 ;

}

< / style >

</ head >

< body >

< div id = "div1" ></ div >

< div id = "div2" ></ div >

</ body >