前端面试秘籍.pdf

"前端面试秘籍.pdf" HTML 和 CSS 部分的知识点总结： 1. CSS 盒子模型： 标准盒子模型：宽度 = 内容宽度（content）+ border + padding 低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding） 在 CSS 中，盒子模型是指元素的宽度和高度是如何计算的。标准盒子模型中，宽度是内容宽度加上 border 和 padding 的总和，而低版本 IE 盒子模型中，宽度是内容宽度加上 border 和 padding 的总和。 2. BFC（Block Formatting Context）： BFC 是什么？BFC 是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成 BFC 的条件： * 浮动元素，float 除 none 以外的值 * 定位元素，position（absolute，fixed） * display 为以下其中之一的值 inline-block，table-cell，table-caption * overflow 除了 visible 以外的值（hidden，auto，scroll） BFC 的特性： * 内部的 Box 会在垂直方向上一个接一个的放置。 * 垂直方向上的距离由 margin 决定 * bfc 的区域不会与 float 的元素区域重叠。 * 计算 bfc 的高度时，浮动元素也参与计算 * bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。 3. 如何清除浮动？ 清除浮动是指解决浮动元素父元素高度塌陷的问题。方法有： * clear 清除浮动（添加空 div 法） * 给浮动元素父级设置高度 * 父级同时浮动（需要给父级同级元素添加浮动） * 父级设置成 inline-block，其 margin: 0 auto 居中方式失效 * 给父级添加 overflow:hidden 清除浮动方法 * 万能清除法 after 伪类 清浮动（现在主流方法，推荐使用） 4. 用纯 CSS 创建一个三角形的原理： 使用 border 属性可以创建一个三角形。原理是使用 border-top、border-left、border-right 和 border-bottom 属性来设置边框的宽度和颜色，从而形成一个三角形。 5. CSS3 实现 0.5px 的细线： 使用 transform 属性可以实现 0.5px 的细线。原理是使用 scaleY 函数将线条的高度缩放到 0.5px。 6. CSS 实现三栏布局左右固定，中间自适应： 可以使用 flex 方式或绝对定位方式来实现三栏布局。flex 方式使用 display: flex 属性和 flex-grow 属性来实现中间栏自适应。绝对定位方式使用 position: absolute 属性和 left、right、top、bottom 属性来实现固定宽度的左右栏和自适应的中间栏。