我的前端学习之CSS基础--基本属性、布局、动画、效果

边框

• 属性：线型、颜色、大小
  • border每一边都可以指定,color\style\width
  • solid实线dashed点状
• 边框背景图
  • 可自定义背景
• 边框衔接( 三角形 )
  • 用边框斜切衔接做三角形

​

.c2 {
            width: 0px;
            height:200px; 
            border-bottom: 30px solid red ;
            border-right: 20px solid transparent ;
            border-left: 20px solid transparent ;
            background-size: 30px 30px;
           /* border-radius: 100px;*/
        }

滚动

内容比较多

• 滚动行为和滚动条

  • 滚动条隐藏visible\hidden

  • 滚动条显示scroll\auto: 超出容器可以滚动，前者的滚动条总会存在，后者根据具体内容不一定显示滚动条

文本折行

• overflow-wrap(word-wrap)通用换行控制

  • 是否保留单词

• word-break 针对多字节文字

  • 中文句子也是单词

• white-space非空白换行

装饰性属性

• 字重（粗体）font-weight
  • 值很多，normal粗体400；bold 更粗700，根据父级；lighter ；100-900前两个较常用。
• 斜体 font-style
• 下划线text-decoration
• 指针cursor

css hack

• 为了兼容ie7、8，或者更早的版本。

• 主要用于区分不同的浏览器。看起来不一定合法，只在一部分浏览器上生效。

• 缺点：难理解、难维护、易失效

• 替代方案:特性检测

• 替代方案：针对性加class

  出现机会较小，有效的css的兼容性方案。

• 案例-checkbox

  隐藏的时候状态依然有效。通过背景方式来做。美化

• tabs

  • 单选样式，+选择器，选中后display：block

• tree

  • 实现显示和隐藏

css面试题

1 css样式（选择器）的优先级

• 计算权重确定

• ！important

• 内联样式

• 后写的优先级高

2，雪碧图的作用

• 减少http请求数 提高加载性能
• 有一些情况下可以减少图片大小

3，自定义字体的使用场景

• 宣传/品牌/banner等固定文案
  • 但一般不全文使用，自定义字体可能几M或者几十M
• 字体图标

4，base64 的使用

• 用于减少http请求
• 用于小图片
• 体积约为原图的4/3

5，伪类和伪元素的区别

• 伪类表状态，比如hover鼠标在悬停的时候
• 伪元素真的有元素
• 前者单冒号，后者双冒号

6，如何美化checkbox

• lable[for]和id
• 隐藏原生input
• ：checked+lable

css布局

布局简介

css知识体系的重中之重

早期以table为主,简单,解析时间长,语义不明

后来以技巧性布局为主,难,规范

现在有flexbox/grid,偏简单

响应式布局

• 常用布局方法
  • table表格布局
  • float浮动+margin
  • inline-block布局
  • flexbox布局

表格布局

用起来简单

横向竖向自带

一些布局属性

• 盒模型

content内容,宽高

padding内容到边框的区域

border边框,占据空间

margin离别的东西的距离

• display
  • 确定元素的现实类型
    • block/inline/inline-block
• position
  • 确定元素的位置
    • static/relative/absolute/fiexed
    • relative不会因为偏移改变布局
    • absolute不对别的元素造成影响，脱离文档流，不一定相对于body，相对最近的父级relative/absolute
    • fixed定位，也是脱离文档流
    • 默认情况下层叠，设zindex

flexed布局

float用于图文混排，inline-block也不是专用于布局

• flexbox真正用来布局
  • 弹性盒子
  • 盒子本来就是并列的
  • 指定宽度即可

兼容性问题，未大量使用，属性和写法有过变更。

float布局

• 元素浮动
• 脱离文档流
• 但不脱离文本流
• 对自身的影响
  • 形成“块”（BFC）
  • 位置尽量靠上
  • 位置尽量靠左（右）
• 对兄弟元素的影响
  • 上面贴非float元素
  • 旁边贴float元素
  • 不影响其它块级元素
  • 影响其它块级元素内部文本
• 对父级的影响
  • 从布局上“消失”
  • 高度坍陷，父级高度变为0

inline-block布局

纵向自然堆叠，横向需要处理

• 像文本一样排block元素
• 没有清除浮动等问题
• 需要处理间隙

响应式设计和布局

在移动端时代，适应pc移动端

• 在不同设备上正常使用
• 一般主要处理屏幕大小
• 主要方法
  • 隐藏+折行+自适应空间
  • rem通过html元素1rem=20px；viewport页面适配移动端；media query
  • 等比放大,改变width
  • 像素固定不可变,用rem替换,html不同的font-size的值适配设置

