布置

1、通过怪异盒子+padding布置div位置:

.header{
	width:100%;
	height:44px;
	padding:7px 50px 7px 8px;
	box-sizing:border-box;
}

2、设置标签内文字的位置

通过line-height来设置;因为文字的位置是line-height的一半,所以设置
line-height,即可设置文字位置

3、第二行元素在第一行元素高出的地方补齐排列

不采用方法:采用display:inline-block;给行内元素设置宽高,第二行元素不会在第一行多余
的地方补齐
(1)采用float浮动可以

4、文字其他位置添加如照片等元素可以使用::after等伪类对象,再通过定位
布置其位置

.header .login{
	width:44px;
	height:44px;
	line-height:72px;
}
.header .login::before{
	content:'';
	position:absolute;
	left:50%;
	width:24px;
	height:26px;
	background-image:url('../img/ico_home.png');
}

5、将图片等和文字分排,并居中显示

1、先设置图片和文字在容器中居中
2、将文字设置为块级元素,即可分行
	display:block;

6、不设置宽高,让多个元素同行占据相同大小显示

1、利用盒子模型,父标签display:flex
2、子标签,flex=1

7、div以外的元素使用margin居中

块级元素可直接使用,行内元素需要先变成块级元素再使用margin:0 auto;

8、任意元素内添加滚动条

设置该元素高度,设置overflow:auto;

9、元素任意方向撑满间距,且使得其之后的元素在末尾

margin-right/top/bottom/left:auto;

10、利用状态选择器和label标签实现元素的显示隐藏

当使用多选框等,点击选中后,才加载后面元素的样式
使用lable的for和input的id绑定后,即可通过lable来控制显示隐藏,通过同级选择器来自定义多选框是否显示

input:checked{
	&+子元素{
		样式
	}
}

11、图片上传的默认样式,覆盖在其他元素身上,且自身不显示

通过定位定位到其他元素身上,设置大小,再设置透明度,即可不阻挡自身点击效果和其他元素的显示

12、设置height:100%超出屏幕而不是填充剩余高度

采用弹性布局设置flex

13、使用line-height=height,居中不准确

添加font-size:0px;

14、定位隐藏滚动条,改变方向即可

.jf-tabs-label-container {
  overflow-y: auto;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  bottom: -17;
}