前端面试题

一栏固定宽度，一栏自适应。

方法一 左侧 float:left，右侧 margin-left。

1. .left { float: left; width: 200px; }
2. .right { margin-left: ; }

方法二 左侧 float:left，右侧overflow:hidden。

1. .left { float: left; width: 200px; }
2. .right { overflow: hidden; }

方法三 position

1. .wrap { position : relative; }
2. .left { width: 200px; }
3. .right { position: absolute; top: 0; left: 200px; }

方法四 弹性布局 flex

1. .wrap { display: flex; }
2. .left { width: 200px; }
3. .right { flex: 1; }

使中间的盒子水平垂直居中

方法1 父元素设置 flex

display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 */

方法2 网格布局 Grid 是

display: grid;
place-items: center; /* 水平和垂直居中 */

方法3 position + transform

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

块 行内 行内块

块 block

1.独占一行
2.高度，宽度，行高，外边距（margin）以及内边距（padding）都可以控制；
3.元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
4.多个块状元素标签写在一起，默认排列方式为从上至下

行内元素 inline

1.不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
2.高宽、行高无效，对外边距（margin）和内边距（padding）仅设置左右方向有效，上下无效；
3.设置行高有效，等同于给父级元素设置行高；
4.元素的宽度就是它包含的文字或图片的宽度，不可改变；
5.行内元素中不能放块级元素，a 链接里面不能再放链接；

行内块元素 inline-block

button input textarea img
1.高度、行高、外边距以及内边距都可以控制；
2.默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；