一、定位
所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿
定位就是改变元素在页面上的默认位置
分类:
普通流定位:(元素默认的定位方式)
浮动定位
相对定位
绝对定位
固定定位
1、普通流定位
文档流是页面元素默认的定位方式
块级:从上到下排列(独占一行)
行级:从左到右排列(不独占一行)
2.浮动定位
float:left
float:right
如果将元素的定位方式设置了浮动定位那么具有以下几个特点
1.浮动元素会脱离文档流,其他未浮动的元素要上前补位
2.浮动元素会停靠在父元素的左边或者右边,或者停靠在其他浮动元素的边缘上
3.浮动元素只会在当前行内浮动
4.浮动元素依然位于父级元素内
5.让多个块级元素处于一行
浮动引发的效果
当父元素的宽度显示不下所有已浮动的元素时,最后一个元素将换行(有可能会被卡住)
元素一旦浮动起来,那么将变成块级元素,尤其对行内元素影响最大。
文本、行内元素、行内块元素 采用文字环绕的方式排列,是不会被浮动元素压在底下的会巧妙的避开浮动元素
清除浮动
元素浮动起来之后,除了影响到自己的位置,还会影响后续元素
如果不想被前面浮动元素影响 可以使用清除浮动来解决这个问题
谁被影响 就在谁身上用
关键字 : clear :
left 清除左浮动
right 清除右浮动
both 不管是左右都清除
浮动元素对父级元素带来的影响
如果父级的高度设置100% 或者 没有设置(自适应) 当元素全部浮动起来之后 父级的高度为0
如何去解决:
1.直接给父级设置高度px
弊端:必须要知道父级准确的高度
2.设置父元素浮动
弊端:对后续元素又影响
3.为父级元素设置overflow(溢出)
弊端:如果子级内容有溢出显示的话会被一同隐藏
4.在父元素中追加一个空元素 设置清除浮动
CSS的伪类
hover:鼠标触碰到元素时触发的伪类
1.改变单独的元素
比如:我想要改变 li 标签做到鼠标触碰 li 时 字体会变色
li:hover{
color:blue
}
2.兄弟级,相同级的元素改变方式:
比如我想鼠标碰触到 .a1 时 改变 .a2 的显示:
.a1:hover(空格)+.a2{}
3.父子级:碰触父级元素改变子级元素:
比如在 .a1 标签里有一个span标签,鼠标触碰 .a1 引发span出现效果:
.a1:hover(空格)span{}
显示相关
1.显示方式
作用: 决定了元素在页面中如何摆放定位。
属性: display:none 让元素的分类变为空 从而不见
脱离了文档流
visibility 显示/隐藏元素
visible 可见的
hidden 隐藏的
collapse 使用在表格元素上 ,删除一行或者一列 不影响表格整体布局
区别:
dispaly 脱离了文档流
visibility 不脱离文档流导致空间依然占据
opacity: 改变元素的透明度
范围:0~1之间。
2、光标的属性
属性:cursor
default 默认的属性
pointer 手
crosshair +
text 文本
wait 加载等待
help 帮助
3.列表的属性
list-style:none(去掉项目符号)
list-style-image:url() 自定义项目符号替换成图片
list-style-position:列表项位置
二、position定位
1.static(默认值)
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
图层概念:
z-index:调整元素的图层
注意 :只有使用在 相对定位 绝对定位 固定定位上 浮动并不能使用
只能用在同级的标签上 不能用在父级和层级关系的标签中 子级永远是覆盖父级的
①相对定位
偏移属性 改变元素在页面上的位置(移动元素)
top
left
right
bottom
相对定位: 元素会相对原来的位置偏移到某个地方,原本的位置依然会保留 相对元素原来位置的左上角进行位置偏移的
使用场合: 元素位置的微调
②绝对定位
绝对定位的元素会脱离文档流 相对于body进行位置偏移
注意:一旦我们给元素设置了绝对定位之后就具有的漂浮的效果
③固定定位
固定定位: 一旦写上了固定定位之后,元素就具有漂浮的效果并脱离文档流 不受我们滚动条的影响
跟随body标签的左上角进行位置偏移的
④绝对定位和相对定位的结合使用
1.在要偏移的元素的父级元素里面添加 相对定位
2.在该元素里添加绝对定位
各种定位的使用场合
多个块级元素现在要在一行内显示 用浮动
元素要实现自身位置的微调的时候 用相对定位
实现弹出内容时(或者排版) 用绝对定位和相对定位的结合使用
顶部固定 左边导航固定 广告 固定定位
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
.f{
width: 300px;
height: 300px;
border:1px solid red ;
}
.s1,.s2,.s3{
width: 75px;
height: 75px;
}
.s1{
/*浮动关键字:
float
1.left
2.right*/
background-color: aqua;
float: left;
}
.s2{
background-color: deeppink;
float: left;
}
.s3{
background-color: greenyellow;
float: left;
}
.sp1{
/*行内元素浮动会变成块级元素*/
float: left;
width: 75px;
height: 75px;
color: white;
background-color: black;
}
.f1{
width: 600px;
height: 50px