css常用样式及问题小结

background-position
bottom, left, right, top
height, width
margin-bottom, margin-left, margin-right, margin-top
min-height, min-width
padding-bottom, padding-left, padding-right, padding-top
text-indent

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor

// 阻止元素被浮动元素覆盖
.normal {
	overflow: auto; // 设置触发BFC的属性
	height: 100px;
	background-color: pink;
}
.float {
	float: left;
	width: 100px;
	height: 50px;
	background-color: red;
}

<div class="box">
	<div class="float">float</div>
	<div class="normal"></div>
</div>

// 包含浮动元素，避免高度塌陷
.wrap {
	overflow: auto; // 设置触发BFC的属性
	background-color: green;
}
.content {
	float: left;
	width: 200px;
	height: 100px;
	background-color: blue;
}

<div class="wrap">
	<div class="content">content</div>
</div>

// 阻止margin会发生重叠
.box1,.box2-child {
	height: 100px;
	background-color: #ccc;
	margin: 20px 0;
}
.box2-child {
	background-color: #0099FF;
}
.box2 {
	overflow: auto;
}
<div class="main">
	<div class="box1">box1</div>
	<div class="box2">
		<div class="box2-child">box2</div>
	</div>
</div>

// 第一种  position: absolute + transform 实现垂直居中，宽高自适应，兼容ie9+ （优先使用此方式）
.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: pink;
}
<div class="box">position: absolute + transform</div>

// 第二种 position： absolute，top+left+top+bottom等0实现水平垂直居中，需要设置具体宽高，兼容ie6+（其次使用此方式）
.box1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 50px;
	background-color: pink;
}
<div class="box1">position： absolute，top+left+top+bottom</div>

// 第三种 flex实现 
// 父元素
.wrap3 {
	width: 100%;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: blue;
	margin-top: 10px;
}

// 居中子元素
.box3 {
	width: 10%;
	flex: 0 0 50px;
	background-color: pink;
	align-self: center;
}
<div class="wrap3">
	<div class="box3">flex布局</div>
</div>

// 第四种 table-cell实现
.wrap4 {
	display: table;
	width: 100%;
	height: 200px;
	
	margin-top: 10px;
}
.box4 {
	display: table-cell;
	
	background-color: blue;
	vertical-align: middle;
	text-align: center; 
}
.content {
	width: 50%;
	height: 50px;
	margin: auto;
	background-color: pink;
}

<div class="wrap4">
	<div class="box4">
		<div class="content">display:table-cell</div>
	</div>
</div>

// 第一种方式，定宽的元素float脱离文档流，右侧元素给对应宽度的margin-left（优先推荐使用该方法）
.wrap {
	width: 100%;
	height: 200px;
	margin-top: 10px;
	background-color: blue;
}
.left {
	float: left;
	width: 200px;
	background-color: pink;
}
.right {
	margin-left: 200px;
	height: 200px;
	background-color: gray;
}
<div class="wrap">
	<div class="left">left，左侧浮动，脱离文档流，右侧设置一个margin-left</div>
	<div class="right">right</div>
</div>

// 第二种方式左右两侧都浮动，左侧设置固定宽度，及一个固定宽度的margin-right负值，右侧设置宽度100%，然后在右侧div内设一个子元素，给子元素设置一个margin-left
.left1 {
        float: left;
        margin-right: -200px;
        width: 200px;
        background-color: pink;
}
.right1 {
	float: left;  
	width: 100%; 
}
<div class="wrap">
	<div class="left1">left</div>
	<div class="right1">
		<div class="content">right</div>
	</div>
</div>

// 第三种方式 flex，这种方法需要注意兼容性，ie10+,移动端可以用
.wrap1 {
	display: flex;
	width: 100%;
	height: 200px;
	margin-top: 10px;
	background-color: blue;
}
.left2 {
	flex: 0 0 200px;
	background-color: pink;
}
.right2 {
	flex: 1;
	background-color: gray;
}

<div class="wrap1">
	<div class="left2">left,这种方法需要注意兼容性，ie10+,移动端可以用</div>
	<div class="right2">right</div>
</div>

tr:nth-child(2n+1) === tr:nth-child(odd)选择奇数行；
tr:nth-child(2n) === tr:nth-child(even)选择偶数行；
span:nth-child(0n+1) === span:nth-child(1) === first-child匹配第一个元素；
span:nth-child(-n+3)匹配前三个元素