首页 > 其他 > 详细

(13)浮动布局(控制盒模型在页面的什么位置 \ 什么是清浮动)

时间:2019-02-19 17:07:12      阅读:172      评论:0      收藏:0      [点我收藏+]
<!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>

(13)浮动布局(控制盒模型在页面的什么位置 \ 什么是清浮动)

原文:https://www.cnblogs.com/shizhengquan/p/10401831.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!