CSS相关-阿卡卡卡侃大山的卡斯卡迪恶化人啊卡卡

islandsaying
148 阅读6分钟

  1. 盒模型

    • 概念: 盒子模型是网页中的内容元素看作一个个矩形盒子. 盒模型由margin, border, padding, content 四个部分组成. 盒模型的属性是box-sizeing.
    • 分类: 标准盒模型和怪异盒模型, 区别在于设置width和height时候对应的范围不同.
      1. 标准盒模型: width和height就是content范围. box-sizeing: content-box
      2. 怪异盒模型: width和height的范围是content,border,padding之和. box-sizeing: border-box

  2. link和@import的区别

    • 相同点: 都是外部引入css的方式
    • 不同点:
      1. 从属关系:
        • link属于html标签, 不仅可以加载css, 还可以定义其他属性
        • @import 属于css语法, 只用来导入样式表
      2. 加载顺序
        • link: 页面被加载时, link会同时被加载
        • @import: 页面加载完毕之后才会加载
      3. 兼容性问题
        • link: 不存在兼容性问题
        • @import: css2.1提供的语法, ie5以上才兼容
      4. DOM可控性
        • link: js控制dom可以通过插入link标签来改变样式
        • @import: 不支持

  3. 选择器及优先级

    • 一般情况下是这样: !important > 内联样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器

  4. 伪元素和伪类元素

    • 相同点: 都是用来修饰不在文档树中的部分
    • 伪元素:
      1. 写法: 双冒号(::), 例如p::before{content:'第一章'} after/first-line
      2. 概念: 元素的一种, 代表某个元素的子元素, 只是逻辑上存在, 实际并不在文档中. 因为被称为伪元素.
      3. 作用: 模拟新添加一个元素来实现某种效果, 从而帮助内容与样式更好地分离。
      4. 额外: 清除浮动 .clear::after{ content: ''; display: block; clear: both }
    • 伪类:
      1. 写法: 单冒号(:), 例如a:hover{color: #ccc} /active/focus/first-child等
      2. 概念: 类的一种, 代表一些元素的状态, 逻辑上存在, 但不存在于文档中.
      3. 作用: 模拟新添加一个类来实现某种效果

  5. css3 新特性

    1. 圆角(border-radius)
    2. rgba透明效果(rgba(255,255,255,0.1)
    3. 文字特效(text-shadow/text-decoration)
    4. 选择器(伪类选择器)

  6. 隐藏元素的方法及区别

    1. display: none -> 不会渲染, 不占据位置, 不响应事件
    2. visibility: hidden -> 占据位置, 不响应事件
    3. opacity: 0 -> 占据位置, 响应事件
    4. position: absolute -> 移出可视区域
    5. z-index: 负值 -> 用其他元素遮盖住该元素
    6. transform: scale(0,0) -> 缩放为0, 占据位置, 不响应事件
    • 另外: display: none 和 visibility: hidden区别 0. 都让元素隐藏, 不可见, 且无法响应事件
      1. 渲染树中
        • d: 不在渲染树中,不占据位置
        • v: 在渲染树种, 占据位置
      2. 是否继承
        • d: 非继承, 子节点会随着父节点消失, 修改了子节点的属性也无法显示
        • v: 继承, 子节点消失就是因为继承了hidden, 修改了子节点属性则会显示
      3. 重排与重绘
        • d: 修改d会导致文档的重排
        • v: 修改v会造成本元素的重绘

  7. 一些css预处理器

    1. 背景: 用户需求的增加和网站技术的升级, 传统写法不满足开发需求
    2. 常见处理器: scss, sass, less
    3. 用法:
      • 变量: border: 1px solid #ccc .a{border: border}
      • 嵌套: div{.a{font-size:14px}}
      • mixin: @mixin color-red1{color: red} div{ @include color-red1; width: 50px; height: 50px }
    4. 好处: 结构清晰, 易于扩展, 多重继承

  8. 居中/常见布局

  9. flex 相关属性

    • 概念: 弹性布局

  10. 浏览器的回流与重绘

    • 背景:
      1. 浏览器采用流式布局模型
      2. 浏览器把html解析成dom, 把css解析为cssom, dom和cssom合并产生了render tree
      3. 有了rendertree, 我们就知道了所有节点的样式, 然后计算他们在页面上的大小和位置, 然后将节点绘制在页面上
    • 回流(reflow)
      • 概念: 当rendertree种部分或全部元素的尺寸, 结构, 或某些属性发生改变时看, 浏览器重新渲染部分或者全部文档的过程称为回流.
      • 会导致回流的操作:
        1. 浏览器窗口大小改变
        2. 元素尺寸位置编号
        3. 元素内容变化
        4. 元素字体大小变化
        5. 添加或者删除可见的dom元素
    • 重绘(repaint)
      • 概念: 当页面种元素样式的改变并不影响它在文档流中的位置时(如color, background-color, visibility), 浏览器会将新样式赋予给元素并重新绘制他, 这个过程称为重绘
    • 性能: 回流比重绘的代价要更加
    • 避免回流
      1. 避免设置多层内联样式, 最好合并在一个外部类
      2. 避免使用table布局
      3. 避免使用css计算式,如calc()

  11. 定位与浮动

    1. postion的属性有哪些?区别是什么?
      • absolute: 绝对定位, 相对于非static定位(如relative,absolute,fixed)的一个父级元素进行定位, 通过left,top, right. bottm来进行定位
      • relative: 相对定位, 相当于其原来的位置进行定位
      • fixed: 绝对定位, 相当于于屏幕视口(viewport)进行定位, 元素的位置在屏幕滚动时不会改变, 比如回到顶部的按钮一般使用此定位方式.
      • static: 默认值, 没有定位方式
    2. 为什么要清除浮动, 清除浮动的方式?
      • 浮动引起的问题: 脱离文档流, 高度塌陷
      • 清除浮动: .clear::after{ content: ''; display: block; clear: both }
    3. 对bfc的理解, 如何创建bfc
  12. 水平垂直居中

    • display:flex方法, 父级容器设置display: flex; justify-content: center; align-items:center;

    • 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

      .parent { position: relative;} 
.child { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%);
}

    • 绝对定位: 先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

          .parent { position: relative; } 
    .child { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        margin-top: -50px; /* 自身 height 的一半 */ 
        margin-left: -50px; /* 自身 width 的一半 */ 
    }

    • 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

          .parent { position: relative; } 
    .child { 
        position: absolute; 
        top: 0; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        margin: auto; 
    }
avatar
文章
阅读
粉丝