css多行超出显示点_饥人谷学习笔记（CSS）

CSS历史

• 最早由挪威哈肯·维姆·莱(Håkon Wium Lie) 提出.
• 最大优点是其层叠能力
• 版本历史CSS1-CSS2-CSS2.1(最广泛)-CSS3(模块化,之后各模块独立升级)
• 浏览器是否支持可使用http://caniuse.com来测

CSS层叠

• 样式层叠: 可多次对同一选择器进行样式声明
• 选择器层叠: 不同选择器对同一个元素进行样式声明
• 文件层叠: 多个文件进行层叠
• 层叠特性使css极为灵活,也留下一些问题及隐患

CSS是艺术

• 用感性思维去理解

体系化学习

• 语法
  • 分样式语法和@语法两种
  • 区分大小写, 英文符号, 浏览器不报错
  • @charset "UTF-8"必须放置于首行
• 调试
  • Border调试法 确定边距 逐行验证错误等
  • outline无宽确定边距
• 查资料
  • MDN
  • CSS tricks
  • 张鑫旭的博客
• 练习素材
  • Freepik搜索PSD web
  • 365psd
  • 效果图 http://Dribbble.com 顶级设计者社区
• 标准制定
  • W3C

基本概念

• 文档流（正常流）Normal Flow
  • 文档中元素的流动方向（元素不分内联和块级 完全是因为display样式决定，不同元素有其默认display样式）
    • inline元素从左到右，到达最右边才会换行；
    • block元素从上到下，每一个都另起一行；
    • Inline-block也从左到右，与inline元素不同其不会被拆成两行
  • 宽度
    • inline宽度为内部inline元素之和，无法用width指定 （尽量窄）
    • div元素默认宽度为auto，默认尽量填充能填充的行空间（尽量宽）
    • width:100%在contentbox里指的是子元素内容宽等于父元素内容宽，在borderbox里指的是子元素内容加内边距加边框等于父元素内容宽，所以尽量不要写width:100%
    • Inline-block 默认宽度为内部inline宽度之和，但可设置宽度（尽量窄）
  • 高度
    • inline高度由line-height间接确定（还与字体相关），与height无关（无元素也有高度）
    • div高度为内部文档流中的元素高度之和，脱离文档流元素除外（无任何元素时高度为0）。也可以设置其高度，设置高度低于内容高度时，会发生overflow（默认visable）
    • inlineblock高度特性与block一致
  • 溢出
    • 当内容宽度或高度大于容器时会发生溢出
    • 可用overflow来设置是否显示滚动条
    • auto为灵活设置
    • scroll时永久显示
    • hidden时直接隐藏溢出内容
    • visible为显示溢出部分
    • overflow可设置为overflow-x和overflow-y
  • 脱离文档流
    • 不在文档流中的元素不影响父级div元素
• 两种盒模型(border-box更符合人类思维)
  • Content-box 内容盒-宽高为内容宽度
  • Border-box 边框盒-宽高为内容+padding+border（尽量用这个）
  • margin合并 父与子、子与子元素之间的上下边距会互相影响
• 基本单位
  • 长度：px、em、%、integer、rem、vw和vh
  • 颜色： #FF6600 #F60 RGBA hsla

CSS布局

• 三种布局
  • 固定宽度布局，一般宽度为960/1000/1024 px
  • 不固定宽度布局，主要靠文档流的原理布局
  • 响应式布局：PC固定、移动端不固定
• 布局思路
  • 从大到小：先定大局在完善各个部分小布局
  • 从小到大：先完成小布局，再组成大布局
• 布局依赖的属性
  • css布局、float（ie9及以前）、flex、grid
• float布局
  • 步骤
    • 在子元素上加float:left和witdth
    • 在父元素上上加.clearfix

.clearfix:after{
content:'',
display:block;
clear:both;
}

