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>