label标签
#效果，点击标签，会选中标签中指定的input框
<body>
<form>
<label for="a"> 姓名：</label>
<input type="text" id="a">
<label for="b">男</label>
<input type="radio" id="b" name="sex">
<input type="radio" id="c" name="sex">
</form>
<label for="c">点我</label>
</body>
文字属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#文字对齐方式
/*div{*/
/* 100px;*/
/*background: yellow;*/
/*text-align: center;*/
/*}*/
#文字装饰
/*div{*/
/* 100px;*/
/*background: yellow;*/
/*!*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: yellow;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div> 我是文字</div>
<a href="">adsasd</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<p>蓝蓝的天空我的爱</p>
<div>蓝蓝的天空我的爱</div>
</body>
背景属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div{*/
/*height: 1000px;*/
/**/
/*background-image: url("1.jpeg");*/
/*background-repeat: repeat;*/ #背景图片展开方式
/*}*/
div{
height: 100px;
100px;
background-image: url("1.jpeg");
background-position: 200px 200px #移动背景图片位置
}
</style>
</head>
<body>
<div>
asdasdasdas
</div>
</body>
边框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
100px;
/*border: green solid 3px;*/
border:orange solid 3px; #三个参数位置可以交换
border-radius:50%; #块级为正方型时，将圆角调至50%可以得到圆形
}
</style>
</head>
<body>
<div></div>
</body>
display属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*消失设成none*/
/*display: none;*/ #不展示
/*display: inline;*/ #行内展示
}
/*span{*/
/*display: block;*/
/*height: 230px;*/
/* 1000px;*/
/**/
/*}*/
span{
200px;
height: 100px;
background-color: black;
display: inline-block; #行内块级展示
}
.a{
400px;
height: 300px;
background-color: green;
/*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>1232323</span>
<span>1232323</span>
<div class="a">456</div>
<div class="b">789</div>
</body>
盒子模型
#margin<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.a{
400px;
height: 400px;
border: black 1px solid;
/*margin-bottom:20px ;*/ #可以单独设置四个margin
/*margin-left: 40px;*/
margin:20px 30px 40px 50px ; #顺时针顺序，需要几个列几个
}
.b{
300px;
height: 400px;
border: red 1px solid;
/*margin-top: 35px;*/
}
.c{
20px;
height: 20px;
background-color: orange;
margin:10px auto; #自动调节上下，或者左右
}
</style>
</head>
<body>
<div class ="a"><div class="c"></div><div>sad</div></div>
<div class="b">456</div>
</body>
#padding
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
400px;
height: 400px;
border: orange solid 2px;
padding-left: 30px;
padding-top:300px;
}
</style>
</head>
<body>
<div>123</div>
</body>
浮动
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a,.b,.c{
250px;
height: 250px;
}
.a{
background-color: red;
float: left;
}
.b{
background-color: black;
float: right;
}
.c{
background-color: gold;
float: right;
}
.p{
border: gold solid 3px;
/*height: 200px;*/
}
.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>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a,.b,.c{
250px;
height: 250px;
}
.a{
background-color: red;
float: left;
}
.b{
background-color: black;
float: right;
}
.c{
background-color: gold;
float: right;
}
.p{
border: gold solid 3px;
/*height: 200px;*/
}
/*.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>
</body>
overflow
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
200px;
height: 200px;
border: gold solid 2px;
overflow: hidden;
border-radius: 50%;
}
img{
max- 200px;
min-height: 200px;
}
</style>
</head>
<body>
<div>
<img src="1.jpeg" alt="">
</div>
</body>
定位
#相对定位
相对于原始位置，变动位置<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
200px;
height: 200px;
background-color: gold;
position: relative;
top:20px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
#绝对定位
相对于父级元素，进行位置移动<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.c{
400px;
height: 400px;
background-color: black;
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>
#固定定位
始终固定在网页的一个位置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 1800px;
background-color: pink;
}
.b{
height: 50px;
50px;
background-color: green;
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">点我会去</div>
</body>
#定位脱离文档流
意思就是当通过定位进行位置调整时，原位置是否还属于移动后的元素
脱离：绝对定位，固定定位
不脱离：相对定位
z-index和模态框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
position: fixed;
/*opacity:0.4;*/ #透明度
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,192,203,0.4);
z-index:200; #元素的图层位置，0表示最底层
}
.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">asdasd</div>
<div class="b"></div>
</body>