We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Q1 | Q2 | Q3 | Q4 | Q5 | Q6 | Q7 | Q8 |
Q1
CSS
当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。它封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。
(layout)
(CSS basic box model)
(box)
HTML
(margin)
(border)
(padding)
(content)
其实盒子模型有两种,分别是IE盒子模型和标准W3C盒子模型。它们之间的区分主要是由属性box-sizing来决定的,content-box代表标准盒子模型,border-box代表IE盒子模型。下面让我们来看看它们之间的区别吧。
IE
W3C
box-sizing
content-box
border-box
标准盒子模型
IE盒子模型
从上面结果看,我们知道标准盒子模型和IE盒子模型的区别就是两者的计算方式不一样
MDN - CSS基础框盒模型介绍
MDN
Q2
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
static
top, bottom, left, right
z-index
2、relative(相对定位):生成相对定位的元素,通过top, bottom, left, right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
relative
3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过top, bottom, left, right属性进行规定。可通过z-index进行层次分级。
absolute
4、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 top, bottom, left, right属性进行规定。可通过z-index进行层次分级。
fixed
Position属性四个值:static、fixed、absolute和relative的区别和用法
MDN - 定位
回到顶部
Q3
position
float
相同点:相应模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,) 而float只会覆盖块级元素,里面的文字会脱离出来
前端笔试之HTML+CSS+JS NO.1
NO.1
Q4
BFC
素质三连:什么是BFC? 它是作用是什么?如何触发它?
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。简单的说就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。它与其他的块框类似,但是不同之处是:
(Block Formatting Context,BFC)
Web
满足以下条件之一就可以触发BFC:
float 不为
overflow
visible
hidden,auto,scroll
display
inline-block
table-cell
table-caption
display:table-caption
html
flex boxes
display:flex / inline-flex
MDN - 块格式化上下文
The text was updated successfully, but these errors were encountered:
No branches or pull requests
CSS笔记,欢迎大佬提意见!!!
快速导航
Q1 | Q2 | Q3 | Q4 | Q5 | Q6 | Q7 | Q8 |
Q1
.CSS
盒模型问题?当对一个文档进行布局
(layout)
的时候,浏览器的渲染引擎会根据标准之一的CSS
基础框盒模型(CSS basic box model)
,将所有元素表示为一个个矩形的盒子(box)
。它封装周围的HTML
元素,它包括:边距(margin)
,边框(border)
,填充(padding)
,和实际内容(content)
。其实盒子模型有两种,分别是
IE
盒子模型和标准W3C
盒子模型。它们之间的区分主要是由属性box-sizing
来决定的,content-box
代表标准盒子模型,border-box
代表IE
盒子模型。下面让我们来看看它们之间的区别吧。标准盒子模型
IE
盒子模型从上面结果看,我们知道标准盒子模型和
IE
盒子模型的区别就是两者的计算方式不一样MDN
-CSS
基础框盒模型介绍Q2
. 常见的定位方式1、
static
(静态定位):默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right
或者z-index
声明)。2、
relative
(相对定位):生成相对定位的元素,通过top, bottom, left, right
的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。3、
absolute
(绝对定位):生成绝对定位的元素,相对于static
定位以外的第一个父元素进行定位。元素的位置通过top, bottom, left, right
属性进行规定。可通过z-index
进行层次分级。4、
fixed
(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过top, bottom, left, right
属性进行规定。可通过z-index进行层次分级。Position属性四个值:static、fixed、absolute和relative的区别和用法
MDN
- 定位回到顶部
Q3
.position
和float
的异同相同点:相应模块都会脱离文档流
不同点:
position
相应的块级元素会覆盖下面的内容(文字,)而
float
只会覆盖块级元素,里面的文字会脱离出来前端笔试之HTML+CSS+JS
NO.1
回到顶部
Q4
.BFC
相关问题?素质三连:什么是
BFC
? 它是作用是什么?如何触发它?1. 什么是
BFC
?块格式化上下文
(Block Formatting Context,BFC)
是Web
页面的可视化CSS
渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。简单的说就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。它与其他的块框类似,但是不同之处是:2. 它是作用是什么?
3. 如何触发它?
满足以下条件之一就可以触发
BFC
:HTML
元素;float 不为
none`;overflow
不为visible
->hidden,auto,scroll
;display
为inline-block
,table-cell
,table-caption
;position
为absolute
或fixed
.display:table-caption
,html
表格标题默认属性)flex boxes
->display:flex / inline-flex
MDN - 块格式化上下文
回到顶部
The text was updated successfully, but these errors were encountered: