本文已参与「新人创作礼」活动，一起开启掘金创作之路。
面对就业寒冬，我一个应届生也是到现在也没有就业嘛，就想的来复习一下基本的知识以及面试题这些，求求工作啦~
css
1.css选择器
-
id选择器
- #myspan color: pink; 给标签命名一个id 在style中使用#id{}进行样式修改。
-
类选择器
- .item { color: hotpink;} 类选择器在标签中用class进行命名 在style中用.class名{}进行样式修改
-
标签选择器
- body { margin: 0;} 直接使用标签名进行样式修改
-
id选择器>类选择器>标签选择器
-
id和class的名字是自己取得 见名知意 xx_content xxContent
-
伪类选择器
-
div:hover
- 鼠标移入前面的元素 改变样式 hover后没有接选择器 改变的是移入的元素
-
#mydiv:hover #div1
- 鼠标移入#mydiv 改变后面选择器的标签的样式
-
a标签
- a:visited{ 改变访问后的标签状态 }
- a:link { 改变未访问标签的状态 * }
- a:active { a标签链接在激活状态的瞬间的样子 }
- div：before{}
- div：after{}
-
::selection
- 改变选中的样式背景颜色等
- ：和：：的区别一个是伪类 一个是伪元素
-
2.css样式
-
ss颜色样式
- css颜色有几种 rgb(51, 153, 153); 16进制 #123123 ；英文：pink
-
css字体样式
-
font-size: 20px; 改变字体大小 “字体相关就会有继承属性”
- 字体大小
- 单位：px（像素）
- em（相对单位 父元素的字体大小） 1.5em -- 1.5倍父元素字体大小 默认字体大小16px
- rem（根元素字体大小）
-
字体
- font-family: "楷体"; 设置字体样式
- font-weight: lighter; 设置字体粗细
- /* normal 正常 */
- font-style: italic;
- /* 斜体 */
-
-
- 这个通配符 选中所有 一般情况下是用来取消默认样式 权重最低
-
css文本类样式
-
文本对齐方式 justify --两端对齐
- text-align: justify; */
- /* text-align-last: justify;.
-
-
文本缩进
- text-indent: 2rem;
-
线条
- 下划线 underline*/
- /* 中划线 line-through*/
- /* 上划线 overline*/
- /* 没有划线 none*/
- text-decoration: none; 去下划线
-
背景样式
- background-color: pink; 背景颜色
- background-image: url(./image/jenskitchen.gif); 图片背景
- /* 背景是否平铺 no-repeat 不平铺*/
- background-repeat: no-repeat;
- /* 背景定位 */
- background-position: 50% 50%;
- /* 背景的大小 cover 将图片等比放大或缩小至容器边框*/
- /* contain 将图片等比放大或缩小到容器，要将图片完整的放入 */
- background-size: contain
-
图片与文字的基线
- #logo {
- border: 1px solid red;
- }
- #logo img {
- /* 内嵌元素的文字基线 */
- vertical-align: middle;
- }
- #logo span {
- vertical-align: middle;
- }
- /* 图片与一行文字中间对齐的话需要调整他们两个的基线 */
3.隐藏与定位
-
隐藏
-
消失
-
display：none；
- 消失不占据原有的位置
-
-
隐藏
-
visibility: hidden;
- 隐藏会占据原有的位置
-
-
透明度
-
opacity: 0;
- 取值0~1 --0是透明 --1是不透明
-
-
区别背景透明度
-
background-color: rgba(122, 112, 111, 0); opacity内容也会透明 而背景透明度不会
- rgba a是透明度
-
-
溢出隐藏
-
overflow: hidden;
- 超出容器的部分会被隐藏 没有超出的不会隐藏 --被隐藏的部分不会占据位置
-
-
-
定位 ---把容器放到页面的某个位置上
-
relative --相对定位
- position: relative;
- left: 50px; 距离原有基准点左边50px
- top: 50px; 距离原有基准点上边50px
-
相对定位占据原有的位置 ，移动后的位置不占据位置 --相对于自己本身的位置移动
- 比如说给div加一个margin：100px；后 position: relative;的加入会从margin后的位置进行移动。
-
absolute --绝对定位 脱离了文档流
-
position: absolute;
- 绝对定位的子元素 --使用绝对定位 发现基准点会变 祖先元素没有定位属性的时候 绝对定位相对于 浏览器的窗口，当祖先元素有定位属性的时候 就会相对于祖先元素移动
-
-
fixed --固定定位
-
position: fixed;
- 根据滚动条固定在网页页面上
-
-
static --静态定位
-
position: static;
- 不受上下左右的影响，仅仅是给这个元素有了一个定位属性，会根据页面的正常文档流进行排列。
-
-
z-index --改变层级
- z-index：-1； 在使用了定位属性后改变容器的层级
- 注意 left top right bottom z-index 这几个属性必须有定位属性才能起作用
- 总结 什么时候使用定位属性 ，固定定位需要使用就使用 当页面发生重叠时会使用定位 父相对子绝对
-
4.交互
-
过渡效果
- 给这个交互效果加一个过渡效果 单位时间从一个状态带另一个状态
-
如果将过渡效果写在hover里面 那么只有移入有效果 移除没有效果 如果将过渡效果写在样式里面 那么移入 移出都有效果
-
transition ： 过渡哪个属性 过渡时间 过渡的效果 过渡的延迟时间
- linear 匀速变化
- ease --慢速开始中间变快，缓慢结束
- ease-in --慢速开始
- ease-out --慢速结束
- cubic-bezier（n,n,n,n） --自定义效果
-
transition: bottom .5s linear;
- 前
- 后
- 前
- background-color：rgba（0,0,0,0,） 有过渡效果
- display：none； 没有过渡效果
- visibility：hidden； 过渡效果视觉是延迟消失
- opacity：0； 有过渡效果
感谢大家的阅读啊~
