前端基础-CSS(2)

归纳总结CSS基础内容(2)

CSS3新特性

transition和animation的区别

  • transition过渡 和animation动画 大部分属性是相同的,他们都是随时间改变元素的属性值(过渡动画效果)
  • 主要区别:
    • transition是过渡,需要一个触发事件才能改变属性,而animation是动画,不需要触发任何事件的情况下会随时间改变属性值(transition例子/animation例子)
    1. animation有from .... to来表达从一个状态变为另一个状态
  • 工作场景:transition

用的最多的css属性是?

  • 目前来说最多的是flex属性,方便排版、居中
  • transform属性和transition属性,前者单独用来协助子绝父相的居中;后者用来实现过渡动画效果(工作场景的例子);两者搭配实现旋转类的动画效果
  • @media查询,响应式
  • background-size的以contain、cover及border-radius我也十分常用

CSS3中对溢出的处理

  • text-overflow属性,值为clip是修剪文本;ellipsis为显示省略符号来表被修剪的文本;string为使用给定的字符串来代表被修剪的文本

用 CSS 实现多行文本的省略号显示

可参考博客CSS 实现单/多行文本的省略号显示

CSS选择器,优先级

  • 可参考百度前端技术学院 第三天学习总结(CSS文本、选择器)(1)百度前端技术学院 第四天学习笔记(选择器的优先级、了解级联、!important)(4)
  • ** id 选择器,class 选择器,标签选择器,属性选择器伪元素选择器,伪类选择器**等
    • 注意:
      • 属性选择器中特殊的筛选: ^=指定值开头、 $=指定值结尾、 *=包含指定值
        • 搭配querySelectorAll筛选出open_guard_开头_decode结尾且style中包含display: none的所有元素: document.querySelectorAll('[class^="open_guard_"][class$="_decode"][style*="display: none"]');
  • 同一元素引用了多个样式时,排在后面的样式属性的优先级高
  • 样式选择器的类型不同时,优先级顺序为:内联样式 > id 选择器 > class 选择器/属性选择器或伪类 > 标签选择器/伪元素
  • 标签之间存在层级包含关系时,后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式,则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低,至少比标签选择器的优先级低
  • 带有**!important 标记的样式属性的优先级最高**;
  • 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

属性和伪类选择器的优先级

  • 属性选择器和伪类选择器优先级相同

【看】CSS布局

  • 六种布局方式总结:圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局(圣杯布局和双飞翼布局)
  • 圣杯布局是指布局从上到下分为header、container、footer,然后container部分定为三栏布局。圣杯布局的缺陷在于 center 是在 container 的padding中的,因此宽度小的时候会出现混乱圣杯布局宽度小的时候会出现混乱
  • 双飞翼布局给center 部分内加了一个 center-inner 来通过设置margin主动地把页面撑开,这样宽度小的时候不会出现混乱双飞翼布局宽度小的时候不会出现混乱
  • Flex布局是由CSS3提供的一种方便的布局方式
  • 绝对定位布局/)是给container 设置position: relative和overflow: hidden,因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动,right 向右浮动。center 使用绝对定位,通过设置left和right并把两边撑开。 center 设置top: 0bottom: 0使其高度撑开
  • 表格布局的好处是能使三栏的高度统一
  • 网格布局可能是最强大的布局方式了,使用起来极其方便,但目前而言,兼容性并不好。二维布局,可以同时操作多行多列

