布置

落日映苍穹つ 2021-07-24 12:23 457阅读 0赞

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

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

![在这里插入图片描述][20200116150038309.png]

**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;
    }

[20200116150038309.png]: /images/20210724/d31fd886189245b3bd3bf783a1d656db.png