文章目录
一、浮动(float)
1、什么是浮动
- css提供的三种传统布局方式:普通流(标准流)、浮动和布局;
- 多个块级元素纵向排列找标准流,横向排列找浮动;
- float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘;
- 语法如下:
选择器 { float:属性值; }
2、浮动的特性
特性1
- 脱离标准流的控制移动到指定位置,俗称脱标
- 浮动的盒子不再保留原先的位置
特性2
- 若多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列
- 浮动的元素无缝隙,若父级宽度装不下,多出的盒子另起一行对齐
特性3
- 浮动元素会具有行内块元素特性
- 块级盒子添加浮动后,默认宽度根据内容来定
- 行内元素添加浮动后,可设置宽高
3、与标准流父级搭配使用
与标准流父级搭配使用法则:
- 先用标准流的父元素排列上下位置
- 之后内部子元素采取浮动排列左右位置
- 浮动的盒子只影响浮动盒子后面的标准流,不影响前面的标准流
4、清除浮动
- 本质:清除浮动元素脱离标准流造成的影响
- 策略:闭合浮动
- 语法:
选择器 { clear:属性值; }
属性值包含left、right、both, 几乎只用clear:both
I. 额外标签法
- 在浮动元素末尾添加一个空标签,例如:
<div style="clear:both"></div>
或 <div class="clear"></div> + style中设置clear属性
- 新的空标签必须是块级元素
II. 父级添加overflow法
- 为父级添加overflow属性
选择器 { overflow:hidden/auto/scroll; }
- 无法显示溢出的部分
III. :after伪元素法
.clearfix:after {
content:""; --固有属性
display:block; --转换为块元素
height:0;
clear:both; --清除浮动
visibility:hidden;
}
.clearfix { *zoom:1; } --照顾低版本浏览器
IV. 双伪元素清除浮动法
.clearfix:after,.clearfix:after {
content:"";
display:table;
}
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }
总结
二、定位
1.引入
- 浮动经常用于横向排列盒子
- 定位可以让盒子自由在某盒子中移动或固定屏幕中某个位置,并且压住其他盒子
- 定位=定位模式+边偏移
2.定位组成
I. 定位模式:决定元素的定义方式,通过css的position属性来设置,其值如下: 静态定位
- 用法:选择器 { position:static; }
- 按照标准流特性摆放位置,没有边偏移
- 在布局中很少用到
相对定位
- 用法:
box1 {
position:relative;
right:80px; --边偏移 右移80px
}
- 移动位置的参照点是原来的位置
- 原来在标准流的位置继续占有
绝对定位
- 用法:
选择器 { position:absolute; }
- 子绝父相:
- 子级绝对定位,不会占有位置,可以放到父盒子里的任何一个地方
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父亲为相对定位
固定定位
- 用法:
选择器 { position:fixed; }
- 固定于浏览器可视区的某位置
- 与父元素无关
- 不随滚动条滚动
- 不占有原先的位置,特殊的绝对定位
- 固定在版心右侧
- 先left走浏览器宽度的一半
- margin-left走版心宽度的一半
II. 边偏移就是定位的盒子移动到最终位置,有top、bottom、left、right 四个属性
3.叠放次序
- 语法:
选择器 { z-index:1; }
- z-index 数值大,盒子越靠上
- 数值相同,后来者居上
4.拓展
- 加了绝对定位的盒子不能用margin:auto 0设置水平居中
- 先left走父宽度的一半
- 再走margin 负值走自己盒子宽度的一半
- 绝对定位和固定定位特殊性质与浮动类似
5.元素的显示与隐藏
I. display(use more)
- display:none;隐藏对象
- display:block;除了转化为块级元素外,还能显示元素
- display隐藏元素后,不再占有原来的位置
II. visibility
- visibility:visible;元素可视
- visibility:hidden;隐藏对象
- display隐藏元素后,还占有原来的位置
II. overfolw溢出(慎用)
- overfolw:visible;元素可视
- overfolw:hidden;隐藏超出部分内容
- overfolw:scroll;显示滚动条
- overfolw:auto;溢出时显示滚动条
- display隐藏元素后,还占有原来的位置
三、过渡
用法:
transition:要过渡的属性 花费时间 运动曲线 何时开始
1.属性:想要变化的css属性
2.花费时间:比如0.5s,单位不可省
3.运动曲线:默认ease(可省略)
4.何时开始:默认0s,可设置延迟触发时间(可省略)
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width .5s, height .5s; --同时设置宽和高
}
div:hover {
width: 400px;
height: 400px;
}
</style>
四、动画
- 动画是css3中具有颠覆性的特征之一
- 可通过设置多个节点来精确控制一个或者一组动画,来实现复杂的动画效果
1. 2D转换
转换(transform)可以实现元素的唯一、旋转、缩放等效果
-
移动:translate
- 语法:
transform:translate(x,y); transform:translateX(); transform:translateY();
- translate不会影响其他元素的位置
- 百分比单位是相对自身宽高来说的,如transform:translate(50%,50%)
- 设置水平垂直居中:不需使用margin和计算,用定位配合transform:translate(50%,50%)
-
旋转:rotate
- 语法:transform:rotate(x deg); —表示顺时针旋转x度
- 应用:三角形
-
缩放:scale
- 语法:transform:scale(x,y);
- 以1为标准,xy大于1则放大,小于1则缩小
- 只写一个数,默认等比例缩放
- 默认以中心点缩放,而不影响其他盒子
综合写法:
transform:translate() rotate() scale();
2. 动画
I. 定义动画:
<style>
@keyframes movie {
0% {
transform: translateX(0px);
}
100% {
transform:translateX(1000px);
}
}
</style>
II. 使用动画
<style>
div {
width: 200px;
height: 200px;
background-color: #fff;
margin: 100px auto;
animation-name: movie; --动画名称
animation-duration: 2s; --持续时间
}
</style>
III. 动画常用属性
简写:
animation:名称 持续时间 何时开始 播放次数 是否反方向 动画起始或结束的状态
IV. 速度曲线细节
animation-timing-function(默认ease)
感谢您的浏览!