CSS知识点

一、css基本技巧

1、用户界面样式

cursor
default：默认
pointer：小手
text：文本
move：移动
not-allowed：禁止
表单input样式
outline：none（清除聚焦蓝色边框）

2、

vertical-align
baseline：父元素基准线上
top：与行内最高元素顶端对齐
middle：父元素中间部分
bottom：与行内最低元素的底部对齐

3、溢出文字隐藏并显示省略号

单行
white-space：nowrap；overflow：hidden；text-overflow：ellipsis
多行
overflow：hidden；text-overflow：ellipsis；display：-we'bkit-box；-webkit-line-clamp：2；-webkit-box-orient：vertical；

 

二、css3新特性

1、2D转换：transform

1。1、移动：translate
写法
translate（10px，10px）
translateX（10px）
translateY（10px）
特点
不会影响其他元素的位置
translate（50%，50%）是针对元素自身进行平移
对行内元素无效
1.2、缩放：scale
写法
scale（2，2）：宽和高都放大为原来的2倍
scale（0.5）：宽和高都缩小为原来的一半
特点
可以设置转换中心缩放，默认以中心点缩放的，而且不影响其他盒子，若要改变中心点转换可以用transform-origin设置（这个要写到改变的元素身上，而不写到hover中）
transform-origin： 10px 10px 或者transform-origin： center bottom 或者transform-origin： 50% 50%（自身元素、默认值）
1.3、旋转：rotate
写法
rotate（45deg）：顺时针旋转45度
rotate（-45deg）：逆时针旋转45度
特点
可以设置转换中心旋转，默认以中心点旋转的，而且不影响其他盒子，若要改变中心点转换可以用transform-origin设置（这个要写到改变的元素身上，而不写到hover中）
transform-origin： 10px 10px 或者transform-origin： center bottom 或者transform-origin： 50% 50%（自身元素、默认值）

 

2、3D转换

2.1、位移：translate
写法
translate3d（x，y，z）都不可以省略，可以写0
translateX（100px）：向右平移100px
translateY（-100px）：向上平移100px
translateZ（100px）：向前平移100px
2.2、旋转：rotate
写法
rotate3d（x，y，z，deg）
rotateX（45deg）：沿着x轴向里旋转45度
rotateY（-45deg）：沿着y轴向外旋转45度
rotateZ（45deg）：沿着z轴顺时针旋转45度
2.3、3D呈现：transform-style
flat：子元素不开启3d空间
preserve-3d：子元素开启3d空间
2.4、透视：perspective（单位px）
人的眼睛到屏幕的距离；近大远小。
2.5、注意
x轴右方为正方向
y轴下方为正方向
z轴前方为正方向

3、动画

动画的基本使用：
css中用@keyframes定义动画
@keyframes 动画名称 {0% {width：100px} 100% {width：200px}}
在元素身上使用动画
简写--animation：mine（动画名称） 2s（持续时间） linear（运动方式） 1s（延迟时间） infinite（运动次数） alternate（运动结束是否改变方向） backwords（运动结束回到起始位置还是留在原位）【前两个必须写】
动画序列：
0%、100%/from、to
动画常用属性：
@keyframes：规定动画
animation：动画简写属性名称 其中不包含animation-play-state
animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画运动速度曲线
ease：开始结束慢，中间快（默认）
linear：匀速
ease-in：慢速进入
ease-out：慢速离开
ease-in-out：低俗开始和结束
steps（）：指定了时间函数中的间隔数量（步长）
animation-delay：延迟开始时间
animation-iteration-count：动画次数：默认是1 infinite （无限次）
animation-direction：动画下一次开始的方向：normal（从头开始） alternate（逆播放）
animation-fill-mode：动画结束停留位置：forwards（原始位置） backwards（当前位置）
animation-play-state：动画运动状态 running（运动） paused（暂停） 经常与hover一起使用

4、

盒子模型：box-sizing
content-box
盒子的宽度和高度包含padding、border
border-box
盒子的宽度和高度不包含padding和border

5、其他特性

5.1、背景渐变
pc端
background：linear-gradient（起始方向，颜色1，颜色2，。。。）
移动端
background：-webkit-linear-gradient（left top，red，pink）
5.2、图片模糊
filter：blur（5px）数值越大越模糊
5.3、calc函数
width：calc（100% - 80px）
注意：括号里面可以使用+ - * /来进行计算。注：+ - * / 前后都要有一个空格才行。
5.4、圆角：border-radius
5.5、文字特效 （text-shadow）
5.6、文字渲染 （Text-decoration）

 

三、元素显示隐藏

元素的显示与隐藏
1、display：隐藏后不再占有原来的位置
display：none 隐藏
display：block 显示
2、visibility：隐藏后继续占有原来的位置
visibility：hidden 隐藏
visibility：visible 显示
3、overflow：超出部分可以设置显示与隐藏
overflow：visible 不剪切内容也不添加滚动条
overflow：hidden 隐藏超出部分
overflow：scroll 不管是否超出，都显示滚动条
overflow：auto 超出部分自动显示滚动条，不超出不显示滚动条

四、布局定位

1、

static：静态定位【不脱标，不使用边偏移】
静态定位按照标准流特性摆放位置，没有边偏移。

2、

sticky：粘性定位【不脱标，浏览器可视区】
语法：position：sticky；top：10px；（滚到距离顶部10px，固定住）
不脱标，保留位置
边偏移相对于浏览器为准，与父亲没有关系
必须添加top、left、right、bottom其中一个才有效

