CSS知识点整理

发表于

css盒模型以及BFC

标准盒模型和IE盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
css盒模型包括：content, padding, border, margin;
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
CSS如何设置这两种模型
/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;

JS如何设置、获取盒模型对应的宽和高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
方式一：通过DOM节点的 style 样式获取
element.style.width/height
缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式。
方式二（通用型）
window.getComputedStyle(element).width/height
方式二能兼容 Chrome、火狐。是通用型方式。
方式三（IE独有的）
element.currentStyle.width/height
和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。
方式四
element.getBoundingClientRect().width/height
此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
此 api 可以拿到四个属性：left、top、width、height。

margin塌陷/margin重叠

1
2
3
4
5
6
7
在标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。  
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
子元素和父元素之间
如果父元素没有border属性，子元素设置了margin-top，连带父元素一起偏移；父元素设置border属性后就正常了；
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。

BFC（边距重叠解决方案）

BFC(Block Formatting Context):块级格式化上下文

1
2
3
4
5
6
7
8
9
10
11
BFC 的原理/BFC的布局规则
（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。
（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
（4）计算BFC的高度时，浮动的子元素也参与计算。
如何生成BFC
方法1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

三栏布局

圣杯

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
27
28
29
30
31
32
33
34
35
//html
<div class='wraper'>
    <div class='main'>main</div>
    <div class='left'>left</div>
    <div class='right'>right</div>
</div>
//css
.wraper{
  padding: 0 200px;
}
.main{
  float:left;
  width:100%;
  background:green;
  height:200px;
}
.left{
  width:200px;
  height:200px;
  background:red;
  float:left;
  margin-left:-100%;
  position:relative;
  left:-200px;
}
.right{
  width:200px;
  height:200px;
  background:yellow;
  float:left;
  margin-left:-200px;
  position:relative;
  left:200px;
}

双飞翼

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
27
28
29
30
31
32
33
34
35
36
//html
<div class='wraper'>
    <div class='main'>
        <div class='content'>main</div>
    </div>
    <div class='left'>left</div>
    <div class='right'>right</div>
</div>
//css
.wraper{
}
.main{
  float:left;
  width:100%;
  height:200px;
  background:green;
}
.content{
  margin: 0 200px;
}
.left{
  width:200px;
  height:200px;
  background:red;
  float:left;
  margin-left:-100%;
}
.right{
  width:200px;
  height:200px;
  background:yellow;
  float:left;
  margin-left:-200px;
}

绝对定位

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
27
28
29
30
<div class='wraper'>
    <div class='left'>left</div>
    <div class='main'>main</div>
    <div class='right'>right</div>
</div>
.wraper {
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    background: red;
}
.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 200px;
    background:green;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    height: 200px;
    background: yellow;
}

table布局

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
<div class='wraper'>
    <div class='left'>left</div>
    <div class='main'>main</div>
    <div class='right'>right</div>
</div>
.wraper {
    width: 100%;
    display: table;
    height: 200px;
}
.wraper div {
    display: table-cell;
}
.left {
    width: 200px;
    background: red;
}
.main {
    background: green;
}
.right {
    width: 200px;
    background: yellow;
}

flexbox布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class='wraper'>
    <div class='left'>left</div>
    <div class='main'>main</div>
    <div class='right'>right</div>
</div>
.wraper {
    display: flex;
}
.left {
    width: 200px;
    height: 200px;
    background: red;
}
.main {
    height: 200px;
    flex: 1;
    background:green;
}
.left {
    width: 200px;
    height: 200px;
    background: yellow;
}

grid布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class='wraper'>
    <div class='left'>left</div>
    <div class='main'>main</div>
    <div class='right'>right</div>
</div>
.wraper {
    display: grid;
    width: 100%;
    grid-template-rows: 200px;
    grid-template-columns: 200px 1fr 200px;
}
.left {
    background: red;
}
.main {
    background: green;
}
.right {
    background: yellow;
}

水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
	<div class="child">DEMO</div>
</div>
.parent{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child{
    display:inline-block;
}

多边形的绘制

平行四边形

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="parallelograms">
    <div>二十首情诗与绝望的歌</div>
</div>
 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background-color: #58a;
    transform:skew(-45deg);
}
.parallelograms div{
    transform: skew(45deg);
}
<div class="parallelograms">
    二十首情诗与绝望的歌
</div>
.parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    position: relative;
}
.parallelograms:before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #58a;
    transform:skew(-45deg);
    z-index: -1;
}