CSS基础（二）

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
如有必要，内容会被裁剪以适合填充框。浏览器始终显示滚动条，无论是否实际剪切了任何内容，都可以防止滚动条在内容更改时出现或消失。打印机可能仍会打印溢出的内容。