css解决方案经验杂记

时间:2023-03-09 19:52:18
css解决方案经验杂记

文本垂直居中

单行文本:line-height的值等于height;

多行文本:padding上下值一致即可;

还可以使用position:absolute进行绝对定位,如果是相对父级元素,则需要设置position:relative。

top:50%;
left:50%;
margin-left:元素宽度/2;
margin-top:元素高度/2;

水平居中-行内元素

.父元素{text-align: center;}

水平居中-定宽块状元素

.块状元素{margin:0 auto;}

水平居中-不定宽块状元素

方法一:元素外面添加<table>标签(包括<tr><td>),对<table>设置"margin:0 auto;"

方法二:块状元素设置成"display:inline"或者"display:inline-block",再对其父元素设置"text-align: center;"

方法三

.父元素{
  float: left;
  position: relative;
  left: 50%;
}
.子元素{
  position: relative;
  left: -50%;
}

垂直居中-父元素高度确定的单行文本

line-hight 和 hight 高度一致

垂直居中-父元素高度确定的多行文本

方法一:元素外面添加<table>标签,同时设置"vercial-align:middle;"

方法二:块状元素设置"display: table-cell",同时设置"varcial-align: middle;" 兼容性:IE8+

解决行内元素间隙bug

父元素使用 font-size:0;

清除浮动的三种方法

1.添加新元素

.clear{clear: both; height:; line-height:; font-size:}

2.父元素添加overflow

.over-flow{overflow: auto; zoom:; /* zoom:; 是在处理兼容性问题 */}

3.父元素添加伪类:after

.outer :after {clear: both; content:'.'; display: block; width:; height:; visibility: hidden;}