1. 浏览器的盒模型有什么表现？
- 宽度（width）
IE浏览器中为内容元素加内边距和边框的总宽度；W3C中为内容元素的宽度。 - 高度（height）
同上。 - 内边距（padding）
内容到边框的距离。 - 外边距（margin）
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 - 边框（border）
- box-sizing
可以改变盒子的计算方式。
-
W3C中的表现形式：
1.png -
IE中的表现形式
2.png
2. 让一个块级元素水平居中的方式有哪些？
margin
通过设置外边距的大小实现居中。transform
通过设置平移的距离实现居中。position
相对定位：relative
绝对定位：absolute
固定定位：fixed
粘性定位：sticky
设置了定位方式之后，再通过 top / left / bottom / right 来实现水平居中。
- display: flex
在父容器中添加
display: flex;
再通过下面属性进行组合设置:
flex-direction:主轴方向；
flex-wrap：换行方式
flex-flow：上面两个的简写
justify-content：主轴对齐方式；
align-items：交叉轴对齐方式；
align-content：对根轴线对齐方式；
3. display: none; 和 visibility: hidden; 都是让元素隐藏，有什么区别？
display: none;
会将元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。visibility: hidden;
从视觉上隐藏这个元素相当于元素变成透明，其他元素的布局不改变，但仍可以被屏幕阅读器等辅助技术解析。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。
4. 请用多种方式实现如下布局，不必填充内容，用背景颜色区分就行：
*双列布局：侧边栏固定，主栏目自适应 —— 比如体验课中的首页；
双列布局
position:
<html>
<head>
<style>
.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100px;
background: red;
}
.right {
position: absolute;
top: 0;
left: 100px;
height: 100%;
width: calc(100% - 100px);
background: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
flex:
<html>
<head>
<style>
body {
display: flex;
flex-direction: row;
width: 100%;
}
.left {
width: 100px;
background: red;
}
.right {
background: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
*三列布局：左右是固定宽度，中间是自适应宽度；
三列布局
position:
<html>
<head>
<style>
.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100px;
background: red;
}
.mid {
position: absolute;
top: 0;
left: 100px;
height: 100%;
width: calc(100% - 200px);
background: blue;
}
.right {
position: absolute;
top: 0;
left: calc(100% - 100px);
height: 100%;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</body>
</html>
flex:
<html>
<head>
<style>
body {
display: flex;
flex-direction: row;
width: 100%;
}
.left {
width: 100px;
background: red;
}
.mid {
background: blue;
flex: 1;
}
.right {
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</body>
</html>
5. overflow 的 auto、hidden、scroll 值分别代表什么
- auto
取决于浏览器，如果内容合适则不会被剪切，但仍会建立新的块格式上下文；如果内容溢出，桌面浏览器会提供滚动条。 - hidden
如有必要，内容会被裁剪以适合填充框。没有提供滚动条，也不允许任何允许用户滚动（例如通过拖动或使用滚轮）。 - scroll
如有必要，内容会被裁剪以适合填充框。浏览器始终显示滚动条，无论是否实际剪切了任何内容，都可以防止滚动条在内容更改时出现或消失。打印机可能仍会打印溢出的内容。
