前端的那些基本标签
html页面的骨架，相当于人的骨头，只有骨头是不是看着有点瘆人，只有HTML也是如此。
css,相当于把骨架修饰起来，相当于人的皮肉。
js(javascripts),动起来，相当于人的血液，大脑等一切能使人动起来的器官或者其他的。
🍓🍓按要求写一个圆
解答：
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
width:100px;
height:100px;
border:1px #000 solid;
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
🍓🍓设置盒子宽高
解答：
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.box {
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
0d364b7a81f043f.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height:100px;
width:100ps;
}
#id{
color:red;
}
</style>
</head>
<body>
<div id="tone" class="box" ></div>
</body>
</html>
🍓🍓浮动和清除浮动
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
/*补全代码*/
display:table;
content:' ';
clear:both
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
🥭🥭三、浮动移动的特点 和浮动沾点点边，那就加上吧
♻♻1、浮动元素会完全脱离文档流，不再占据文档流中的位置
♻♻2、设置浮动以后元素会向父元素的左侧或右侧移动
♻♻3、浮动元素默认不会从父元素中移出
♻♻4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
♻♻5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
♻♻6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
简单总结： 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列， 通过浮动可以制作一些水平方向的布局
🍓🍓固定定位
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
/*补全代码*/
position:fixed;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div class='box'>这是一个div块级标签</div>
</body>
</html>
总结：
🥭🥭1、前面看明白了，因该知道 .box 是class属性绑定的渲染
🥭🥭别看他是一个字，其实他是一个块，只不过字在块上，下面看看这张图你就明白了。
看见没，是一个宽高为100px的块
🍓🍓CSS单位（一）
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
/*补全代码*/
width:4em;
height:4em;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
总结：
🥭🥭这个没啥好说的，em是相对于自身字体大小的单位 ，记住就行。
🍓🍓CSS单位（二）
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
/*补全代码*/
height:4rem;
width:4rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
总结：
在css中单位长度用的最多的是px、em、rem，这三个的区别是：
🥭🥭px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
🥭🥭em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
🥭🥭对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
看着是不是感觉手有点痒痒的了。那就来注册下自己试试吧，试试才知道好不好，试试才知道适不适合自己。就算最后没用这款软件那也尝试过，不后悔。
可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随程序员一生的app
觉得有用的可以给个三连，关注一波！！！带你玩转前端
