有关css的题目

• css样式来源有哪些？
  内联样式： <a style="color: red"> </a>
  内部样式：<style></style>
  外部样式：写在独立的 .css文件中的
  浏览器的默认样式
   
• display有哪些属性
  none - 不展示 
  block - 块类型
  inline - 行内
  inline-block 默认行内块
  inherit - 继承
• inline 和 inline-block的区别？
  inline：共享一行 ， 行内概念
  block：独占一行
  inline-block：共享一行 ， 内容作为block对象呈现
• 行内元素和块级元素有什么区别呢？
  行内元素：无法设置宽高，水平方向可设置margin + padding，垂直方向无法设置，不会自动换行
  块级元素：可以设置宽高，水平垂直方向可设置margin + padding，可以自动换行，多个块状是默认从上往下换行排列
• 有哪些行内和块级元素？
  块级：div form表单 h1标题类 table
  行内：a标签 span img input
• 块级元素和内联元素有哪几种切换方式？
  1、display
  2、float：left / right
  3、position：absolute / fixed
   
  • 选择器的优先级是怎样的？选择器如何做样式判断？这段样式能不能生效？
    内联样式、                         1000
    id选择器、#id                     100
    类选择器、.class                10
    属性选择器、a[ref="link"]   10
    标签选择器、div                 1
    伪类选择器、li:last-child     10       是元素基于特定状态或条件，如:hover、:focus
    伪元素选择器、li:before      1        是元素的一部分，如::before、::after
    
    兄弟选择器、div+p              0
    子选择器、ul>li                    0
    后代选择器、li a                  0
    通配符、 *                            0
     
  • 特殊场景的优先级如何判断？
    ！important 优先级最高
    如果优先级相同，则后者高于前者
    继承得到的样式，优先级最低
    css的引入方式不同也会导致优先级不同。 内部引入 > 外部 > 导入引入@import
     
  • 可继承的样式有哪些？
    字体：font-family、font-weight、font-size、font-style
    文本：text-indent、text-align、line-height、color
    元素：visibility
    列表布局：list-style
    光标：cursor
     
  • 重排（回流）和重绘
    重排，又称回流，是当页面的布局需要重新计算时触发的过程。它涉及元素的位置和尺寸的计算，以及它们相对于其他元素的排列。

    触发重排的情况

    重排会在以下情况下发生：

  • 添加、删除或修改 DOM 元素。
  • 元素的尺寸（宽度、高度、内边距、边框、外边距）发生变化。
  • 元素的显示状态发生变化（例如，从 none 变为 block）。
  • 浏览器窗口的尺寸发生变化（如调整窗口大小）。
  • 读取某些属性（如 offsetWidth、offsetHeight、clientWidth、clientHeight）。

  • 重排是一种开销较大的操作，因为它可能会影响整个 DOM 树或其较大部分，从而导致大量的计算和页面重新绘制。

    重绘

    重绘（Repaint）是当元素的外观发生变化但不影响布局时触发的过程。重绘只涉及外观的改变，如颜色、背景、边框颜色等，不涉及元素的位置或尺寸的计算。

    触发重绘的情况

    重绘会在以下情况下发生：

  • 改变元素的外观样式属性（如 color、background-color、visibility）。
  • 改变元素的文本颜色或背景颜色。

  • 重绘的开销通常比重排小，因为它不涉及布局计算，只需要更新元素的外观。
    
     

  • 盒模型（ 默认为标准盒模型 ）
    构成：content，padding，border，margin
    标准盒模型 content-box：它的width = content     
    IE盒子模型 border-box ：它的width = content + padding + border
    
     

  • BFC 的作用
    1、清除浮动：浮动元素可能会导致其后的兄弟元素布局混乱，通过创建 BFC 可以包裹浮动元素，从而使得其后的元素正常布局。
    2、防止外边距折叠：两个相邻的块级盒子的上下外边距可能会发生折叠（即合并成一个），创建 BFC 可以防止这种情况发生。
    3、包含浮动：父元素可以包含其内部的浮动子元素，而不需要额外的清除浮动的方法。
    4、防止文本环绕浮动元素：在 BFC 内部，块级元素不会被浮动元素覆盖，保证布局的完整性。

  • 如何创建BFC
    1、浮动元素：float 属性不为 none 的元素会创建 BFC。
    2、绝对定位元素：position 属性为 absolute 或 fixed 的元素会创建 BFC。
    3、display 为 inline-block、flex、inline-flex、grid、inline-grid 的元素。
    4、overflow 属性不为 visible 的元素。
     

  • 清除浮动
    1、额外标签法
    <div style="clear: both"></div>
    
    2、使用overflow属性清除浮动。

    // 设置父元素的 overflow 属性为 auto 或 hidden，这样父元素会扩展以包含浮动元素。
    <div class="container">
      <div class="float-box"></div>
      <div class="content"></div>
    </div>
    
    .container {
      overflow: auto; /* 或 overflow: hidden; */
    }
    

    3、使用伪元素
    在父元素上使用伪元素 ::after 来清除浮动

    <div class="container">
      <div class="float-box"></div>
      <div class="content"></div>
    </div>
    
    
    .container::after {
      content: "";
      display: table;
      clear: both;
    }