CSS浮动与定位、CSS清除浮动、display属性、position定位、浏览器内核及其前缀、Z-index堆叠顺序、居中总结
一、CSS浮动和定位
1.css浮动、定位
定义元素框相对于正常位置应该出现的位置（与原来无变化）
2.分类
普通流定位 、浮动定位、相对定位、绝对定位、固定定位
3、浮动定位（浮动元素）
将元素排除在普通流之外，不在页面占据空间，将元素放在包含框的左边或者右边，元素依旧位于包含框内（可左右移动，直到碰到另一浮动框的边框或包含框为止）
且其不会重叠，不会上下浮动
一般浮动应用于文字的环绕
float: leftfloat: left/right/none;
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css浮动和定位</title>
<style>
/*div{
width: 200px;
height: 200px;
}*/
.one{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: hotpink;
float: left;
}
.three{
width: 200px;
height: 200px;
background-color: deeppink;
float: left;
}
</style>
</head>
<body>
<div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
二 、CSS清除浮动
清除浮动在使用浮动后是必不可少的
属性：
clear:left/right/both;
清除浮动的常用方式：
（1）结尾处加空的div标签 clear：both（或在下个元素加clear：both）
.clear{ 方法一
clear: both;
}
（2）浮动元素父级div定义伪元素：：after
.parent::after{
content: url("");
display: block; /*升级为块级元素 方法二
clear:both;
（3）浮动元素父级div定义 overflow: hidden
（4）浮动元素父元素定高
.parent{
border: 1px solid red;
/*overflow: hidden; 方法三*/
/*height: 200px; 方法四 定高*/
}
三、display属性
每个网页都有一个display元素，用于确定该元素的类型，每个元素都有默认的display属性值，例如div默认的是“block”块级元素，span默认为“inline”行内元素
（块元素与行内元素可以转换，display属性可以由我们改变）
display常见属性：
| 属性 | 描述 |
|---|---|
| none | 隐藏对象（但是还占据空间） |
| inline | 指定对象为内联元素 |
| block | 指定对象为块级元素 |
| inline-block | 指定对象为内联块级元素（识别代码空间） |
| table-cell | 指定对象为表格单元格 |
| flex | 弹性盒子 |
注意：
display：none、opacity：0、visbility：hidden的区别
（1）opacity：0和visbility：hidden会将元素隐藏，但是物理空间还在
（2）display：none隐藏元素，不保存物理空间
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
.box>div{
width: 200px;
height: 200px;
background-color: pink;
/*float: left;*/
display: inline-block;
/*display:inline;*/
/*display: block;*/
/*display: table-cell;*/
/*vertical-align: middle; !*竖直居中*!*/
/*display: none;*/
/*opacity: 0;*/
visibility: hidden;
}
.box>div:nth-child(2)
{
background-color: hotpink;
}
.box>div:last-child{
background-color: deeppink;
}
span{
width: 1200px;
height: 700px;
background-color: #cc0000;
display: block;/*转换为块级元素*/
}
</style>
</head>
<body>
<!--
display属性：
inline-block 行内块元素 即在同一行显示，又可以设置宽高，margin和padding是可以设置四周
（注意：识别代码之间的空白）
block 指定对象为块元素
inline 指定对象为内联元素
none 隐藏对象
table-cell 设置为单元格
flex 弹性盒子
-->
<div class="box">
<div>
<div style="width: 100px;height: 100px;background-color:indianred;margin:0 auto"></div>
</div>
<div></div>
<div></div>
</div>
<!--<span>leikuan</span>-->
<!--<span>leikuan</span>-->
<!--<span>leikuan</span>-->
<span>leikian</span>
</body>
</html>
四、position定位
position属性指定一个元素（静态、相对、绝对、固定）的定位方法类型
（偏移=定位模式+偏移量）
1、static 静态定位
对偏移量不起作用，一般应用于去除定位
2、relative 相对定位（自恋型）
（1）相对于自己来偏移，相对于原来左上角基点的偏移
（2）通过偏移来移动位置，但是原来的位置还存在
（3left、top、right、bottom
3、absolute 绝对定位
(1)相对于整个浏览器来偏移的
（2）如果发生偏移，那么它不在占有空间
（3）left、top、right、bottom
4、fixed 固定定位（不动）
不随着内容的滚动而动（利于桌面旁边出现的新闻条）
（3）left、top、right、bottom
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position定位</title>
<style>
div{
width: 200px;
height: 200px;
background-color:pink;
/*left: 20px;
top: 30px;
position: static;*/
}
div:nth-child(1)
{
left: 20px;
top: 30px;
position: absolute;
}
div:nth-child(2){
background-color: hotpink;
width: 300px;
height: 300px;
/*left: 30px;
top: 30px;
position: relative;*/
}
/*div:nth-child(3){
background-color: deeppink;
}*/
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<!-- <div></div>-->
</div>
</body>
</html>
不占文档流的空间
浮动 float、绝对定位 absolute、固定定位 fixed 、元素不显示 display：none
五、浏览器内核 及其前缀
根据不同的浏览器内核，css前缀会有不同，以下四种基本浏览器
前缀
1、Gecko内核 -moz- 火狐浏览器
2、webkit内核 -webkit- 谷歌内核（chrome最先开发使用、
Safari、360、猎豹浏览器、世界之窗都在用）
3、Trident内核 -ms- IE内核
4、presto内核 -o- 目前只有opera使用
背景切割
-webkit-background-clip:content-box;
属性值 ：
1.text 从文本区域开始实现背景（切割文字）
2.border-box 从边框开始实现背景
3.padding-box 从padding区域开始实现背景
4.content-box 从内容区域开始实现背景
缓慢移动：
-webkit-transition: 1s; 谷歌
-moz-transition: 1s; 火狐
-ms-transition:1s; IE
-o-transition: 1s; opera
transition: 1s; W3c标准模式
背景切割代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器内核及其前缀</title>
<style>
div{
width: 400px;
height: 400px;
border: 30px solid rgba(255,255,255,.5);
background: url("images/lixian.jpg") no-repeat;
margin: 30px auto;
padding: 120px;
font-size: 200px;
font-weight: bolder;
color:rgba(255,255,255,.5) ;
/* 背景切割*/
-webkit-background-clip:content-box;
}
</style>
</head>
<body>
<div>
李现李现
</div>
</body>
</html>
显示页面：
浏览器内核的例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器内核的例子</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
-webkit-transition: 1s;/*谷歌*/
-moz-transition: 1s; /*火狐*/
-ms-transition:1s;/*IE*/
-o-transition: 1s;/*opera*/
transition: 1s; /*W3c标准模式*/
}
div:hover{
width: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
六、Z-index堆叠顺序（要先有定位元素才可以使用）
（1）一旦修改元素定位方式，则元素可能会发生堆叠
（2）使用Z-index元素来控制元素出现的重叠顺序
（3）Z-index仅能在定位的元素上生效
Z-index的属性：
（1）值为数值，数值越大表示堆叠顺序越高，离用户越近
（2）也可为负值，表示离用户远（一般不设置）
（3）Z-index只在定位元素上生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠顺序</title>
<style>
div{
width: 200px;
height:200px;
background: pink;
position: absolute;/*决对定位*/
}
div:nth-child(1)
{
z-index: 1;
}
div:nth-child(2){
background-color: hotpink;
left: 30px;
top: 30px;
z-index: 5;
}
div:nth-child(3){
background-color: deeppink;
left: 60px;
top: 60px;
z-index: 10;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
七、居中总结
1.内容水平居中 text-align
2.一行文字水平居中 line-height=height
3.盒子居中 例子：
div{
width: 200px;
height: 200px;
background-color: #cc0000;
margin: 0px auto;
}
4.子元素在父元素里边
（1）弹性盒子
display: flex;
align-items: center;
justify-content: center;
（2）table-cell
display: table-cell;
vertical-align: middle;（父元素里边）
margin: 0 auto; （子元素里边）
(3）绝对定位
position: relative;（父元素里边）
position: absolute;(子元素里边)
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中总结</title>
<style>
/* div{
width: 200px;
height: 200px;
background-color: #cc0000;
margin: 0px auto;
}*/
.parent{
width: 400px;
height: 400px;
background-color: deeppink;
/*display: flex; 弹性盒子
align-items: center;
justify-content: center;*/
/*display: table-cell; table-cell
vertical-align: middle;*/
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
/* margin: 0 auto;*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
4884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
