css用法 1. label标签 2. 文字属性 3. 背景属性 4. 边框 5. display 6. 盒子模型margin 7. 盒子模型padding 8. 浮动 9. overflow 10. 相对定位 11. 绝对定位 12. 固定定位 13. 定位脱离文档流 14. 模态框
目录
定义:<label>
标签为 input 元素定义标注(标记)。
说明:
- label 元素不会向用户呈现任何特殊效果。
-
<label>
标签的 for 属性值应当与相关元素的 id 属性值相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label</title>
</head>
<body>
<form action="">
<label for="a">姓名:</label>
<input type="text" >
<label for="b">男</label>
<input type="radio" >
<label for="c">女</label>
<input type="radio" >
</form>
</body>
</html>
2. 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字属性</title>
<style>
/*文字对齐方式*/
/*div{*/
/* 100px;*/
/* background: orange;*/
/* text-align: center;*/
/*}*/
/*文字装饰*/
/*div{*/
/* 100px;*/
/*background: orange;*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*}*/
a{
text-decoration: none;
}
li{
list-style: none;
}
/*缩进与字间距*/
p,div{
/*缩进*/
text-indent: 32px;
/*字间距*/
letter-spacing: 10px;
}
/*行高*/
div{
400px;
height: 200px;
background: orange;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>我是文字</div>
<a href="">zxczxc</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<p>年少有为</p>
<div>年少有为</div>
</body>
</html>
3. 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
/*div{*/
/* height:1000px;*/
/* !*背景颜色*!*/
/* background-color: orange;*/
/* !*背景图片*!*/
/* background-image: url("1.jpg");*/
/* !*背景重复*/
/* repeat(默认):背景图片平铺排满整个网页*/
/* repeat-x:背景图片只在水平方向上平铺*/
/* repeat-y:背景图片只在垂直方向上平铺*/
/* no-repeat:背景图片不平铺*/
/* *!*/
/* background-repeat: repeat;*/
/*}*/
div{
height: 200px;
200px;
/*背景图片*/
background-image: url("1.jpg");
/*背景位置*/
background-position: 200px 260px;
}
</style>
</head>
<body>
<div>hello!</div>
</body>
</html>
4. 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div{
height: 100px;
100px;
/*边框solid:none:无边框, dotted:点状虚线边框, dashed:矩形虚线边框, solid:实线边框*/
border: green solid 3px;
/*实现圆角边框的效果*/
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5. display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
/*div{*/
/* !*消失设成none*!*/
/* !*display: none;*!*/
/* !*按行内元素显示*!*/
/* display: inline;*/
/* !*默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。*!*/
/* !*display: block;*!*/
/*}*/
/*span{*/
/* 200px;*/
/* height: 100px;*/
/* background-color: green;*/
/* !*使元素同时具有行内元素和块级元素的特点*!*/
/* display: inline-block;*/
/*}*/
/*.a{*/
/* 400px;*/
/* height: 300px;*/
/* background-color: orange;*/
/* !*可以隐藏某个元素,且隐藏的元素不会占用任何空间*!*/
/* !*display: none;*!*/
/* !*可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间*!*/
/* !*visibility: hidden;*!*/
/*}*/
/*.b{*/
/* 400px;*/
/* height: 300px;*/
/* background-color: red;*/
/* display: inline-block;*/
/*}*/
.a,.b{
display: inline-block;
}
</style>
</head>
<body>
<div>123</div>
<span>zzzzzz</span>
<span>xxxxxx</span>
<div class="a">aaaaaa</div>
<div class="b">bbbbbb</div>
</body>
</html>
6. 盒子模型margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型margin</title>
<style>
/*margin:用于控制元素与元素之间的距离 (上右下左)
padding:用于控制内容与边框之间的距离
Border(边框):围绕在内边距和内容外的边框
Content(内容):盒子的内容,显示文本和图像*/
*{
margin: 0;
padding:0;
}
.a{
400px;
height: 400px;
border: blue solid 1px;
margin-bottom: 20px;
margin-left: 40px;
}
.b{
300px;
height: 400px;
border: red solid 1px;
margin-top: 35px;
}
.c{
20px;
height: 20px;
background-color: orange;
/*auto: 居中*/
margin: 10px auto;
}
</style>
</head>
<body>
<div class="a">111
<div class="c"></div>
<div>zzz</div>
</div>
<div class="b">222</div>
</body>
</html>
7. 盒子模型padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型padding</title>
<style>
/*padding: 上右下左*/
div{
400px;
height: 400px;
border:orange solid 2px;
padding-left: 30px;
padding-top: 100px;
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>
8. 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.a,.b,.c{
250px;
height: 250px;
}
.a{
background-color: red;
float:left;
}
.b{
background-color: orange;
float: right;
}
.c{
background-color: green;
float: right;
}
.p{
border: purple solid 3px;
/*height: 200px;*/
}
/*clear属性规定元素的哪一侧不允许其他浮动元素
clear属性只会对自身起作用,而不会影响其他元素*/
.clear{
clear: both;
}
/*清除浮动的副作用*/
/*.clear:after{*/
/* content:"";*/
/* display: block;*/
/* clear: both;*/
/*}*/
</style>
</head>
<body>
<div class="p clear">
<div class="a">123</div>
<div class="b"></div>
<div class="c"></div>
<div class="clear"></div>
</div>
</body>
</html>
9. overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
/*visible(默认值):内容不会被修剪,会呈现在元素框之外*/
/*hidden:内容会被修剪,并且其余内容是不可见的*/
/*scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容*/
/*auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容*/
/*inherit:规定应该从父元素继承 overflow 属性的值*/
div{
200px;
height: 200px;
border: gold solid 2px;
overflow: hidden;
border-radius: 50%;
}
img{
/*最小宽度*/
min- 190px;
/*最大高度*/
max-height: 200px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
</html>
10. 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
/*相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物*/
*{
margin: 0;
padding: 0;
}
div{
200px;
height: 200px;
background-color: purple;
position: relative;
top: 20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
11. 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
/*absolute: 绝对定位是相对于父级元素来说的*/
*{
margin: 0;
}
.c{
400px;
height: 400px;
background-color: purple;
float: left;
}
.a{
400px;
height: 400px;
background-color: gold;
position: relative;
float: right;
}
.b{
200px;
height: 200px;
background-color: red;
position: absolute;
top:400px;
left: 30px;
}
</style>
</head>
<body>
<div class="c"></div>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
12. 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
/*fixed: 以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动*/
.a{
height: 1800px;
background-color: purple;
}
.b{
height: 50px;
50px;
background-color: orange;
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">点我</div>
</body>
</html>
13. 定位脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位脱离文档流</title>
<style>
/*脱离文档流: 绝对定位,固定定位*/
/*不脱离文档流: 相对定位*/
.b,.c{
200px;
height: 200px;
}
.a{
700px;
height: 700px;
background-color: orange;
position: relative;
}
.b{
background-color: red;
position: fixed;
bottom: 30px;
}
.c{
background-color: green;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
14. 模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
/*z-index:设置对象的层叠顺序,数值大的压盖住数值小的
只有定位了的元素,才能有z-index。不管相对定位,绝对定位,固定定位都可以使用z-index,而浮动元素不能使用z-index
*/
.a{
position: fixed;
/*opacity: 透明效果。取值范围是0~1,0是完全透明,1是完全不透明。字体也透明*/
/*opacity: 0.4;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*rgba: a表示透明度。字体不透明*/
background-color: rgba(255,192,203,0.4);
z-index:200;
}
.b {
position: fixed;
200px;
height: 200px;
background-color: white;
z-index: 201;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="a">zzzzzz</div>
<div class="b"></div>
</body>
</html>