前端开发CSS使用技巧总结

隐藏盒子的几种方式

• overflow：hidden; //隐藏盒子超出的部分
• display: none; 隐藏盒子，而且不占位置(用的最多)
• visibility: hidden; //隐藏盒子，占位置。
• pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置

将盒子移出视窗：

margin-left: -1000px;
left: -999px //把盒子移得远远的，占位置。

• css画三角形

/*上三角*/
.triangle{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid red;
	border-top: 50px solid transparent;
}

• 设置盒子的半透明
  方式一： pacity: 0.4 。优点是方便。缺点是：里面的内容也会半透明
  方式二：css3的技术来解决半透明。如下：

background: rgba(0,0,0,0.3);
background: rgba(0,0,0,.3);
备注： a 指的是alpha透明度。

• 背景图不能撑开盒子
  使用背景图的时候要提前定义盒子宽高。

• 盒子居中
  1、display: block;
  2、必须定宽
  3、左右margin 取值为auto;

BFC

• 概念：
  BFC（Block Formatting Context）块级格式上下文
• 特性：

1. 同一个BFC中，垂直方向的margin 会折叠，不是同一个BFC，不会折叠
2. BFC区域不会与float box重叠（可用于排版)
3. 计算BFC的高度时，浮动元素也参与计算（不会浮动坍塌）
4. 使用BFC来防止文字环绕
   每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

• 如何形成一个BFC？
  1、根元素
  2、float属性不为none
  3、position为absolute或fixed
  4、display为inline-block, flex, inline-flex，table，table-cell，table-caption
  5、overflow不为visible， 推荐hidden

margin折叠问题

• 概念：在普通文档流中，两个相邻的元素在垂直方向上外边距会发生折叠。
• 当出现margin折叠时如何计算margin值：

1. 同是正值，取最大值：30px , 20px ===> 30px
2. 一正值一负值，取两者的和：-30px , 20px ===> 10px
3. 同是负值，取两者的绝对值的最大值：-30px , -20px ===> -30px

• 元素水平垂直居中

.parent{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.children{
	width: 100px;
	height: 100px;
	background: pink;
}
<div class="parent c3">
	<div class="children"></div>
</div>

• margin + transform

.c3{
	margin: 0 auto;
	margin-top: 50%;
	transform: translateY(-50%);
}
或
.c3{
	margin-left: 50%;
	margin-top: 50%;
	transform: translate(-50%, -50%);
}

• position + transform

.c3{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

• position + margin

.c3{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

或

.c3{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

• flex

.c3{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

精灵图

• 精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
• 使用background-position属性显示指定的小图片。

文本溢出处理

• 单行文本溢出

/*单行文本溢出处理:*/
.text{
	width: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

• 多行文本溢出处理:

.text{
	width: 100px;
	height: 100px;
​    display: -webkit-box;
​    -webkit-box-orient: vertical; // 垂直
​    -webkit-line-clamp: n;   // n表示行数
​    overflow: hidden;
}
或
.text{
	height: 200px;
	width: 300px;
	border: 1px solid red;
	vertical-align: middle;
	display: table-cell;
}