CSS盒模型： (Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。
概述
万物皆盒子，在所有的html标签中，都可以把他看成盒子。
- 盒子的厚度：就是边框的大小：border
- 盒子的padding属性：内边距（指的是内容和边框的距离）
- 盒子的外边距：margin属性（盒子与盒子之间的距离）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#dl1{
/*设置内边距:简写属性的方式*/
padding: 10px 0 0 20px;
}
#dl2{
/*设置外边距:*/
margin: 20px 0 0 100px;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
<div id="dl2">div2</div>
</body>
</html>
结果展示：
CSS浮动
当某个块标签设置了浮动，就会脱离当前的文档流，后面就会随着浮动的方式进行移动。
float：实现多栏布局
两个属性值：
- left：指定对象向左浮动
- right：指定对象向右浮动
clear：实现换行
三个属性值：
- left：左边不允许出现"浮动"组件
- right：右边不允许出现"浮动"组件
- both：两边都不允许出现浮动组件
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
#div1{
width: 100px;
height: 100px;
border: 3px solid #000;
background-color: #0F0;
float: left;
}
#div2{
width: 100px;
height: 100px;
border: 3px solid #000;
background-color: bisque;
float: left;
}
#div3{
width: 100px;
height: 100px;
border: 3px solid #000;
background-color: cornflowerblue;
float: left;
}
最低0.47元/天 解锁文章
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
