HTML技巧

1.上下居中

1.1 行高等于高度，即height=line-height

/*1.居中方法一:模块高等于外层模块的高    设置文本
			//height=line-height
			#box h1{
				text-align: center;
				line-height: 300px;
			}*/

1.2 让明确宽高的盒子水平垂直居中于父元素

/*2.（让明确宽高的盒子水平垂直居中于父元素，父元素需要有宽高）*/
			#box h1{
				width: 150px;
				height: 50px;
				position: absolute;
				top: 0;left: 0;
				right: 0;bottom: 0;
				margin: auto;
			}

1.3 移动50%,再移动自身宽度的一半

1.4 位移加移动

.a {
  width: 500px;
  height: 500px;
  border: 1px solid #256;
  position: relative;
}


.b {
  width: 100px;
  height: 100px;
  background-color: darkkhaki;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.页面配置

浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。

html,body{
    height:100%;
}

3.透明度

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）比如，我们写透明的黑色部分都是用opcity（0.5），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。看了这个应该应该清楚rgba和opacity的区别了吧，至于什么场景该用什么，还需要看情况。希望这个简单的教程可以帮助到你！

4.margin和padding

margin在大的div中嵌套两个小div时，margin一般与padding一块使用

a标签自带行高，如果想要取消行高，将a标签转为块元素，之后，将高度和行高设置一致

绝对定位margin不生效

5.弹性布局

弹性布局中，width多使用百分比，当设置响应式页面的时候尤为明显

6.多行文本不换行

/单行文本实现不换行，显示省略号/
1.设置宽度
2.设置不换行 white-space:nowrap;
3.设置溢出隐藏，overflow:hidden;
4.设置文本溢出显示省略号 text-overflow:ellipsis

7.解决横向排列的元素之间的空格

  • 将标签代码写到同一行
  • 添加浮动
  • 给元素添加一个父元素，设置font-size:0;然后单独设置该元素的字体大小

8.拓展

  1. 图片间隙bug的解决方法：为img设置display:block;
  2. 子元素的margin-top传递到父元素上时：float:left overflow:hidden
  3. 清除浮动的方法：父元素加inline-block; 父元素加position:absolute
  4. 以下可以实现让整个当前元素在页面中不显示的css声明有：opacity:0; transform:scale(0); visibility:hidden;