CSS准备 | Jonnzer's Blog

布局

1. 介绍下BFC及其应用

BFC 是什么: ( Block Formatting Context ) 块级格式上下文
它是 css 盒模型的渲染模式，独立渲染区域，内部元素的渲染不会影响边界以外的元素。
有着盒子对齐，解决外边距重叠（ margin 塌陷问题），清除浮动，防止文字环绕，多列最后列宽度自定义（不挤掉）
怎么新建一个 BFC :
一个新的 BFC 可以通过给容器添加任何一个触发 BFC 的 CSS 样式，如 overflow : scroll, overflow : hidden, display : flex / inline-block, float: left, position 为 absolute / fixed 或者 display: table来创建。
display: table 可能会产生一些问题
overflow: scroll 可能会显示不必要的滚动条
float: left 将会把元素置于容器的左边，其他元素环绕着它
overflow: hidden 将会剪切掉溢出的元素

参考链接：
w3cPlus
MDN

2. float 布局的应用（双飞翼圣杯）

圣杯和双飞翼布局的特点：
（1）三栏布局，中间一栏最先加载和渲染（网络慢的时候优先加载 dom 有优势）
（2）两侧内容固定，中间内容随着宽度自适应
（3）常用于 PC 网页

技术特点：
（1）使用 float 布局
（2）两侧使用margin负值，以便和中间内容横向重叠
（3）防止中间内容被两侧覆盖，一个用 padding ，一个用 margin

圣杯布局代码：

 <div class="container">
    <div class="center">center</div>
    <div class="left">Left</div>
    <div class="right">Right
</div>

.container{
    padding-left:150px;
    padding-right:190px;
    }
.left, .center, .right {
    height: 300px;
}
.left{
    background: #E79F6D;
    width:150px;
    float:left;
    margin-left:-100%;
    position: relative;
    left: -150px;
}
.center{
    background: #D6D6D6;
    width:100%;
    float:left;
}
.right{
    background: #77BBDD;
    width:190px;
    float:left;
    margin-right: -190px;
}

双飞翼布局：

<div class="center">
    <div class="center-wrap"></div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

.center{
    background: #D6D6D6;
    width:100%;
    float:left;
}
.center .center-wrap {
    margin-left: 150px;
    margin-right: 190px;
}
.left, .center-wrap, .right {
    height: 300px;
}
.left{
    background: #E79F6D;
    width:150px;
    float:left;
    margin-left:-100%;
}
.right{
    background: #77BBDD;
    width:190px;
    float:left;
    margin-left: -190px;
}

3. flex 布局

如何用 flex 实现一个三点的🎲

 <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.box {
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
}
.box .item {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50px;
    background-color: red;
}
.item:nth-child(1) {
    align-self: flex-start;
}
.item:nth-child(2) {
    align-self: center;
}
.item:nth-child(3) {
    align-self: flex-end;
}

4. 盒子模型理解以及相关CSS属性

什么是盒子模型？
网页的 dom 具有盒子的属性，一层一层的装载。故把 dom 称为盒子模型。
盒子模型范围包括：content 、padding 、border 、margin

存在两种盒子模型：标准 w3c 盒子模型（主流）、IE盒子模型（以页面头顶的 Doctype 声明来区分）
它们区别在于：标准 w3c 盒子模型，content 是仅仅包括自身宽高，而 IE盒子模型的 content 宽高是（自身宽高+ padding + border）

offset系列：

(offset 单词自身就有偏移量的意思) 表示元素在屏幕上占用的可见空间，都以像素为单位。
属性为只读不可写
可见大小由：高度、宽度、内边距、滚动条、边框。（！！！不包括外边距）
- offsetHeight : 元素在垂直方向占用的空间大小
- offsetWidth : 元素在水平方向占用的空间大小
- offsetLeft : 元素的左边框至 包含元素的左内边框的像素距离
- offsetTop : 元素的上边框至 包含元素的上内边框的像素距离
- offsetParent : 包含元素的引用

client系列：

属性为只读不可写
(表示客户区大小的含义) 元素内容以及内边距占用的空间大小
- clientWidth : 内容宽度 + 左右内边距
- clientHeight : 内容高度 + 上下内边距
应用场景：
浏览器视口大小：document.documentElement.clientWidth / clientHeight
适配ie7: document.body.clientWidth / clientHeight
(document.compatMode == ‘BackCompat’ // 确保浏览器在混杂模式此时是适配ie系列)

scroll系列：

表示包含滚动内容的元素的大小。
- scrollHeight : 在没有滚动条的情况下，元素内容的总高度。
- scrollWidth : 在没有滚动条的情况下，元素内容的总宽度。
- scrollLeft : 页面左边滚动隐藏的像素。（可改）
- scrollTop : 页面上边滚动隐藏的像素。（可改）

getBoundingClientrect

返回矩形对象，包括4个属性：left 、top 、right 、bottom。表示元素相对视口的位置。

5. margin

margin 塌陷问题
margin塌陷表现为元素在垂直距离上的合并，a元素和b元素是垂直的，a设置 margin-bottom 100px b设置 margin-top 150px
a 和 b 在塌陷的情况下，表现为垂直外边距相差的最大值，即 150px。
创建 BFC 可以解决此问题
margin负值问题
在另一篇margin负值博文有详细介绍，链接：点此

6. A: display:none; B: visibility:hidden; C: opacity: 0的区别

展示程度上
都不显示
dom可操作上
A不可操作，B不可操作，C可操作
继承性
A和C的父盒子设置了对应的属性A和C，则他们的子代也是不可见，不可操作。B的子代是可以设置显示的
性能
A改变了结构，引起文档回流，性能消耗最大
B引起元素重绘，消耗中等
C消耗最低

7. css 定位

absoulte 和 relative 分别依据什么定位？
relative 依据自身定位（圣杯布局时有用自身定位位移左侧）
absolute 依据最近一层的定位元素定位
居中对齐有哪些实现方式？
水平居中：
inline 元素：text-align ：center
block 元素：margin ：0 auto
absolute 元素： left 50% + margin-left 负值（需要知道宽度）

垂直居中：
inline 元素： line-height = height
absolute 元素： top 50% + margin-top 负值（需要知道高度）
absolute 元素：transform（-50%， -50%）
absolute 元素：top、left、bottom、right = 0 + margin：auto

8 图文样式

line-height 如何继承？
line-height 具有继承属性，如果是具体数值或比例，则直接继承；如果是百分比，需 line-height 乘 font-size，再继承

9 响应式原理

在另一篇博文有详细介绍，链接：点此

10 重绘 && 重排