2020年2月21日 学习笔记
不是系统的学习笔记
css class和id的区别
使用范围不同
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。ID属性的操作类似于CLASS属性，ID属性的值在整篇文档中必须是唯一的。
表示方法不同
class .
id #
用途
可以使用CLASS属性来分类元素。ID属性用来标记文档中唯一元素
浮动
float css属性
left向左
right向右
可以选择向左或者向右
可以利用css特性来选择如何浮动。
在分别每一个div里面增加向左和向右。
原因是要分别的移动对应方块的位置。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.d1,.d2,.d3{
width:200px;
height:200px;
}
.d1{
background-color:blueviolet;
float:left;
}
.d2{
background-color:yellow;
float:right;
}
.d3{
background-color:blue;
float:left;
}
</style>
</head>
<body>
<div class="d1">
1
</div>
<div class="d2">
2
</div>
<div class="d3">
3
</div>
</body>
</html>
如果想要统一放到一面可直接在.d1,.d2,.d3属性增加float：向左或向右。
<style type="text/css">
.d1,.d2,.d3{
width:200px;
height:200px;
float: left;
}
如果想让每一个方框都有相同的间隔距离，需要增加方块本身的外边距。
margin外边距
<style type="text/css">
.d1,.d2,.d3{
width:200px;
height:200px;
float: left;
margin-left:20px;
}
想要在这三个方块外侧在添加一个限制区域在这段代码增加一个新的div用id，因为区域是唯一的只放这三个class的div。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#outerdiv{
width: 700px;
height: 700px;
border: 2px solid blue;
}
.d1,.d2,.d3{
width:200px;
height:200px;
float: left;
margin-left:20px;
}
.d1{
background-color:blueviolet;
}
.d2{
background-color:yellow;
}
.d3{
background-color:blue;
}
</style>
</head>
<body>
<div id="outerdiv">
<div class="d1">
1
</div>
<div class="d2">
2
</div>
<div class="d3">
3
</div>
</div>
</body>
</html>
注释
border属性 线条
solid 属性选择颜色
margin-left属性外边距
如果想让outerdiv移动可以增加margin增加外边距。
#outerdiv{
width: 700px;
height: 700px;
border: 2px solid blue;
margin-left:50px;
}
如果想要居中使用margin:0px auto;
#outerdiv{
width: 700px;
height: 700px;
border: 2px solid blue;
margin:0px auto;
}
浙公网安备 33010602011771号