• 经验
  • 留一些空间或最后一个子元素不设置width（可设max-width）
  • 该布局转为ie制作，无需做响应式（针对移动端）
  • Ie6/7存在双倍margin bug，可通过display:inline-block解决
  • float平均布局时，每个元素有边距无法放入父元素中时，需要在中间加一层div给其一个负边距将其width扩大即可
  • 与absolute不同，浮动属于半脱离文档流，虽然块级元素认为其不存在，但其影响其他浮动元素及内联元素。
• 实践
  • 两栏（顶部条）、三栏（内容区）、四栏（导航条）、平均（产品展示区）
• flex布局
  • 教程 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • 基础
    • container
      • display : flexinline-flex
      • 主轴流动方向 flex-direction : rowcolumnrow-reversecolumn-reverse(被控制的流动方向为主轴)
      • 主轴是否换行 flex-wrap : warpno-wrapwrap-reverse
      • 主轴剩余空间分配 justify-content : flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
      • 交叉轴剩余空间分配 align-items : flex-startflex-endcenterstretchbaseline
      • 多行下交叉轴剩余空间分配 align-content ： flex-startflex-endcenterstretchspace-betweenspace-around 该属性对单行弹性盒子模型无效（带有 flex-wrap: nowrap）。
    • Item
      • 显示顺序 order:子元素在父元素中流动的位置次序，默认为0，从小到大排列
      • 多余空间如何分配 flex-grow: 数字代表份数，默认为 0 不分空间
      • 空间不足如何挤压 flex-shrink: 数字代表份数，默认为 1 所有元素一起缩
      • 基准宽度控制 flex-basis 默认auto
      • 空间分配方式 flex 代表flex-grow和flex-shrink以及flex-basis的缩写
      • 自身单独的对其方式 align-self 值与align-items一样
• grid布局（二维布局）
  • 基础
    • container
      • display: grid | inline-grid
      • grid-template-rows : 30px 50px | 1fr 2fr (free space份) | 20% 40%
      • grid-template-columns : [first] 40px [line2] auto [end] 50px
      • grid-template(以上两个的缩写 rc)：50% 50% / 200px
      • grid-gap:10px
      • grid-template-areas
    • Items
      • grid-row-start :
      • grid-row-end：
      • grid-row(缩写)
      • grid-column-start: first| 1(从左开始) | -1(从右开始) | span 2 |
      • grid-column-end :3 | span 2 |
      • grid-column(缩写) :2/4
      • grid-area:1/2/3/4(rs/cs/re/ce) | area中起的名字
      • order:默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数
• 技巧点
  • grid适合衣柜布局
  • fr配合grid-gap轻松实现平均布局，不用使用负margin
  • grid-template-areas 配合vh单位的min-height 使用模板语法轻松布局
  • items之间定义的grid-area可以互相覆盖

CSS定位

布局用来屏幕平面上的内容，定位用来处理垂直于屏幕的内容

• div的分层
  • 文字在border上面，border在backgroud上面
  • 浮动元素脱离了文档流 在块级元素上面

• Position
  • static:默认值，表示当前元素在文档流中
  • relative: 当前元素在文档流中，只是显示位置相对于在文档流中所占的位置有偏移
    • 用于位移（很少用）
    • 用于给absolute做爸爸
    • 配合z-index（默认auto，其计算值为0，但不创建新层叠上下文）
  • absolute: 脱离原来位置，另起一层。相对祖先元素中最近的一个定位元素来定位（非static）
    • 部分浏览器不写top left会位置错乱
    • 善用100%，例如放右边可以使用left:100%
    • 善用负margin transfrom:translate来移动元素
  • fixed 相对于视口viewport定位 视口指可以给用户展现内容的区域
    • 不正交属性，稳定性容易受到其他元素影响，例如父元素上有transform属性，有改变其相对视口定位性质的风险
    • 使用场景一般有广告和回到顶部等
    • 注意移动端尽量不要用该属性，bug较多
    • 自己就能创建层叠上下文
  • sticky 粘滞定位 指的是页面还没到该位置时就在文档流中（static），但若看不见的时候会变成（fixed）效果，粘滞在上面
    • 兼容性很差，沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持