主流网站布局

• qq网站
  • 没有自适应
• 网易
  • 左中右,float-left
  • 清除浮动after
• 百度
  • 页面清除浮动
• float布局使用广泛,重要!!!

css效果

效果属性

css最出彩的一部分

• box-shadow

  box-shadow:5px 10px 10px 0 rgba(0,0,0,.2);//偏移 y方向偏移 模糊区域 扩展区域 浅黑色半透明
  

  • 营造层次感(立体感)

  • 充当没有宽度的边框

  • 特殊效果,做机器猫等

text-shadow

• 立体感
• 印刷品质感

border-radius

• 圆角矩形10px
• 圆形50%
• 半圆/扇形border-top-left/right-radius0
• 一些奇怪的角角，半圆的半径不一样

border-radius:10px 10px 10px/20px 20px 20px 20px;

background

• 纹理、图案
• 渐变
• 雪碧图动画no-repeat
• 背景图尺寸适应cover/contain

clip-path

• 对容器进行裁剪，圆、矩形;clip-path:circle(50px at 100px 100px);
• 常见几何图形 ，多边形，五角星等polygon
  • svg画矢量图形
• 自定义路径

3D变换transform

• 变换transform,还有2D,plant

  • translate平移
  • scale放大
  • skew斜切
  • rotate旋转

• 3D变换

  • 变换顺序不可以随意交换，效果不一样，先旋转/位移
  • z轴，三维，屏幕到外延伸，设置透视属性，transform-style：preserve-3d；//3D透视

  面试题

  1. 如何用一个div画*

     box-shadow无限投影，堆叠

     ：：before

     ：：after

  2. 如何产生不占空间的边框

     1. box-shadow
     2. outline

  3. 如何实现圆形元素/头像

     1. border-radius（50%）

  4. 如何实现ios图标的圆角

     1. clip-path：（svg）按照指定形状设计

  5. 如何实现半圆、扇形等图形

     1. border-radius组和
     2. 有无边框
     3. 边框粗细
     4. 圆角半径

  6. 如何实现背景图居中显示/不重复/改变大小

     1. background-position
     2. backgrund-repeat
     3. background-size(cover/contain)

  7. 如何平移/放大一个元素

     1. transform:translateX(100px)
     2. transform:scale(2)

  8. 如何实现3D效果

     1. perspective:500px 指定透视效果
     2. transform-style:preserve-3d;3d变换效果，3d场景
     3. transform:translate rotate…立体

css动画

动画介绍

• 动画的原理

  1. 视觉暂留的作用
  2. 画面逐渐变化

• 愉悦感

• 引起注意

• 掩饰,安抚用户等待加载的情绪

• 动画类型

  • transition补间动画
  • keyframe关键帧动画,补间动画,状态变化
  • 逐帧动画,没有补间,画面间没有计算

transition动画

• 位置-平移(left/right/margin/transform)
• 方位-旋转（transform)
• 大小-缩放（transform）
• 透明度（opacity）
• 其它-线性变化（transform）

定义动画进度和时间的关系：timing(easing),也可以在网上找函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NG3IWJqZ-1596595532274)(D:\资料\questions-html\学习笔记-陈[笔记] - 慕课 - CSS面试基础.assets\1562121616847.png)]

速度transition-timing-function: linear 线性变化，匀速

ease-in先慢后快结尾慢

keyframe动画

• 关键帧动画，相当于多个补间动画，与元素状态变化无关，定义灵活
• 与过渡动画的区别，无状态变更，直接指定动画
• 0%-100%等价于from-to；derection可以指定方向；animation-iteration-count:循环次数；animation-play-state：播放状态 ；animation-fill-mode:forward:停在那里

逐帧动画

关键帧特殊情况，中间不过渡，适用于时长较小的动画，控制大小和时长

• 适用于无法补间计算的动画
• 资源较大
• 使用steps（），一般steps（1）

css面试题

css中动画怎么写，考得最多

• css动画的实现方式有几种

​ transition

​ keyframes(animation)

• 过渡动画和关键帧动画的区别

  过渡动画需要有状态变化

  关键帧动画不需要状态变化

  关键帧动画能控制更精细

• 如何实现逐帧动画

  使用关键帧动画

  去掉补间（steps）

• css动画性能

  1. 性能不坏

  2. 部分情况下优于JS

  3. 但JS可以做的更好

  4. 部分高危属性

     box-shadow