- 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; }
- 选择器的优先级是怎样的?选择器如何做样式判断?这段样式能不能生效?
有关链表的题目
2024-07-21 06:00:02 51 阅读