• 层叠上下文
  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
  • 所有定位元素超越内联子元素在更上一层，以此层为基准，默认z-index为auto值默认为0（注意auto与0不一样，auto与relative和absolute搭配不创建层叠上下文）

• 设置了z-index为负值的定位元素在background的后面，不能超过当前的层叠上下文，也就是不能超出html后面
• 每个层叠上下文是独立的空间，其中的z-index与外界无关，同一个层叠上下文的z-index才有可比性，最底层的层叠上下文是由html创建的
• 可以创建的层叠上下文属性有 z-index:0/flex/opacity/transform等

CSS动画

• 基础概念
  • 动画由许多静止画面组成，每一张静止画面为一帧
  • 影视一般每秒24帧，游戏最低需要30帧
  • 肉眼因视觉残像产生错觉认为其为连续
• 浏览器渲染过程
  • 根据HTML构建DOM树
  • 根据CSS构建CSSOM树
  • 两个树合并为渲染树Render Tree
  • 根据渲染树进行布局Layout（文档流、盒模型、计算大小和位置）
  • 绘制Paint（边框颜色、文字颜色、阴影等）
  • 合成Compose（根据层叠关系展示画面）
  • 三种更新方式，各属性性能参考 https://csstriggers.com/
    • div.remove() 会触发当前消失，其他元素relayout
    • 改变背景色，跳过layout，直接repaint + composite
    • 改变transform，只需composite

• CSS动画优化
  • js使用requestAnimationFrame代替setTimeout或setInterval
  • css优化使用will-change
  • 参考 https://developers.google.com/web/fundamentals/performance/rendering
• Transform 全解
  • 位移 translate
    • translateX、translateY、translateZ（因为是二维平面，父元素加视点属性perspective才有效果）、translate(x、y的简写)、tanslate3d
    • 百分比以自身宽高为基准
    • translate(-50%,-50%)常用于绝对定位元素的居中
      • left: 50% top: 50% transform: translate(-50%,-50%)
  • 缩放 scale 用的较少 会带来模糊
  • 旋转 rotate 默认以垂直于屏幕的轴转动
  • 倾斜 skew
  • 可同时使用 多种变换 中间空格区分
  • 使用经验
    • 一般需要配合transition 进行过渡
    • inline元素不支持transform，需要改为block
• Transition 过渡
  • 作用：补充中间帧
  • 语法：属性名 时长 过渡方式 延迟（transition:left 200ms linear）
  • 属性名all 表示包含所有变化属性
  • 过渡方式 及 timing function
  • 但不是所有属性都能过渡
    • display: none=>block 没法过渡 可改成visibility:hidden=>visible
  • 过渡必须要有起始 对于双过渡状态可以 拆解执行 a=>b b=>c 或使用动画
• Animation 动画
  • 定义关键帧 其他交给浏览器自动补充
  • 语法 animation:时长 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
    • 时长: 1s或者1000ms
    • 过渡方式：跟transition取值一样，如linear
    • 次数：3或者2 或者infinite
    • 方向：reverse | alternate | alternate-reverse
    • 填充模式： none | forwards | backwards | both
    • 是否暂停： paused | running
    • 所有属性都有自己单独得名字 可进行单独设置

开发心得总结

• 使用border调试法时，影响宽度，可以换成无宽的outline进行标注
• Inline-block可以使块具有包裹效应，尽可能的缩小了宽度
• img元素要设置max-width 100%，避免宽度大于块
• 不该写的代码不要多写，比如设置margin-left、margin-right为auto比设置margin:0 auto更干净。
• line-height 设置1.2与120%是不一样的，第一个子元素继承1.2倍数，第二个子元素继承的是经过120%所计算的数值，会产生问题
• css reset代码示例

*{margin:0;padding:0;box-sizing:border-box;}
ul,ol{list-style:none;}
img{max-width:100%}

• 尽量不要把宽高写死
• 草图软件 balsamiqfigma墨刀AdobeXD

文章链接

• 深入理解 CSS：字体度量、line-height 和 vertical-align https://zhuanlan.zhihu.com/p/25808995
  • font-size 相同，font-family 不同，得到的 span 元素的高度是不同的