有关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; }
- 选择器的优先级是怎样的？选择器如何做样式判断？这段样式能不能生效？