浮动与定位
Display
display 可以修改元素的类型，让块级元素和内联元素相互转换
元素隐藏属性对比
文档流
文档流是文档中可显示对象在排列时所占用的位置/空间 例如：块元素自上而下摆放，内联元素，从左到右摆放 标准流里面的限制非常多，导致很多页面效果无法实现
1 高矮不齐，底边对齐
2 空白折叠现象
1 无论多少个空格、换行、tab，都会折叠为一个空格
2 如果我们想让img标签之间没有空隙，必须紧密连接 文档流产生的问题 高矮不齐，底边对齐
脱离文档流
使⼀个元素脱离标准文档流有三种方式
1 浮动
2 绝对定位
3 固定定位
浮动
浮动的定义 float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
浮动的原理
1 浮动以后使元素脱离了文档流
2 浮动只有左右浮动，没有上下浮动
清除浮动
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，
1 浮动元素会造成父元素高度塌陷
2 后续元素会受到影响
清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副 作用
解决方案有很多种
1 父元素设置高度
2 受影响的元素增加clear属性
3 overflow清除浮动
4 伪对象方式
父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
受影响的元素增加clear属性
如果同级元素受到影响，直接给收到影响的元素增加 clear 属性
overflow清除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用 overflow 清 除浮动
这种情况下，父布局不能设置高度 父级标签的样式里面加: overflow:hidden;
伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象 方式处理 为父标签添加伪类 after ,设置空的内容，并且使用 clear:both ;这种情况下，父布局不能设置高度
定位
定义
position 属性指定了元素的定位类型
其中，绝对定位和固定定位会脱离文档流 设置定位之后：可以使用四个方向值进行调整位置： left、top、right、 bottom
温馨提示
设置定位之后，相对定位和绝对定位他是相对于具有定位的父 级元素进行位置调整，如果父级元素不存在定位，则继续向上 逐级寻找，直到顶层文档
Z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处 于堆叠顺序较低的元素的前面
CSS3新特性
圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"
border-radius 属性，可以使用以下规则：
1 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
2 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
3 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
4 一个值： 四个圆角值相同
阴影
box-shadow 向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
字阴影
text-shadow 属性向文本设置阴影
text-shadow: h-shadow v-shadow blur color;
背景渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显 示平稳的过渡。
为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你 想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方 向（或一个角度）
background: linear-gradient(direction, colorstop1, color-stop2, ...);
从上到下（默认情况下）
<div class="box"></div> .box { width: 300px; height: 300px; background: linear-gradient(red, blue); }
从左到右
<div class="box"></div> .box { width: 300px; height: 300px; background:linear-gradient(to right, red , blue); }
对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变
.box { width: 300px; height: 300px; background: linear-gradient(to bottom right, red , blue); }
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度， 而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）
background: linear-gradient(angle, colorstop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话 说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到 右的渐变
.box { width: 300px; height: 300px; background: linear-gradient(100deg, red, blue); }
图片上面定位文字，实现渐变
background: lineargradient(120deg,#ff3149,#ff64a6);
转换
转换的效果是让某个元素改变形状，大小和位置
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进 行旋转、缩放、移动或倾斜
transform: none|transform-functions;
translate方法
translate() 方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素 位置移动
<div class="box"></div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: translate(50px, 100px); }
rotate方法
rotate() 方法，在一个给定度数顺时针旋转的元素。负值是允许的，这 样是元素逆时针旋转。
<div class="box"></div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: rotate(30deg); }
scale方法
scale() 方法，该元素增加或减少的大小，取决于宽度（X轴）和高度 （Y轴）的参数
<div class="box"></div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: scale(2,3); }
skew方法
skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个 参数为空，则默认为0，参数为负表示向相反方向倾斜
<div class="box"></div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: skew(30deg,20deg); }
3D转换
CSS3 允许您使用 3D 转换来对元素进行格式化
1 rotateX()
2 rotateY()
rotateX方法
rotateX() 方法，围绕其在一个给定度数X轴旋转的元素
<div class="box">文本查看信息</div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: rotateX(120deg); }
rotateY方法
rotateY() 方法，围绕其在一个给定度数Y轴旋转的元素
<div class="box">文本查看信息</div> .box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transform: rotateY(120deg); }
过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
通过过渡 transition ，可以让web前端开发人员不需要 javascript 就可以实 现简单的动画交互效果
.box { width: 100px; height: 80px; background-color: rgba(255, 0, 0, .8); transition: width 2s ease 1s; } .box:hover{ width: 500px; }
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果 您可以改变任意多的样式任意多的次数 20 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等 同于 0% 和 100% 0% 是动画的开始，100% 是动画的完成。
@keyframes创建动画
使用 @keyframes 规则，你可以创建动画
@keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } }
name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；
animation执行动画
animation: name duration timing-function delay iteration-count direction;
绘制特殊图形
绘制三角形
制作三角型使用的是border属性，内容区宽高值为0
.box { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid blue; }
绘制梯形
绘制三角型时宽和高都是0像素，给它加100的宽度看看效果
.box { width: 100px; height: 0; border-bottom: 80px solid red; border-left: 50px solid green; border-right: 50px solid yellow; }
媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里 加入这个meta标签。
<meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no">
参数解释
1 width = device-width 宽度等于当前设备的宽度
2 initial-scale 初始的缩放比例（默认设置为1.0）
3 maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
4 user-scalable 用户是否可以手动缩放（默认设置为no）
响应式布局
一说到响应式设计，肯定离不开媒体查询media
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示 方式
响应式布局的优缺点
优点
1 面对不同分辨率设备灵活性强
2 能够快捷解决多设备显示适应问题
缺点
1 兼容各种设备工作量大，效率低下
2 代码累赘，会出现隐藏无用的元素，加载时间加长
栅格系统
栅格系统是媒体查询的具体实现
栅格系统将页面自动分为12个格子，可以根据不同的类前缀实现不 同的页面布局
多列
CSS3 可以将文本内容设计成像报纸一样的多列布局
创建多列
column-count 属性指定了需要分割的列数
div { column-count: 3; }
列与列之间的间隙
column-gap 属性指定了列与列间的间隙
div { column-gap: 40px; }
列边框
column-rule-style 属性指定了列与列间的边框样式
div { column-rule-style: solid; }
column-rule-width 属性指定了两列的边框厚度
div { column-rule-width: 1px; }
column-rule-color 属性指定了两列的边框颜色
div { column-rule-color: lightblue; }
column-rule 属性是 column-rule-* 所有属性的简写
div { column-rule: 1px solid lightblue; }
CSS应用技巧
雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理 方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大 图中去
优点
1 减少图片的字节
2 减少网页的http请求，从而大大的提高页面的性能
原理
1 通过background-image引入背景图片
2 通过background-position把背景图片移动到自己需要的位置
字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇 到失真的情况，而且图片数量很多的话，页面加载就越慢。所以， 我们可以使用字体图标的方式来显示图标，既解决了失真的问题， 也解决了图片占用资源的问题
常用字体图标库：阿里字体图标库
优点
1 轻量性：加载速度快，减少http请求
2 灵活性：可以利用CSS设置大小颜色等
3 兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标
1 注册账号并登录
2 选取图标或搜索图标
3 添加购物车
4 下载代码
5 选择 font-class 引用
滑动门
大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以 广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首 先你要了解什么是滑动门
以上就是CSS所有常见知识点了，整理不易，希望对学习CSS的小伙伴有所帮助！
