css用法
目录
1. label标签
定义：<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" id="a">
<label for="b">男</label>
<input type="radio" id="b" name="sex">
<label for="c">女</label>
<input type="radio" id="c" name="sex">
</form>
</body>
</html>
2. 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字属性</title>
<style>
/*文字对齐方式*/
/*div{*/
/* width: 100px;*/
/* background: orange;*/
/* text-align: center;*/
/*}*/
/*文字装饰*/
/*div{*/
/*width: 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{
width: 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;
width: 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;
width: 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{*/
/* width: 200px;*/
/* height: 100px;*/
/* background-color: green;*/
/* !*使元素同时具有行内元素和块级元素的特点*!*/
/* display: inline-block;*/
/*}*/
/*.a{*/
/* width: 400px;*/
/* height: 300px;*/
/* background-color: orange;*/
/* !*可以隐藏某个元素，且隐藏的元素不会占用任何空间*!*/
/* !*display: none;*!*/
/* !*可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间*!*/
/* !*visibility: hidden;*!*/
/*}*/
/*.b{*/
/* width: 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{
width: 400px;
height: 400px;
border: blue solid 1px;
margin-bottom: 20px;
margin-left: 40px;
}
.b{
width: 300px;
height: 400px;
border: red solid 1px;
margin-top: 35px;
}
.c{
width: 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{
width: 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{
width: 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{
width: 200px;
height: 200px;
border: gold solid 2px;
overflow: hidden;
border-radius: 50%;
}
img{
/*最小宽度*/
min-width: 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{
width: 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{
width: 400px;
height: 400px;
background-color: purple;
float: left;
}
.a{
width: 400px;
height: 400px;
background-color: gold;
position: relative;
float: right;
}
.b{
width: 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;
width: 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{
width: 200px;
height: 200px;
}
.a{
width: 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;
width: 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>
