CSS准备
Jonnzer Lv4

布局

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

圣杯布局代码:

1
2
3
4
5
 <div class="container">
<div class="center">center</div>
<div class="left">Left</div>
<div class="right">Right
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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;
}

双飞翼布局:

1
2
3
4
5
<div class="center">
<div class="center-wrap"></div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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 实现一个三点的🎲

1
2
3
4
5
 <div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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 重绘 && 重排

在另一篇博文有详细介绍,链接:点此


参考链接:
张鑫旭BLOG

  • 本文标题:CSS准备
  • 本文作者:Jonnzer
  • 创建时间:2020-04-08 17:21:35
  • 本文链接:https://jonnzer.github.io/2020/04/08/CSS_review/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论