css面试题集合

 

  1. 渐进增强和优雅降级的区别
    1. 这是两种不同的设计思想
      1. 渐进增强是向上兼容，优雅降级是向下兼容
      2. 渐进兼容是从简单到复杂，优雅降级是从复杂到简单
      3. 渐进增强关注的是内容，优雅降级关注的是用户体验
  2. 盒子模型：
    1. ie模型（）怪异模型：设置宽度width包含（content+padding+border）
    2. w3c标准模型·：设置宽度width包含（content）
    3. 通过css3的box-sizing可以设置 content-box和border-box
  3. 外边距塌陷
    1. 当两个正常流中相邻的块级元素上下的外边距重叠合在一起，或父子div嵌套设置外上边距
    2. 计算方式
      1. 两个正数取较大值
      2. 一正一负则相加
      3. 两个负数则取绝对值较大的值
    3. 解决父子嵌套塌陷的方法
      1. 给父元素添加边框
      2. 给父元素设置一个属性overflow:hidden　
    4. 至于兄弟的塌陷，只能尽量别同时使用外边距
  4. 行内元素和块级元素和行内块元素的区别
    1. 类型 代表元素 特点 外边距 内边距 高度
      块级元素 div    display:block

      可以容纳其他行内元素和其他块级元素

      （文字类块级不能容纳其他块元素<p>）

      宽度不设置默认100%

      		 可控 可控 宽高可控
      行内元素 span  display:inline 只能放行内元素和文本，a特殊可以放块元素  水平有效  水平有效，垂直不可控  只有宽可控
      行内块元素 input  display:inline-block

       相邻元素在同一行，会有空白缝隙

      （缝隙在编写html代码时为便于阅读结构格式化，

      把标签之间的换行符去除即可，也可父元素div设置  font-size=0

      ）

      		  可控  可控

       默认宽为内容大小

      可以修改宽高
  5. 元素隐藏方法
    1. display:none
      1. 不占据任何空间，元素真实尺寸会丢失，导致重排重绘
      2. 完完全全连子元素一起消失
    2. visibility:hidden
      1. 正常流中占据空间，只会导致重绘
      2. 与opacity相识，最大区别不会响应任何用户交互动画效果
    3. opacity:0
      1. 正常流中占据空间，这个元素真实存在，只是在视觉上的消失
      2. 透明度0为不可见，可进行交互操作
    4. position:absolute
      1. 主要是通过定位将元素脱离正常流，移动到可视窗口之外
  6. 谈谈对BFC的理解（块格式化上下文）
    1. 他是CSS2.1规范的一个概念，决定元素内容如何让渲染以及和其他元素之间的关系和交互
    2. 规则
      1. BFC隔离：内部元素不受外部元素的影响
      2. 一个元素只有一个BFC
      3. BFC内的元素按正常流中排列，元素间的间隙由外边距控制
      4. BFC中元素不会与外部浮动元素重叠
      5. 计算BFC高度包含BFC内浮动元素的高度

    3. 如何创建BFC

      1. float的值不是none。
      2. position的值不是static或者relative。
      3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
      4. overflow的值不是visible
    4. BFC的作用主要在与隔离限制当前BFC的内部元素，避免内部元素浮动乱跑、清除浮动、解决外边距塌陷问题
  7. 选择器
    1. 选择器类型
      1. 标签选择器  
      2. 类选择器
      3. ID选择器
      4. 全局（*）选择器
      5. 组合选择器 ：div，  p{}  所有 div和p 
      6. 后代选择器： div p{}  div内的所有p
      7. 子选择器：   div>p {}  所有父亲是div的p
      8. 兄弟选择器：  div+p{}  所有div和p相邻的p元素
      9. 属性选择器  ：  [ target] {} 所有带target属性的元素
      10. 伪元素选择器
      11. 伪类选择器
    2. 选择器优先级权重计算
      1. 属性后面 ! important  > html标签中 style （嵌入） >   内联样式   >  外部样式
      2. 权重相同的，后面定义会覆盖前面
      3. 权重计算
        • 第一等级：代表内联样式，如style=""，权值为 1000
        • 第二等级：代表id选择器，如#content，权值为100
        • 第三等级：代表类，伪类和属性选择器，如.content，权值为10
        • 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
        • 注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
    3. 伪类和伪元素的区别
      1. 伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。　

      3. 伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover

      5. 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

        伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

  8. 关于属性继承
    1. 与元素外观相关属性（字体，颜色，对齐方式等）可以被继承
    2. 与布局相关的属性（边框，外边距，内边距尺寸等）不可以继承
  9. 关于 a标签的四种状态  未访问（：link）、已访问（：visited）、激活（：active）、悬停（ ：hover）的声明顺序
    1. 通常为    LVHA
  10. 角度单位
    1. deg      度           一个圆200deg
    2. grad    百分度    一个圆400grad
    3. rad       弧度       一个圆约6.28rad   1rad=PI/180deg
    4. turn      转数       1turn=360deg   
  11. 单位
    1. 50vh 、50vw表示当前可视窗口高的的50%和宽的50%
    2. 10vmax 、10vmin   表示在当前可视窗口的高和宽比较中，10vmax则取max（高，宽）*10%，0vmin则取min（高，宽）*10%
  12. calc函数
    1. 是CSS中的一个函数，可处理不同单位的加减乘除运算
  13. 当用百分比设置margin和padding时，参照的是父元素的宽度
  14. 根元素的百分比高度之所以有效是因为根元素的包含块是由视口提供的初始包含块，初始包含块的高度就是视口的高度
  15. 字体行高line-height用百分比参考的是自生字体大小，如果该元素没有定义字体大小，那么字体大小从父元素中继承
  16. CSS中使用background：transparent关键字相当于rgba（0,0,0,0）,于opacity：0不同，opacity是设置整个节点的透明度为0内容和背景都不会显示，但是background：transparent是改变背景，不会涉及到节点内容
  17. 元素浮动会脱离文档流，出现包含块高度塌陷，影响兄弟的位置或样式。清除浮动的方法有
    1. 为浮动元素包含块创建BFC
    2. 在浮动元素后面标签设置clear属性为both
    3. 在最后一个浮动元素添加伪元素 after，设置clear属性为both
  18. 设置基线vertical-line，会影响所有子元素的基线位置
  19. 使用css实现三角形的方法原理 ：利用border
    1. 设置元素宽高都为0；
    2. 定义border为实心线，以及大小10px，颜色透明。此时会出现大小为10px的正方形
    3. border会根据对角线将正方形切割为4部分，此时你就可以指定某一方向的边框设置颜色
  20. tranform函数属性：
    1. translate （）  平移
    2. scale （） 缩放
    3. rotate （） 旋转
    4. skew（） 变形
  21. tranform过度触发条件有，伪类触发，媒体查询触发，javascript触发
  22. 过渡和动画的区别
    1. 过渡只能指定初始状态和结束状态，而动画通过帧改变，中间允许存在多个状态
    2. 动画不需要触发条件，当页面以及相关样式加载完会立刻执行
    3. 动画的子属性比过渡多，可以控制动画循环次数，播放方向以及动画状态

 

posted @ 2020-10-25 13:11  浪波激泥  阅读(163)  评论(0)  编辑  收藏  举报