CSS拾遗

最新推荐文章于 2020-05-29 14:36:09 发布

sjepy

最新推荐文章于 2020-05-29 14:36:09 发布

阅读量692

点赞数

分类专栏：前尘往事

本文链接：https://blog.csdn.net/sjepy/article/details/32937745

版权

前尘往事专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. box-sizing 属性

以div为例，标准的盒模型中，div实际占用的空间(宽度)包括：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right，比我们设置的width宽，这样在使用div float 左右排版时，由于设置了边框、内外边距等导致实际宽度>100%，出现意外换行。这时可以设置box-sizing属性值为border-box，这样边框、内边距都包含到设置的width之中，只要保证设置的width不超过100%即可。(注意：外边距margin没有包含到设定的width之内)

/*设置所有控件的盒模型为border-box*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

2.tooltip

.tooltip {
	width:200px;
	position: relative;
	border:1px solid #eee;
	background-color: #eee;
	min-height: 40px;
	padding: 5px;
	word-break:break-all;
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px;  
	border-radius: 5px;
	-webkit-box-shadow: 2px 3px 5px #bbb;
	-moz-box-shadow: 2px 3px 5px #bbb;
	box-shadow: 2px 3px 5px #bbb;
}

/* 使用:after定义左侧箭头
.tooltip:after {
	position: absolute;
	top: 10px;
	left:-20px;
	border-color: transparent #eee transparent transparent ;
	border-style:dashed solid dashed  dashed;
	content: " ";
	border-width:10px;
}
*/

.tooltip .top {
	position: absolute;
	top: -20px;
	left:15px;
	border-color: transparent transparent #eee transparent ;
	border-style:dashed dashed solid dashed;
	border-width:10px;
	height: 0;
}

.tooltip .left {
	position: absolute;
	top: 15px;
	left:-20px;
	border-color: transparent #eee transparent transparent ;
	border-style:dashed solid dashed dashed;
	border-width:10px;
}

3.清除浮动

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    *zoom:1;
}

.clearfix:after{
　centent:"";//设置内容为空
　height:0;//高度为0
　line-height:0;//行高为0
　display:block;//将文本转为块级元素
　visibility:hidden;//将元素隐藏
　clear:both//清除浮动
}
.clearfix{
　　zoom:1;为了兼容IE
}

4.css等高布局

#wrap {
	overflow:hidden;
}
#left,#right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}
#left {
	float:left;
	width:50%;
	background:#f00;
 }

#right {
	float:right;
	width:50%;
	background:#0f0;
}