写代码啦
CSS 知识总结
回复数(0) 浏览数(57)
{{topic.upvote_count || 0}} 编辑 回复

太长不看

花大量时间去正儿八经去学习css,是一件吃力不讨好的事情。如果把css当成一门编程语言去学习的,那么要达到稍微进阶的水平,相比其他编程语言,你可能要花费更多的时间才可以。

不信可以参考《css权威指南》,单单一个盒模型,里面涉及到各种概念和解释,很容易让你学了就忘。再有现在工作中,遇到的css问题,大部分是可以通过网络解决。要掌握css最稳妥的办法,还是以练为主,遇到再查文档即可。这也我通过学习体系课,老师给我的启示。当然,必要的原理还是有必要学习和总结的。

概述

按照课程分类,css这部分知识,总结有布局、定位和动画。布局包括文档流、浮动、flex和grid布局方法。定位部分含有叠层上下文知识、z-index以及各种定位值分析。动画部分包括浏览器渲染过程知识和动画相关知识

布局

布局分为固定宽度和不固定宽度。固定宽度一般有:960px、1000px和1024px(都是8的倍数),常常用于PC端网站。不固定宽度就是利用文档流布局,常常用于移动设备。不固定宽度布局又引申出响应式布局,

布局思路

  • 从大到小: 先定下大局,然后完善每个布局
  • 从小到大:先完成小布局,然后往大的走

旧时代PC端布局——float

步骤

  1. 父级添加浮动清除类.clearfix
  2. 子类浮动,并添加width

实践

  • 两栏布局:顶部栏
  • 三栏布局:内容区
  • 四栏布局:导航
  • 平均布局:产品展示区

经验

  • 手机页面不用float,移动端更好的工具可以选择
  • float需要自己计算宽度,不灵活
  • 有经验者会不会设置最后一个元素的width,或者只设置一个max-width
  • 不需要做响应式,这个网站是给ie做的,手机上没有ie浏览器
  • ie上有一个margin双倍bug,解决办法有:margin设置为原来的或者设置display:inline-block

清除浮动

常用的清楚浮动工具类

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

响应式布局

随着设备屏幕尺寸越来越多,响应式布局被提出。我对于它的理解是一组可以用于适应各种尺寸的方式的统称。常用的手段有

  1. 响应式图片
    css
    img{
    max-witdh:100%
    }

  2. 通过媒体查询,@media语法,针对不同设备设计不同的样式

  3. 液态网格,比如bootstrap框架。

移动端主流布局手段—— flex

现在flex的兼容程度已经很高了,可以放心大胆的使用。我认为flex布局更多的是解决了一维方向的布局问题。用几句代码就可以解决之前float布局要考虑很多的布局。

flex的学习可以参考课程。看文档的话,可以参考阮一峰写的教程

可能是最终的布局方法——grid

上面说到flex是解决一维的布局问题,那么grid布局就是解决二维布局的问题。不过现在grid布局兼容程度还不管太好。

视频学习可以参考相关课程。看文档的话,可以参考阮一峰写的 教程

定位

定位的语法很简单,postition: absolute\relative\fixed\static\sticky,然后再加上toprightbottomleft调整位置即可。但是这引出一个问题,就是定位的元素和其他的元素重合,谁在谁的上面呢?

层叠上下文

这里就涉及到层叠上下文的知识了。层叠上下文是简单来说就是人眼垂直看屏幕的那条线。一个元素层叠顺序越大的话,那么它离人眼越近。

image.png image.png

在上面的图片中,『你好』这两个字使用了绝对定位。他在和没有层叠上下文的元素重合时,就把对方挡住了。

层叠上下文就导致了各个元素之间是有一个层叠顺序的,借用老师视频的图片,顺序如下

层叠上下文1 层叠上下文1

层叠上下文2 层叠上下文2

我们发现内联元素比浮动元素还要高,为什么?因为一般内联元素里面放的是内容,肯定内容最重要!浮动、背景还有边框什么的,只能算是装饰,肯定要给内容让路。

如果创建层叠上下文

可以参考 层叠上下文mdn

z-index