五、移动端

1、移动端基础

1.1、视口：浏览器显示页面内容的屏幕区域
布局视口：layout viewport【网页的宽度】
视觉视口：visual viewport【视觉视口是指用户正在看到的网站的区域】（这个区域的宽度等同于移动设备的浏览器窗口的宽度）
理想视口：ideal viewport【使布局视口的大小和屏幕宽度是一致的】
为了实现理想视口，需要手动去添加meta视口标签通知浏览器操作
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 user-scalable=no">
width：布局视口宽度，可以设置device-width特殊值
initial-scale：初始缩放比，一般为1.0
maximum-scale：最大缩放比，一般为1.0
minimum-scale：最小缩放比，一般为1.0
user-scalable：是否允许用户进行缩放，一般为no
1.2、二倍图
将一张50px*50px的图片放到移动端会放大二倍（或者3bei等），此时移动端的照片会变得不清晰，解决方案就是如果想在移动端放一张100px*100px的图片，我们可以准备一个100px*100px的图片，然后将他缩小至50px*50px，这样即使在移动端放大也不会变模糊
图片（原始图片：100px*100px）
img{width：50px；height：50px；}
1.3、背景图片（原始背景图片：100px*100px）
.box{background-size:50px 50px}
background-size：长度
长度若只写一个，肯定是宽度，高度等比例缩放
background-size：百分比
百分比是相对于父盒子来说的，若只写一个，肯定是宽度，高度等比例缩放
background-size：cover
§ cover也是等比例拉伸 只要父盒子宽和高有一个没有完全被覆盖住，就一直拉伸。要完全覆盖父盒子，可能有一部分图片显示不全

background-size：contain
§ contain当高度或者宽度任一铺满父盒子就不再进行拉伸，可能父盒子会有留白

 

2、移动端开发

2.1、单独制作移动端页面（主流）
布局方式（pc端使用需要考虑兼容性问题）
实现网页宽度随着设备宽度变化
流式布局/百分比布局
将容器盒子的宽度划分成视口的百分比
2.2、flex布局/弹性布局
特点
给父亲添加flex属性，里面的孩子不论是块级元素还是行内元素都可以设置宽度和高度
当给父元素添加flex属性，子元素的float、clear以及vertical-align都将失效
采用flex布局的元素，称为flex容器，简称“容器”。他的所有子元素自动成为容器成员，称为flex项目，简称“项目”，项目可以横向排列也可以纵向排列。

flex布局不会出现外边距合并的问题
写法：display：flex；
flex常见的父项属性
flex-direction：设置主轴方向（所有子元素横着还是竖着排列）
flex-direction：row（子元素横向排列，从左到右【默认】）
flex-direction：row-reverse（子元素横向排列，从右到左【顺序颠倒】）
flex-direction：column（子元素纵向排列，从上到下）
flex-direction：column-reverse（子元素纵向排列，从下到上【顺序颠倒】）
flex-wrap：设置子元素是否换行
flex-wrap：nowrap（不换行）
flex-wrap：wrap（换行）
justify-content：设置主轴子元素的排列方式
flex-start：默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：主轴居中对齐
space-around：平分剩余空间
space-around：两边先贴边，后平分剩余空间
align-items：设置侧轴子元素的的排列方式（单行）
flex-start：从上到下
flex-end：从下到上
center：垂直居中
stretch：（默认值）拉伸
align-content：设置侧轴子元素的排列方式（多行）
flex-start：从上到下
flex-end：从下到上
center：侧轴居中
space-around：平分剩余空间
space-between：先贴两边，再平分剩余空间
stretch：设置子项元素高度平分父元素高度
flex常见子项属性
flex：flex属性定义子项目分配剩余空间，用flex来表示占多少份数。number还可以写百分比，百分比是相对于父亲来说的。

align-self：控制子项自己在侧轴上的排列方式
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
order：定义项目的排列顺序
数值越小，排列越靠前，默认为0.注意：和z-index不一样。

2.3、元素大小（宽度、高度）随着屏幕自适应变化
a、less+rem+媒体查询（flexible.js)
先引入flexible.js(底层原理：媒体查询，根据不同的设备宽度规定不同的根字号):将根字号转换为视口宽度的1/10
看设计稿的宽度，若为iphone/6/7/8，则视口宽度为375px，那么根字号为视口的1/10，即为37.5，若在375px的屏幕宽度下有一个元素为60px*60px，那么换算成rem单位就是（60/37.5rem)*(60/37.5rem)
b、less+vw/vh
vw：视口宽度的1/100
看设计稿的宽度，若为iphone/6/7/8，则视口宽度为375px，那么vw=1/100 * 375px，即为3.75，若在375px的屏幕宽度下有一个元素为60px*60px，那么换算成vw单位就是（60/3.75vw)*(60/3.75vw)
vh:视口高度的1/100
看设计稿的高度，若为iphone/6/7/8，则视口宽度为667px，那么vwh=1/100 * 667px，即为6.67，若在667px的屏幕高度下有一个元素为60px*60px，那么换算成vh单位就是（60/6.67vh)*(60/6.67vh)
2.4、响应式页面兼容移动端（其次）
实现原理：媒体查询
使用框架：bootstrarp
引入bootstrarp样式
根据布局类名container来实现页面宽度的自适应
根据栅栏系统实现元素的布局个数