<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
/*盒模型的解析*/
.div{
/*这个位置属于content区域，就是盒模型最内层的区域，用来设置标签的范围，其实就是整个色块区域的大小*/
width: 200px;
height: 200px;
background-color: red;
}
.div{
width: 100px;
/*边框圆角设置*/
/*border-radius: 50%;*/
}
/*盒模型其他的三个区域*/
.div {
/*solid black 设置边框线的样式（实线/虚线）*/
/*border就是色块区域的边框线，用来设置边框线的粗细以及类型*/
border: 10px solid black;
/*pading用来也是四个参数上下左右，用来设置margin区域在色块区域的位置*/
padding: 10px 20px 30px 40px;
/*margin也是四个参数上下左右，用来设置整个标签在页面的什么位置*/
margin: 100px 0 0 200px;
}
/*ul的reset操作*/
/*ul中有系统默认样式，重置默认样式，然后自定义样式，这个过程就叫reset操作*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
/*p标签的reset操作*/
p {
margin: 0;
}
/*设置ul标签区域的颜色*/
ul {
background-color: pink;
}
/*设置p标签区域的参数*/
p {
width: 100%;
height: 20px;
background-color: orange;
}
/*正常布局下ul的高度可以被li撑开*/
/*代选择器，采用浮动布局将标签同行从左往右排列*/
/*浮动布局下li不再撑开ul的高度，导致ul区域的颜色无法显示*/
ul li {
float: left;
}
/*设置ul的高度从子级获取，为动态获取高度*/
/*这个就叫清浮动，就是让父级动态获取子级的高度*/
ul:after {
/*父级高度正好符合子级高度，无法直接确定具体的高度值*/
/*采用动态获取子级的高度，自动设置高度*/
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="div">12345</div>
<ul>
<!--快速创建5个菜单标签：li{菜单$}*5-->
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
<p>
</p>
</body>
</html>
