零碎的html和css知识点

来源：互联网发布：春风沉醉的夜晚知乎编辑：程序博客网时间：2024/06/18 10:09

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: 200px;
height: 200px;
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: 200px;
height: 200px;
background:#ff0;
overflow: hidden;
}

#div2 {
width: 50%;
height: 50%;
background:#0ff;
margin-top:50px;
}
</style>
</head>

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

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

<style>
#div1{
width: 200px;
height: 200px;
background:#ff0;
/* margin-bottom:50px; 两个都是50px的时候，间隙为50px*/
margin-bottom:100px;/* 取大的这个100px */
}
#div2{
width: 200px;
height: 200px;
background:#0ff;
margin-top:50px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>

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

<style>
input{
text-indent:5px;
}
</style>
</head>
<body>
<label>
姓名：<inputtype="text">
</label>
</body>

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

<style>
input{
/* text-indent:5px; */
outline: none;
}
</style>
</head>
<body>
<label>
姓名：<inputtype="text">
</label>
</body>

14.rowspan和colspan

<body>
<tableborder=1>
<tr>
<td>11</td>
<td rowspan="2">22</td><!--让22跨两行-->
</tr>
<tr>
<td>33</td>
<!-- <td>44</td> -->
</tr>
</table>
</body>

<body>
<tableborder=1>
<tr>
<tdcolspan="2">11</td><!--让11跨两列-->
<!-- <td>22</td> -->
</tr>
<tr>
<td>33</td>
<td>44</td>
</tr>
</table>
</body>

15.input表单

<body>
<formaction="">
<!--action里面写后台方法的地址-->
姓名：
<inputtype="text"> 密码：
<inputtype="password">
</form>
<!--单选框 radio-->
<inputtype="radio"name="sex">男
<inputtype="radio"name="sex">女
<br>
<!--多选框 checkbox-->
<inputtype="checkbox"name="hobby">篮球
<inputtype="checkbox"name="hobby">足球
<inputtype="checkbox"name="hobby">排球
<br>
<!--下滑菜单-->
<select>
<option>黑大</option>
<option>林大</option>
<option>农大</option>
</select>
<!--提交按钮 submit value里面是按钮上的名字 内容提交到form里面action-->
<inputtype="submit"value="上传">
<!--重置按钮 reset-->
<inputtype="reset"value="reset">
</body>

16.em和rem

<style>
#div1{
font-size:10px;
width: 10rem;/*单位rem是相对于html字体大小的倍数 默认字体大小为16px 所以div1 宽160px 高160px*/
height: 10rem;
background:#0ff;
}
#div2{
width: 10em;/*单位em 相对于父元素font-size的倍数 所以div2 宽100px，高100px-*/
height: 10em;
background:#ff0;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>

17.行级元素的margin

<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background:#000;
}
span{
margin-left: 50px;
margin-top: 50px;
display:block;/*行级元素设置margin 左右好使，上下不好使，需要把行级元素变成块级元素才可以*/
}
</style>
</head>
<body>
<div></div>
<span>aaaaaaaaa</span>
</body>

18.z-index属性

<style>
#div1{
width: 400px;
height: 400px;
background:#ff0;
position:absolute;
top:0;
left:0;
z-index:-1;/*在不用z-index的时候，div2在div1上面，给div1加上z-index属性之后，
div1离眼睛更近一些，所以div1在上面了 z-index属性只能给已经定位的元素加（可以为负值）*/
}
#div2{
width: 200px;
height: 200px;
background:#0ff;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

阅读全文

0 0