说回之前的问题,我们如何管理定位元素和其他元素的层叠关系呢?这里就用到了z-index属性。默认情况下,z-indexauto,当position是非static的时候,当前元素的层叠顺序会按照z-index的大小决定。

z-index与层叠上下文 z-index与层叠上下文

z-index为负的话,元素会在背景的下面,非负的话肯定在内联元素的上面。

z-index比较

常遇到的一个问题就是两个定位元素的如何比较谁在更上层的位置?有下面几个原则:

  1. 当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个
  2. 当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

所以当比较两个元素层叠的时候,不能直接拿z-index来比较。应该先看看两个元素父级的层叠,然后在具体分析。有可能z-index:-1就比z-index:10的元素要大,这就有点像俗话说的,萝卜不大,长在辈儿上了。

参考

动画

浏览器渲染过程

  1. 构建html-tree
  2. 构建css-tree
  3. html-tree和css-tree合并成渲染树🌲
  4. 根据文档流、盒模型、计算各个元素的位置和大小 layout阶段
  5. Paint绘制,把边框颜色,文字颜色、阴影等画出来
  6. 合成结果(根据层叠关系显示画面)

更新css代码的三种情况

更新css代码的三种情况 更新css代码的三种情况

为了方便人们查询,那些属性会触发那些阶段,可以查询csstriggers

css优化

谷歌的文章就够了

动画

动画这里主要看mdn,多用多查

transform:变形,主要的用法有translate(移动)、
transition:过渡,变换 CSS 属性值的方法
keyframe:关键帧,定义元素什么时间(帧)做什么的,相对transition,可以控制动画序列的中间步骤
animation:动画,控制一组或多组动画

transition用法,参考mdn:

<div class="box">
    鼠标hover
</div>

.box:hover{
    background-color: #909;
    color: #fff;
}
.box{
    background-color: #e4f0f5;
    color: #000;
    padding: 1rem;
    border-radius: .5rem;
    font: 1em monospace;
    width: 100%;
    transition: all 1s ease-out 0s;
}

animation用法实例,来自mdn,赛隆人之眼:

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
{{topic.upvote_count || 0}}

太长不看

花大量时间去正儿八经去学习css,是一件吃力不讨好的事情。如果把css当成一门编程语言去学习的,那么要达到稍微进阶的水平,相比其他编程语言,你可能要花费更多的时间才可以。

不信可以参考《css权威指南》,单单一个盒模型,里面涉及到各种概念和解释,很容易让你学了就忘。再有现在工作中,遇到的css问题,大部分是可以通过网络解决。要掌握css最稳妥的办法,还是以练为主,遇到再查文档即可。这也我通过学习体系课,老师给我的启示。当然,必要的原理还是有必要学习和总结的。

概述

按照课程分类,css这部分知识,总结有布局、定位和动画。布局包括文档流、浮动、flex和grid布局方法。定位部分含有叠层上下文知识、z-index以及各种定位值分析。动画部分包括浏览器渲染过程知识和动画相关知识

布局

布局分为固定宽度和不固定宽度。固定宽度一般有:960px、1000px和1024px(都是8的倍数),常常用于PC端网站。不固定宽度就是利用文档流布局,常常用于移动设备。不固定宽度布局又引申出响应式布局,

布局思路

  • 从大到小: 先定下大局,然后完善每个布局
  • 从小到大:先完成小布局,然后往大的走

旧时代PC端布局——float

步骤

  1. 父级添加浮动清除类.clearfix
  2. 子类浮动,并添加width

实践

  • 两栏布局:顶部栏
  • 三栏布局:内容区
  • 四栏布局:导航
  • 平均布局:产品展示区

经验

  • 手机页面不用float,移动端更好的工具可以选择
  • float需要自己计算宽度,不灵活
  • 有经验者会不会设置最后一个元素的width,或者只设置一个max-width
  • 不需要做响应式,这个网站是给ie做的,手机上没有ie浏览器
  • ie上有一个margin双倍bug,解决办法有:margin设置为原来的或者设置display:inline-block

清除浮动

常用的清楚浮动工具类

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

响应式布局

