1.盒子浮动 float
Float 属性：
默认是 none，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；
先看看没有加浮动的初始效果:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 5px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; } .a2{ background-color: blue; border: 2px blue solid; margin: 5px; } p{ background-color: gray; border: 2px gray solid; margin: 5px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> <div class="a2">盒子2</div> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div></body></html>
复制代码
运行结果：
添加浮动 float 之后：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 5px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; /* 设置盒子1向左悬浮 */ float: left; } .a2{ background-color: blue; border: 2px blue solid; margin: 5px; /* 设置盒子2向右悬浮 */ float: right; } p{ background-color: gray; border: 2px gray solid; margin: 5px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> <div class="a2">盒子2</div> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div></body></html>
复制代码
运行结果:
2.使用 clear 清除浮动的影响;
Clear 属性：
默认是 none，允许两边都可以有浮动对象；
Left： 不允许左边有浮动对象 ; Right：不允许右边有浮动对象; Both：不允许有浮动对象
2.1 不允许左边有浮动对象；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 5px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; /* 设置盒子1向左悬浮 */ float: left; } .a2{ background-color: blue; border: 2px blue solid; margin: 5px; /* 设置盒子2的高度为50px; */ height: 50px; /* 设置盒子2向右悬浮 */ float: right; } p{ background-color: gray; border: 2px gray solid; margin: 5px; /* 设置p不允许左悬浮 */ clear: left; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> <div class="a2">盒子2</div> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div></body></html>
复制代码
运行结果：
2.2 不允许右边有悬浮对象；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 5px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; /* 设置盒子1的高度为100px; */ height: 100px; /* 设置盒子1向左悬浮 */ float: left; } .a2{ background-color: blue; border: 2px blue solid; margin: 5px; /* 设置盒子2的高度为50px; */ height: 50px; /* 设置盒子2向右悬浮 */ float: right; } p{ background-color: gray; border: 2px gray solid; margin: 5px; /* 设置p不允许右悬浮 */ clear: right; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> <div class="a2">盒子2</div> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div></body></html>
复制代码
运行结果：
2.3 左右都不允许有浮动对象；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 5px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; /* 设置盒子1的高度为100px; */ height: 100px; /* 设置盒子1向左悬浮 */ float: left; } .a2{ background-color: blue; border: 2px blue solid; margin: 5px; /* 设置盒子2的高度为50px; */ height: 50px; /* 设置盒子2向右悬浮 */ float: right; } p{ background-color: gray; border: 2px gray solid; margin: 5px; /* 设置p左右都不允许有悬浮 */ clear: both; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> <div class="a2">盒子2</div> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p></div></body></html>
复制代码
运行结果：
3.盒子定位 position；
Position 属性：
默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；
Fixed：固定定位，以浏览器窗口为基准进行定位；
先看看没有加定位的初始效果:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 15px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; padding: 10px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> </div></body></html>
复制代码
运行结果：
3.1.Relative：相对定位，相对于原本的标准位置偏移指定的距离；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 15px; } .a1{ background-color: green; border: 2px green solid; margin: 5px; padding: 10px; /* 设置盒子1是相对定relative */ position: relative; /* 将盒子1向右(相对于盒子1的原来位置而言)移动30px; */ left: 30px; /* 将盒子1向下(相对于盒子1的原来位置而言)移动30px; */ top: 30px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> </div></body></html>
复制代码
运行结果：
3.2. Absolute：绝对定位，以它的包含框为基准进行偏移；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 15px; } .a1{ background-color: green; border: 2px green solid; padding: 10px; /* 设置盒子1是绝对定位absolute */ position: absolute; /* 将盒子1向左(相对于浏览器的边框)靠齐，与浏览器的边框距离为0; */ left: 0px; /* 将盒子1向上(相对于浏览器的边框)靠齐，与浏览器的边框距离为0*/ top: 0px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> </div></body></html>
复制代码
运行结果:
可以看到盒子 1 已经与它的包含框(浏览器)对齐；
此时若将包含盒子 1 的父盒子 parent 的定位设置成 relative 的话，那么包含框就变成了盒子 parent；
例如下例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 15px; /* 设置福边框的position为relative */ position: relative; } .a1{ background-color: green; border: 2px green solid; padding: 10px; /* 设置盒子1是绝对定位absolute */ position: absolute; /* 将盒子1向左(相对于parent的边框)靠齐，与parent的边框距离为0; */ left: 0px; /* 将盒子1向上(相对于parent的边框)靠齐，与parent的边框距离为0*/ top: 0px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> </div></body></html>
复制代码
运行结果：
可以看到盒子 1 已经与它的包含框(父边框 parent)对齐；
由此可见包含框的定义是：
包含框：离选定内容(盒子 1)最近的且含有 position 属性(relative、fixed 均可，absolute 不行)的边框称为包含框！
3.3.Fixed：固定定位，以浏览器窗口为基准进行定位；
不管父边框有任何的 position 属性，只要子边框是 fixed 属性，则子边框的包含框是浏览器！
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .parent{ background-color: yellow; border: 2px red solid; padding: 15px; /* 设置福边框的position为relative */ position: relative; } .a1{ background-color: green; border: 2px green solid; padding: 10px; /* 设置盒子1是固定定位fixed，则一定是相对于浏览器而言*/ position: fixed; /* 将盒子1向左(相对于浏览器的边框)靠齐，与浏览器的边框距离为0; */ left: 0px; /* 将盒子1向上(相对于浏览器的边框)靠齐，与浏览器的边框距离为0 */ top: 0px; }</style></head><body><div class="parent"> <div class="a1">盒子1</div> </div></body></html>
复制代码
运行结果：
4.z-index 空间位置
z-index 默认属性是 0，z-index 值大的页面位于其小的页面的上方；
先来看看没有加 z-index 的页面：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> img{ position: fixed; top: 0px; left: 0px; } h1{ border: red 1px solid; }</style></head><body><h1>这是一个苹果</h1><img alt="" src="apple.jpg"/></body></html>
复制代码
运行效果：
可以看到图片的 position 是 fixed，相对于浏览器对齐，因此挡住了 h1 的内容；
如果我们想要将 img 放在 h1 的下方，作为背景图的话，就可以将 img 的 z-index 设置为负数；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> img{ position: fixed; top: 0px; left: 0px; /* 将img的z-index设置为-1，比h1的默认值0要小，因此位于h1的下方 */ z-index: -1; } h1{ border: red 1px solid; }</style></head><body><h1>这是一个苹果</h1><img alt="" src="apple.jpg"/></body></html>
复制代码
运行结果：
5.盒子 display 属性
Display:
Inline: 把元素变成内联元素；
Block: 把元素变成块级元素;
先来看看行级元素与块级元素的区别：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><div>d1</div><div>d2</div><div>d3</div><span>s1</span><span>s2</span><span>s3</span></body></html>
复制代码
div 是块级元素,span 是行级元素；
运行结果:
再来看看加了 display 属性的结果：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> div{ /* 将div变成内联元素 */ display:inline; } span{ /* 将span变成块级元素 */ display:block; }</style></head><body><div>d1</div><div>d2</div><div>d3</div><span>s1</span><span>s2</span><span>s3</span></body></html>
复制代码
运行结果：
可以明显地看到 display 属性的作用，能将行级元素变成块级元素，也可以将块级元素变成行级元素；
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论