两栏布局(左侧固定,右侧自适应)

  • 参考《七种实现左侧固定,右侧自适应两栏布局的方法》,里面有代码可参考
  • 常用的宽度自适应的方法:
    • 利用block水平的元素宽度能随父容器调节的流动特性
    • 利用CSS中的calc()方法来动态设定宽度
    • 利用flexgrid
  • 需知左盒子宽度(用于计算右侧宽度)+两盒子间距:
    • 双inline-block+calc(100% - 左侧宽px):由于使用了inline-block,所以需要注意父元素font-size:0消除子元素之间的空格,子元素设置vertical-align: top;顶端对齐
    • 双float+calc(100% - 左侧宽px):父元素注意创建BFC清除浮动(display:flow-root
    • 左侧float+margin-left:(左侧盒子宽+间距):父元素注意创建BFC清除浮动(display:flow-root
    • 左侧子绝父相+margin-left:(左侧盒子宽+间距)
      • 注意:绝对定位脱离文档流,所以若左侧盒子高于右侧盒子,就会超出父容器的高度,只能通过设置父容器的min-height来防止这种情况
      • 绝对定位的高度塌陷不能通过BFC解决,只能靠父元素高度撑起来
  • 只需知道间距:
    • 左侧float+右侧BFC:
      • 设置左侧浮动,将自身高度塌陷,使得其它块级元素可以和它占据同一行的位置
      • 右列为 div 块级元素,利用块元素的流特性占满整行(此时左右重叠)
      • 右列设置overflow: hidden或auto形成 BFC,使右侧盒子与左列的浮动元素不重叠,不占满整行
      • 可参考这里
    • 【最简单】flex: 左边flex: 0 0 auto;即原始大小不缩放,右边flex: 1 1 auto;即按照比例缩放
      • flex默认值是0 1 auto,所以右边设置flex: 1;也行
      • 左边也可以设置flex为none然后给定width,一样是不伸缩
      • 注意,flex容器的一个**默认属性值:align-items: stretch;**导致了列等高的效果,需要设置: align-items: flex-start;(用start也是一样的)
    • grid布局:新型的布局方式,可以满足需求,但这并不是它发挥用处的真正地方

      grid布局还有一个值得注意的小地方和flex不同:在使用margin时,grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个divborder或者padding外侧之间的距离

      • Grid布局中,默认情况下,margin 不会影响网格项之间的位置,而是被包含在网格项的盒模型中。这意味着网格项的大小不会受到 margin 的影响,margin 的空间会被计算在网格项内部。这与 box-sizing 属性的值有关,box-sizing 的默认值为 content-box,所以 margin 不会增加网格项的尺寸,而是包含在内(手动设置 border-box 则可改变,或者可以用 grid-gap 属性设置间距)
      • 而在Flex布局中,默认情况下,margin 会影响弹性项之间的位置,而不会被包含在弹性项的盒模型中。这是因为Flex布局中 box-sizing 的默认值是 border-box,所以 margin 会被包含在弹性项的尺寸内
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        .wrapper-grid {
        display: grid;
        /* 设置列宽,fr单位:代表网格容器中可用空间的一等份 */
        grid-template-columns: 120px 1fr;
        /* grid布局也有列等高的默认效果,需要设置align-items */
        align-items: start;
        }

        .wrapper-grid .left,
        .wrapper-grid .right {
        box-sizing: border-box;
        }

        .wrapper-grid .left {
        /* 将元素放置在第1列 */
        grid-column: 1;
        }

        .wrapper-grid .right {
        /* 将元素放置在第2列 */
        grid-column: 2;
        }
  • 父容器极限小的情况下不同方案的表现可看文章

calc属性

  • calc函数用于动态计算长度值。
  • 任何长度值都可以使用calc()函数计算
  • 注意:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  • 当其为负数时,会使用最小值而不是消失

三栏布局

  • 其实圣杯布局双飞翼布局本质就是三栏布局
  • 实现思路:先把最重要的身体部分放好,然后再将翅膀移动到适当的地方
  • 三列布局又分为两种,两列定宽一列自适应,以及两侧定宽中间自适应,可参考CSS布局面试题圣杯布局和双飞翼布局的例子三列布局
    • 两列定宽一列自适应
      1. 使用float+margin
        • 左左右设置浮动/都设置成左浮动
      2. 使用float+overflow
        • 给div设置float:left,再给right的div设置overflow:hidden
        • 这样子两个盒子浮动,另一个盒子触发bfc达到自适应>
      3. 使用**position(子绝父相)**:
        • 父级div设置position:relative,三个子级div设置position:absolute
        • 这个要计算好盒子的宽度和间隔去设置位置,兼容性比较好。
      4. 使用table实现:
        • 父级div设置display:table,设置border-spacing:10px//设置相邻单元格的边框间的距离,取值随意。
        • 子级div设置display:table-cell
        • 这种方法兼容性好,适用于高度宽度未知的情况,但是margin失效,设计间隔比较麻烦
      5. flex实现:
        • parent的div设置display:flex;
        • left和center的div设置margin-right;然后right 的div设置flex:1;
        • 这样子right自适应,但是flex的兼容性不好
      6. grid实现:
        • parent的div设置display:grid,设置grid-template-columns属性,固定第一列第二列宽度,第三列auto
    • 对于两侧定宽中间自适应的布局,对于这种布局需要把center放在前面,可以采用 双飞翼布局、圣杯布局 来实现,也可以使用上述方法中的grid,table,flex,position实现。

圣杯布局

点击查看圣杯布局代码+效果,重点就是 三栏浮动中间100%宽度+负边距同行+三栏父元素padding向中靠+左右两栏相对定位去左右

  1. html代码中 middle部分首先要放在container的最前部分。然后是left,right
  2. 三者都 float:left 中间的三栏并没有在一行内显示(因为middle部分满我们给了百分之百的宽度)
  3. 利用负边距布局:此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%,让右边的盒子上去,也就是margin-left:-200px;注意是负的自己的宽度,这里不是百分号!)利用负边距布局
  4. 解决中间盒子里的内容被左右盒子覆盖的问题:这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 200px
    1. 先利用父级元素设置左右padding的值把父级的三个子盒子往中间挤但此时中间盒子还是被覆盖
    2. 再给左右两个盒子加 相对定位+left/rightimage.png

双飞翼布局

重点就是 三栏浮动中间100%宽度+负边距同行+三栏中间盒子main内增加一个内层div(main-inner)设置margin空出左右两栏位置

  1. 左翅 left 有200px,右翅 right 是200px,身体main自适应未知
  2. html代码中,main要放最前边,再放left、right
  3. 将main left right 都float:left
  4. main占满 width:100%
  5. 此时main占满了,所以要把left拉到最左边,使用margin-left:-100% 同理 right使用margin-left:-200px(到这一步和圣杯布局都是一样的)
  6. main内容被覆盖了,圣杯布局是给中间三栏的父元素设置padding将两侧位置空出放置left right。双飞翼布局则使用margin,给三栏的中间盒子main增加一个内层div(main-inner)设置margin, 然后margin:0 200px
  7. main正确展示

注意:第6步一定是给中间盒子增加一个内盒子,如果直接在中间盒子上更改margin整个布局就乱了(如下,右边盒子在最外围看不见的地方,左边盒子右移)第6步直接在中间盒子上更改margin的效果因为中间3个盒子都是浮动的,而float属性对兄弟元素的影响是会贴着旁边float元素,所以中间盒子向右边移动以后左边盒子也会跟着向右边移动,所以需要在中间盒子内部放置块元素来调整margin避免影响其他浮动元素

浮动布局时,三个div的生成顺序有没有影响

有,设置第1、3列为浮动,中间使用margin将空间留出来给普通元素。
为防止第三列浮动元素受到中间普通元素文本的影响,需要在HTML中将最左和最右两个浮动写在一起,中间的普通元素放在最后
区别可参考CSS布局面试题

Flex布局

  • Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可参考我以前的博客百度前端技术学院 第七天学习笔记(CSS flexbox)
    • 父元素(flex容器)的属性中重点区分:
      • justify-content属性定义子项在主轴上的对齐方式(位置)。【单个子项为单位】
      • align-items属性定义子项在交叉轴上的对齐方式(位置)。【单个子项为单位】
      • align-content属性只适用多行的flex子项(也就是flex父容器中的子项不止一行时该属性才有效果)
        • 当flex父容器在交叉轴上有多余的空间时,且属性值为:flex-start、flex-end、center、stretch时,将所有子项作为一个整体单位沿交叉轴进行对齐
    • 子元素容易忘记的属性:
      • align-self属性定制align-items

当flex父容器在交叉轴上有多余的空间时,且属性值为:space-between/space-around时,将单行子项作为一个单位沿交叉轴进行对齐。

  • Flex 布局教程:语法篇Flex 布局教程:实例篇做骰子/网格布局/百分比布局/圣杯布局、Flexbox 布局的最简单表单
  • 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
  • 注意:如果你的项目需要支持非常旧的浏览器,可能还需要考虑一些兼容性策略。不过,对于大多数现代的项目,Flexbox 是一个强大且兼容性良好的布局方式,建议优先使用它来构建页面布局

瀑布流布局(flex布局/CSS3的column属性)

瀑布流布局
可参考博客

  • 使用flex布局实现:
    1. 最外层用flex并设置为行布局flex-direction: row;
    2. 内部使用flex并设置为列布局flex-direction: column;
    3. 每一个列布局内放置若干flex子项
  • 使用CSS3的column属性实现:可参考博客

grid布局

  • 可参考掘金菜鸟教程
  • 容器属性和子项属性初始学习可优先参考这篇文章了解大概,作者给每个属性都做了图示和例子,赞!
    • 部分简便用法菜鸟MDN虽然有但是需要自己找,不过好处就是更加详细且可以动手尝试看效果,更适合后期查资料用
  • 易忘知识点:
    • 容器属性:
      • 简化定义网格模板的过程(可用于grid-template-columns/grid-template-rows/grid-template):
      • grid-template-areas定义网格布局的模板:
        • 通过菜鸟里多个例子会比较好理解,这个例子非常明显
        • 注意: grid-template-areas 属性并不涉及网格单元的宽度比例,它只是用于定义网格布局的模板,而网格单元的大小和宽度是由其他属性(如 grid-template-columnsgrid-template-rows)来定义的
        • 子项的grid-area 属性: 对网格元素进行命名,命名的网格元素可以通过容器的 grid-template-areas 属性来引用,用于设置网格布局
      • 间距属性: grid-column-gapgrid-row-gap
      • align-items属性设置子元素在其网格区域内的块向轴(纵向)上的位置(上中下),默认stretch
      • justify-items属性:设置子元素在其网格区域内的行内轴(横向)上的位置(左中右), 默认stretch
        • 和flex很是不同,出现了justify-items属性
        • 区分justify-content属性: 单元格在在容器里面的水平位置(左中右);align-content 属性是整个内容区域(多行)在容器中的垂直位置(上中下)
        • 例子:这里图示很生动,四个属性区别可见codepen,MDN上有文字叙述同一属性在flex和grid中的表现
      • 简写:
        • place-items属性: align-items属性和justify-items属性
        • place-content属性: align-content属性和justify-content属性
        • grid-template属性: grid-template-columnsgrid-template-rowsgrid-template-areas
        • grid-gap属性:grid-row-gapgrid-column-gap
        • grid属性: CSS 所有网格容器的简写属性,包括grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flowgrid-column-gapgrid-row-gap
    • 子项属性: (网格元素即子项)
      • grid-area属性: 对网格元素进行命名 ,命名的网格元素可以通过容器的 grid-template-areas 属性来引用,用于设置网格布局
      • grid-column-start 属性定义了网格元素从哪一列开始
        • 注意:网格布局的列数是从1开始的,而不是从0开始
      • grid-column-end属性定义了网格元素跨越多少列,或者在哪一列结束
      • grid-row-start属性指定从哪一行开始显示网格元素
      • grid-row-end属性指定哪一行停止显示网格元素,或设置跨越多少行
      • justify-self属性设置子元素在其网格区域内的行内轴(横向)上的位置(上中下),默认stretch ,跟justify-items属性的用法完全一致,但只作用于单个项目
        • 这个也是新出现的属性,grid有但flex没得
      • align-self属性设置 子元素在其网格区域内的块向轴(纵向)上的位置(上中下),默认stretch , 跟align-items属性的用法完全一致,也是只作用于单个项目
      • 简写:
        • grid-column属性是grid-column-startgrid-column-end的合并简写形式
          • grid-column指定元素跨越的列的属性,属性值可以是具体的列号/范围。在“实现两列布局”中有用到grid-column: 1;表示将元素放置在第1列
        • grid-row属性是grid-row-startgrid-row-end的合并简写形式
        • place-self属性是align-self属性和justify-self属性的合并简写形式

flot、flex与grid如何选+区别

  • 三选一应该如何选可参考这篇文章的图,里面也有几个小游戏可以练习各个属性,还有贴主的设计经验小tips和使用场景,非常赞

    • float布局例子flex布局属性练习小游戏grid布局属性练习小游戏

      float:当需要兼容IE浏览器时使用float布局,当使用float布局时不需要考虑移动端,因为手机上没有人用IE浏览器,而这个布局是专门为IE准备的
      flex:当不需要兼容IE浏览器又不需要兼容最新浏览器时可以使用flex布局(必要时可以使用负margin来布局)
      grid:当只兼容最新浏览器时可以使用grid布局

  • flex与grid区别可参考这篇文章,图示很明确的展示出grid的“二维”如何体现

  • 简单理解:flex是一维布局,只能同时操作一列/一行,适合做局部布局,比如导航栏组件;而Grid是二维布局,将容器划分成了“行”和“列”,产生了一个个的网格,可以同时操作多行多列 ,通常用于整个页面的布局规划

    Grid 可以做Flexbox做不了的事,Flexbox 比 Grid 兼容性更好,他们可以共同工作。Grid item可以成为flexbox容器,flex item可以成为grid 容器

  • grid布局还有一个值得注意的小地方和flex不同:在使用margin时,grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个divborder或者padding外侧之间的距离

    • Grid布局中,默认情况下,margin 不会影响网格项之间的位置,而是被包含在网格项的盒模型中。这意味着网格项的大小不会受到 margin 的影响,margin 的空间会被计算在网格项内部。这与 box-sizing 属性的值有关,box-sizing 的默认值为 content-box,所以 margin 不会增加网格项的尺寸,而是包含在内(手动设置 border-box 则可改变,或者可以用 grid-gap 属性设置间距)
    • 而在Flex布局中,默认情况下,margin 会影响弹性项之间的位置,而不会被包含在弹性项的盒模型中。这是因为Flex布局中 box-sizing 的默认值是 border-box,所以 margin 会被包含在弹性项的尺寸内

改变DOM元素的字体颜色,不在它身上进行操作

  • 可以更改父元素的color

line-height和height的区别

  • line-height一般是指布局里面一段文字上下行之间的高度,是针对字体来设置的
  • height一般是指容器的整体高度

设置元素的背景颜色,会填充哪些区域

  • background-color设置的背景颜色会填充元素的content、padding、border区域

重绘和重排,减少重绘和重排

  • 可参考从输入url到页面显示都经历了什么
  • DOM的变化影响到了预算内宿的几何属性比如宽高,浏览器重新计算元素的几何属性,其他元素的几何属性也会受到影响,浏览器需要重新构造渲染这些几何属性,这个过程称之为重排(回流)
  • 浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘
  • 重排一定导致重绘,重绘不一定导致重排
  • 引起重排重绘的原因有:
    • 添加或者删除可见的DOM元素
    • 元素尺寸位置的改变
    • 增加或移出样式表
    • 操作class属性
    • 浏览器页面初始化
    • 浏览器窗口大小发生改变
  • 减少重绘重排,即减少对render tree的操作,并减少对一些style信息的请求,合理利用浏览器优化策略,方法有:
    • 对DOM查询做缓存
    • 使用csstext,className 一次性改变属性,减少设置多项内联样式
    • 使用DocumentFragment将频繁的DOM操作改为一次性操作
    • 对于多次重排的元素,比如说动画。使用绝对定位脱离文档流,使其不影响其他元素,减少render 树的规模
    • table布局的渲染与普通DOM节点的操作相比,性能消耗更大,如果可以,尽量减少table布局的使用
    • 使用虚拟dom脚本库,例如react等

让文档脱离文档流有哪些方法

  • float:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围
  • absolute:绝对定位,因为使用absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,并且这个父类元素的position必须是非static定位的(static是默认定位方式)
  • fixed:完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html元素)

css预处理器有什么

less,sass等

,