CSS 属性
所有属性查询文档 CSS 教程 | 菜鸟教程
名称 | 作用 | 值 | 备注 |
width | 宽 | Npx | |
height | 高 | Npx | |
border | 边框 | Npx,边框类型 | |
background-color | 背景颜色 | 颜色代码 | |
background-image | 背景图片 | 图片url | |
background-size | 背景图片大小 | 两个值 宽和高的px | |
margin | 外边距 | Npx,可以传1个,可以传4个 | |
margin-left、margin-right、margin-bottom、margin-top | 上下左右外边距 | Npx | |
padding | 内边距 | Npx,可以传1个,可以传4个 | |
padding-left、padding-right、padding-bottom、padding-top | 上下左右内边距 | Npx | |
font-size | 字体大小 | Npx | |
text-align | 文字对齐方式 | right、left、center | |
line-height | 行高 | Npx、百分比 | |
display | 改变元素类型 | none、block、inline、inline-block | |
position | 元素定位 | absolute、fixed、relative | |
z-index | 显示优先级 | 整数/负数,数字越大优先级越高 | |
overflow | 控制内容溢出元素框时显示的方式 | hidden、scroll、auto | |
float | 块级元素浮动 | left、right |
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css属性</title>
<style>
div{
background-image: url("ico/8vIhjc-WEF0.jpg");
}
/*padding 内边距属性,设置标签内的标签的边距*/
.padding{
width: 400px;
height: 400px;
background-color: #bdedbc;
padding: 10px;
border: 5px solid;
}
.pos1{
position: fixed;
top: 100px;
left: 300px;
}
.pos2{
position: relative;
top: 100px;
left: 300px;
}
.pos3{
position: absolute;
top: 100px;
left: 300px;
}
</style>
</head>
<!-- margin 边距可以写在 head 里边,也可以写在 body,也可以在标签中定义-->
<!--边距也可以写负数,这样就会产生覆盖的现象-->
<body style="margin: 0px">
<div style="width: 640px;height: 480px;background-color: #e4ecf3;border: 1px solid;margin: 0px">
div 标签属性
</div>
<div style="width: 100px;height: 100px;background-color: #66cc66;border: 10px solid;margin-top: 20px ">
</div>
<div class="padding">
<div style="width: 200px;height: 200px;background-color: #FF6600;border: sandybrown 5px solid">
</div>
</div>
<!--text-align: left 文字对齐方式,left 左对齐,right 右对齐,center 居中显示-->
<div style="text-align: center">
background-image: 背景图片 <br>
background-color:背景色 <br>
width: 宽 <br>
height: 高 <br>
border: 边框 <br>
margin: 上下左右边距 <br>
margin-top: 上边距 <br>
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>
</div>
<!--display 可以改变元素属性,可以将内联元素和快联元素互换-->
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none;display: block">百度一下</a>
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>
<a href="http://www.baidu.com" style="cursor: default;text-decoration: none">百度一下</a>
<!--display: none 可以将当前的标签隐藏不显示-->
<div style="display: none">
<h1>
今天是周二,今儿要上班
</h1>
</div>
<!--position:fixed 绝对位置,相当于当前浏览器的页面的固定位置,即使页面滑动也在指定的位置-->
<div style="height: 50px;width: 50px;background-color: #FF6600" class="pos1">
fixed
</div>
<!--position: relative 相对定位,相对于父级元素的位置-->
<div style="height: 300px;width: 300px;background-color: #cc0000">
<div style="height: 50px;width: 50px;background-color: #FF6600" class="pos2">
relative
</div>
</div>
<!--position: absolute 绝对定位,固定在当前页面中,页面滑动也会跟着一起动-->
<div style="height: 300px;width: 300px;background-color: #cc0000" class="pos3">
absolute
</div>
<p>
今儿天气很好呀!今儿天气很好呀!今儿天气很好呀!今儿天气很好呀!今儿天气很好呀!今儿天气很好呀!
</p>
<img src="ico/adK3Vu70DEQ.jpg" alt="" style="position: fixed;z-index: -1;border: 10px solid;width: 200px;height: 200px" id="img1">
<!--overflow: hidden 当标签内的内容溢出元素时显示方式,hidden 为隐藏-->
<div style="height: 100px;width: 140px;background-color: #FF6600;overflow: hidden">
今儿天气很好呀!
今儿天气很好呀!
今儿天气很好呀!
今儿天气很好呀!
今儿天气很好呀!
</div>
<div style="height: 200px;background-color: #cc0000">
<div style="float: left;margin-right: 10px">我的电脑</div>
<div style="float: contour;margin-right: 10px">我的文档</div>
<div style="float: right;margin-right: 10px">回收站</div>
</div>
</body>
</html>