您的位置：首页 > Web前端 > CSS

零碎的html和css知识点

2017-09-22 10:25 447 查看

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:#ff
113a4
0;
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>
</tr>
<tr>
<td>33</td>

</tr>
</table>
</body>

<body>
<tableborder=1>
<tr>
<td
colspan="2">11</td>

</tr>
<tr>
<td>33</td>
<td>44</td>
</tr>
</table>
</body>

15.input表单

<body>
<form
action="">

姓名：
<inputtype="text"> 密码：
<inputtype="password">
</form>


<inputtype="radio"name="sex">男
<inputtype="radio"name="sex">女
<br>


<inputtype="checkbox"name="hobby">篮球
<inputtype="checkbox"name="hobby">足球
<inputtype="checkbox"name="hobby">排球
<br>

<select>
<option>黑大</option>
<option>林大</option>
<option>农大</option>
</select>

<inputtype="submit"value="上传">

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航