CSS系列-7.CSS中的margin重叠

margin重叠的条件

1. float为none
2. block元素(不包括inline-block, absolute, float)
3. 只发生在垂直方向上

margin重叠的几种情况

1.兄弟

1
2
3
4
5
6
7
8

<div class="parent">
		<div class="child">
			内容
		</div>
		<div class="child">
			内容
		</div>
</div>

1
2
3
4
5
6

.child{
	width: 50%;
	height: 50%; /*高度是内容撑开的, 要记得height是尽可能小*/
	background-color: royalblue;
	margin: 5px 0px;
}

2.父子 子明明有上margin但是没体现出来

1
2
3

.parent{
	background-color: coral;
}

条件
相对比相邻兄弟元素margin重叠来说，父子级margin重叠需要满足以下几个条件(以margin-top重叠为例)：

1. 父元素不是BFC元素
2. 父元素没有padding-top值
3. 父元素没有border-top值
4. 父元素和第一个子元素之间没有inline元素分隔

1
2
3
4
5
6
7
8
9
10
11
12
13

.child{
	width: 50%;
	height: 50%; /*高度是内容撑开的, 要记得height是尽可能小*/
	background-color: royalblue;
	margin: 5px 0px;
}

.parent{
	/*float: left;/*注意float变BFC的包裹性*/
	background-color: coral;
	overflow: hidden;
	margin: 2px;
}

把父级改为BFC的话, 可见父子直接的margin回来了.

3.空的block 可以看出来margin 20px上下 没有撑开

1
2
3

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

1
2
3
4
5
6
7
8

.box{
	background-color: lightgreen;
	overflow: hidden;
}

.void{
	margin: 20px 0;
}

出现可以直接控制是否要重叠的新属性

1

-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)

需要注意的是: 身处两个不同BFC的元素margin不重叠(两个蓝色内容块), 但是两个外层BFC(两个桔黄色块直接的margin还是重叠的)

CSS系列-6.CSS中盒模型

看firefox这开发者工具怎么感觉比chrome的还牛逼呢…

CSS系列-5.CSS中属性关键字

initial

各个属性的默认初始值

inherit

表示元素的直接父元素对应属性的计算值

color和一些带值的表现不一样

1
2
3
4
5
6
7
8
9
10
11

<div class="parent">
	parent
	<div class="child">
			child
	</div>
	<div class="in">
			<div class="child">
				child
			</div>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.parent {
	background-color: black;
	color: red;
	border: 1px solid whblackite;
	padding: 10px;
	width: 100px;
}

.child {
	border: inherit;
}

可以看出差别吧, color, background-color 直接不管是不是直接父元素(这叫继承), 都统统继承过来.
inherit不是继承的意思, border是不可继承的, 继承都是自动的, inherit只是把直接父元素的拿过来了

unset

如果该属性可继承, 那就为inherit, 不可以继承为initial, 感觉和写一样

all

all值得说一下是重设属性值

1
2
3
4
5

.test {
	all: initial; /*.test类中所有属性设为inital*/
	all: inherit; /*所有属性设置为inherit*/
	all: unset; /*所有属性设置为unset*/
}

CSS系列-4.CSS中的各种单位

别看单位不起眼, 面试笔试中还真碰见了不少

绝对长度单位

px: 像素, 其余的单位甭管相对还是绝对之后通过某种计算都会成为px. 浏览器默认的字体大小为16px

英寸in(inches): 用法为 1in; 96px.

厘米cm: 用法为 1cm; 37.8 px

毫米mm:用法为 1mm; 3.78px

1/4毫米 q(quarter-millimeters): 用法为 1q;

点pt(points): 用法为 1pt; 1/72 in

派卡pc(picas): 用法为 1pc; 12 pt; 12 pt = 12 / 72 in = 96px * 12 / 72 = 16px 这么看字体默认16px是有点道理的…

CSS系列-3.CSS选择器优先级的计算

CSS选择器的计算遵从如下规则

1
2
3
4

*{}   /*通配符最低记为 0 0 0 0*/
p{}   /*普通的标签 伪元素 记为 0 0 0 1*/
.class{} /*类属性值 属性选择或伪类 记为 0 0 1 0*/
#id{} /*id记为 0 1 0 0*/

内联最高记为 (不考虑!important的情况下) 1 0 0 0

从最高位比 最高为 1 比其他都大

组合的情况

1

p h2{} /*两个0 0 0 1 即为 0 0 0 2*/