盒子的各个组成部分都对应着css属性,前端面试题之CSS

两种盒模型

盒模型分为W3C的标准模型和IE模型

盒模型又称为框模型，包含了元素内容(content)、内边距(padding)、外边距(margin)、边框(border)

如图：

W3C的标准模型：width/height属性指content

IE模型：width/height属性由content+padding+border组成

这两种模型的区别就是计算的宽度和高度不同

通过CSS3新增的属性box-sizing:content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)

W3C的标准模型：

.content-box {

box-sizing: content-box;

width: 100px;

height: 100px;

padding: 20px;

border: 5px solid red;

margin: 10px;

}

其中：width=100px

IE模型：

.border-box {

box-sizing: border-box;

width: 100px;

height: 100px;

padding: 20px;

border: 5px solid red;

margin: 10px;

}

其中：width= content + 2padding + 2border = 100px

相对比较而言：border-box更好用！！！

扩展：JS如何设置获取盒模型对应的宽和高呢？

dom.style.width / height; // 设置获取的是内联样式

dom.currentStyle.width / height; // IE支持

window.getComputedStyle(dom).width / height; // 兼容性好

dom.getBoundingClientRect().width / height; // 计算一个元素的绝对位置

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器的部分标签默认值都是不同的，如果没有对CSS样式初始化会出现各个浏览器之间的页面显示差异。

对CSS样式初始化后会对SEO有一定的影响，所以力求影响最小的情况下进行初始化。

最简单也不建议初始化的方式：

* {

margin: 0;

padding: 0;

}

如何垂直居中

flex怎么用，常用属性有哪些

display:none;与visibility:hidden;有什么区别呢

display:none;：隐藏对应的元素，在文档布局中不再分配空间

visibility:hideen;：隐藏对应的元素，在文档布局中仍保留原来的空间

使用display:none;属性后，HTML元素(对象)的宽度、高度等各种属性值都将丢失；而使用visibility:hideen;属性后，HTML元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置仍然存在。

BFC是什么，举例回答

概念

BFC，全称Block Formatting Context，意为块格式化上下文。

BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

以下方式会创建块格式化上下文：

根元素()

浮动元素(元素的float不是none)

绝对定位元素(元素的position为absolute或fixed)

行内块元素(元素的display为inline-block)

表格单元格(元素的display为table-cell，HTML表格单元格默认为该值)

表格标题(元素的display为table-caption，HTML表格标题默认为该值)

匿名表格单元格元素(元素的display为table、table-row、table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)

overflow值不为visible的块元素

display值为flow-root的元素

contain值为layout、content或paint的元素

弹性元素(display为flex或inline-flex元素的直接子元素)

网格元素(display为grid或inline-grid元素的直接子元素)

多列容器(元素的column-count或column-width不为auto，包括column-count为1)

column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

特性与功能

清除浮动

.parent {

width: 400px;

border: 1px solid red;

/*给parent创建了BFC*/

overflow: hidden;

}

.child1,

.child2,

.child3 {

width: 100px;

height: 100px;

background-color: blue;

float: left;

}

.child1 {

background: purple;

}

.child2 {

background: yellow;

}

未添加overflow: hidden;时：

添加后创建了BFC：

解决外边距合并问题

1

2

.container {

overflow: hidden;

}

p {

width: 100px;

height: 100px;

background: red;

margin: 50px;

}

未在父元素添加overflow: hidden;时：

添加后：

实现两列自适应布局

左

右

.parent {

width: 400px;

height: 400px;

border: 1px solid red;

}

.left {

width: 100px;

height: 100px;

background-color: blue;

float: left;

}

.right {

height: 300px;

background-color: yellow;

overflow: hidden;

}

未在第二个子元素添加overflow: hidden;时：

添加后：

特性

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

通俗来讲，可以把BFC理解为一个封闭的箱子，箱子内部的元素无论如何改变，都不会影响到外部。

CSS选择器的优先级

越具体优先级越高；

写在后面的覆盖前面的；

!important，最高，但是要少用！！！

如何清除浮动

方法一

为float后的元素添加clear属性

a

b

c

.a,

.b {

width: 100px;

height: 100px;

border: 5px solid red;

}

.b {

float: right;

}

.a {

float: left;

}

.c {

border: 5px solid blue;

height: 100px;

clear: both;

}

方法二

给父容器添加clearfix的class，用伪元素clearfix::after设置样式，清除浮动。

a

b

.parent {

border: 5px solid red;

}

.a,

.b {

width: 100px;

height: 100px;

border: 5px solid blue;

}

.a {

float: left;

}

.b {

float: right;

}

.clearfix::after {

content: '';

display: block;

clear: both;

}

方法三

给父容器添加overflow:hidden或者auto

a

b

.parent {

border: 5px solid red;

overflow: auto;

}

.a,

.b {

width: 100px;

height: 100px;

border: 5px solid blue;

}

.a {

float: left;

}

.b {

float: right;

}

em与rem

用纯CSS创建一个三角形

CSS代码如下：

.triangle {

width: 0;

height: 0;

border-width: 40px;

border-style: solid;

border-color: transparent transparent red transparent;

}