随着设备屏幕尺寸越来越多,响应式布局被提出。我对于它的理解是一组可以用于适应各种尺寸的方式的统称。常用的手段有

  1. 响应式图片
    css
    img{
    max-witdh:100%
    }

  2. 通过媒体查询,@media语法,针对不同设备设计不同的样式

  3. 液态网格,比如bootstrap框架。

移动端主流布局手段—— flex

现在flex的兼容程度已经很高了,可以放心大胆的使用。我认为flex布局更多的是解决了一维方向的布局问题。用几句代码就可以解决之前float布局要考虑很多的布局。

flex的学习可以参考课程。看文档的话,可以参考阮一峰写的教程

可能是最终的布局方法——grid

上面说到flex是解决一维的布局问题,那么grid布局就是解决二维布局的问题。不过现在grid布局兼容程度还不管太好。

视频学习可以参考相关课程。看文档的话,可以参考阮一峰写的 教程

定位

定位的语法很简单,postition: absolute\relative\fixed\static\sticky,然后再加上toprightbottomleft调整位置即可。但是这引出一个问题,就是定位的元素和其他的元素重合,谁在谁的上面呢?

层叠上下文

这里就涉及到层叠上下文的知识了。层叠上下文是简单来说就是人眼垂直看屏幕的那条线。一个元素层叠顺序越大的话,那么它离人眼越近。

image.png image.png

在上面的图片中,『你好』这两个字使用了绝对定位。他在和没有层叠上下文的元素重合时,就把对方挡住了。

层叠上下文就导致了各个元素之间是有一个层叠顺序的,借用老师视频的图片,顺序如下

层叠上下文1 层叠上下文1

层叠上下文2 层叠上下文2

我们发现内联元素比浮动元素还要高,为什么?因为一般内联元素里面放的是内容,肯定内容最重要!浮动、背景还有边框什么的,只能算是装饰,肯定要给内容让路。

如果创建层叠上下文

可以参考 层叠上下文mdn

z-index

说回之前的问题,我们如何管理定位元素和其他元素的层叠关系呢?这里就用到了z-index属性。默认情况下,z-indexauto,当position是非static的时候,当前元素的层叠顺序会按照z-index的大小决定。

z-index与层叠上下文 z-index与层叠上下文

z-index为负的话,元素会在背景的下面,非负的话肯定在内联元素的上面。

z-index比较

常遇到的一个问题就是两个定位元素的如何比较谁在更上层的位置?有下面几个原则:

  1. 当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个
  2. 当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

所以当比较两个元素层叠的时候,不能直接拿z-index来比较。应该先看看两个元素父级的层叠,然后在具体分析。有可能z-index:-1就比z-index:10的元素要大,这就有点像俗话说的,萝卜不大,长在辈儿上了。

参考

动画

浏览器渲染过程

  1. 构建html-tree
  2. 构建css-tree
  3. html-tree和css-tree合并成渲染树🌲
  4. 根据文档流、盒模型、计算各个元素的位置和大小 layout阶段
  5. Paint绘制,把边框颜色,文字颜色、阴影等画出来
  6. 合成结果(根据层叠关系显示画面)

更新css代码的三种情况

更新css代码的三种情况 更新css代码的三种情况

为了方便人们查询,那些属性会触发那些阶段,可以查询csstriggers

css优化

谷歌的文章就够了

动画

动画这里主要看mdn,多用多查

transform:变形,主要的用法有translate(移动)、
transition:过渡,变换 CSS 属性值的方法
keyframe:关键帧,定义元素什么时间(帧)做什么的,相对transition,可以控制动画序列的中间步骤
animation:动画,控制一组或多组动画

transition用法,参考mdn:

<div class="box">
    鼠标hover
</div>

.box:hover{
    background-color: #909;
    color: #fff;
}
.box{
    background-color: #e4f0f5;
    color: #000;
    padding: 1rem;
    border-radius: .5rem;
    font: 1em monospace;
    width: 100%;
    transition: all 1s ease-out 0s;
}

animation用法实例,来自mdn,赛隆人之眼:

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
57
回复 编辑