HTML与CSS常见问题归纳

1.注意事项

1.1 布局相关

• 块级元素p是一个文本级容器，也就是说p标签不能够包裹块级元素，只能包裹行内、行内块级元素

• 块级元素（无固定高度）直接包裹行内块元素会被撑大几个px，对行内块元素使用vertical-align:middle; 可以解决

• 由于垂直对齐方式的原因，每次使用行内块元素时，建议都加上vertical-align:middle;

• 行内块元素会存在间隙问题

• 浮动与绝对定位都会使元素脱标,脱标要注意父元素的高度是否影响后面布局

• 文字内容具有默认行高，实现精准布局时可用 line-height:1; 解决

• 使用padding时，会扩大盒子，常使用 box-sizing:border-box; 解决

2. 水平居中与垂直居中

2.1 水平居中

• 行内元素与行内块元素：

  • 父元素：text-align:center;
  • 行高：line-height

• 块级元素：margin:0 auto:(对于有固定宽度的盒子，且宽度小于或等于父级盒子)

• 对于所有元素都生效：

  • 子绝父相 ：absolute(left: 50%) + transform:translateX( -50% );
  • flex布局：justify-content:center;

2.2 垂直居中

• 行内元素与行内块元素：行高：line-height

• 对于所有元素都生效：

  • 子绝父相 ：absolute(top: 50%) + transform:translateY( -50% );
  • flex布局：align-items:center;