CSS基础（二）

1. IE 浏览器的盒模型有什么表现？

首先讲一下盒模型，在HTML里面，任何块级元素我们都可以把它看做成一个盒子。盒子由content,mapping,border以及margin组成。

我们可以网页搭建想象成一个装有不同小礼物的盒子的排列平面图。

content代表了小礼物的内容
mapping代表了小礼物和礼物盒之间的空隙
border代表的是礼物盒的厚度
margin代表的是相邻两个礼物盒之间的距离

现在有两种盒模型，分别为普遍使用的w3c标准盒模型和IE盒模型。他们的组成内容都是上述的四个模块，唯一不同的是对宽(width)高(height)的定义不同。

下面以google主页为例来讲述一下具体的区别。

标准盒模型

上述是一个标准盒模型，它的参数说明如下：
width:272px = content（蓝色区域）的宽
height:92px = content（蓝色区域）的高
padding:10px = 绿色区域
border:10px = 棕色区域
margin:10px = 粉色区域

IE盒模型和标准的区别就是，IE盒模型的宽(width)和高(height)是除了margin以外的部分，也就是说，基于以上的例子，在IE盒模型的定义里，
width=content的宽+padding+border=272+10x2+10x2=312
height=content的高+padding+border=92+10x2+10x2=132

TIPS：在代码顶部加如下的 doctype 声明，可以使页面以W3C盒子模型渲染。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

2. 让一个块级元素水平居中的方式有哪些？

块级元素水平居中

.mycss{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

ps:这里的position不能设置成absolute，它会脱离文档流从而导致这个对它没作用。

块级元素水平和垂直居中

.mycss{     
  width:宽度;   
  height:高度;   
  background-color:black;
  position:absolute/relative(有右边margin);  
  left:50%;  
  top:50%;  
  margin:-宽度/2  0  0 -高度/2 
}

.mycss{      
  background-color:black;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 200px;
  width: 300px; 
}

PS:后面对行内元素的居中做一下补充

行内元素水平居中

.div {
  text-align:center
}

行内元素垂直居中

.div {
  height:高度; 
  line-height:和上面一样的高度
}

3. display: none; 和 visibility: hidden; 都是让元素隐藏，有什么区别？

display:none是直接把元素隐藏，原本的位置也没有了。
visibility：hidden，只是看不见，但是还是留有原来的空间的。

4. 双列布局、三列布局

双列布局：侧边栏固定，主栏目自适应

主页设置如下，我们通过修改CSS样式来实现双列布局。

<div id="outer">
  <div id="sidebar" style="height:240px;">固定侧边栏区</div>
  <div id="content" style="height:340px;">主栏目自适应区</div>
</div>
<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

左侧固定区设置浮动，右侧div设置margin-left（比sidebar宽度宽）。

  .sidebar{
    width: 300px;
    height: 300px;
    background-color: pink;
    float:left;
 }
  .content{
    margin-left: 300px;
    height: 100px;
    background-color: blue;
 }
  .footer{
    background-color: red;
 }

左侧固定区采用绝对定位，右侧div设置margin-left（比sidebar宽度宽）。

   .sidebar {
     width: 300px;
     height: 300px;
     background-color: pink;
     position: absolute;
     top:0;
      left: 0;
    }
   .content {
     height: 100px;
     background-color: blue;
   }
   .footer {
     background-color: red;
   }

   .outer {
      position: relative; 
   }

把outer设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。

 .sidebar{
    width: 300px;
    height: 300px;
    background-color: pink;
    display:table-cell;
  }

 .content{
    height: 100px;
    background-color: blue;
    display:table-cell;
  }

 .footer{
     background-color: red;
  }

 .outer{
      display: table;
      width:100%;
  }

注意这种情况，侧边栏和内容栏的一个高度是保持一样的，这个高度是max（侧边栏，内容栏）。

三列布局：左右是固定宽度，中间是自适应宽度

<body>
  <div class="main">
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
</body>

使用float,使左右两边脱离文档流，中间的内容通过设计margin边界来确定位置

. main {
  width: 100%;
  height: 500px;
}
.left {
  float: left;
  width:200px;
  height: 100%;
  background: red;
}
.right {
  float: right;
  width:120px;
  height: 100%;
  background: red;
}
.middle {
  background: green;
  margin:0 120px 0 200px;
  height: 100%;
}

将左右两侧用绝对定位脱离文档流，中间的内容通过margin来实现定位

.main {
  position: relative;
  width: 100%;
  height: 500px;
}
.left {
  position: absolute;
  left:0px;
  top:0px;
  width:200px;
  height: 100%;
  background: red;
}
.right {
  position: absolute;
  right:0px;
  top:0px;
  width:200px;
  height: 100%;
  background: red;
}
.middle {
  background: green;
  margin:0 120px 0 200px;
  height: 100%;
}

flex布局

5.overflow 的 auto、hidden、scroll 值分别代表什么？

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

TIPS:若想实现文本溢出显示省略号请移步该链接。

参考链接：
[1]CSS常见布局：左侧固定，右侧自适应
[2]使用CSS实现三列布局（左右固定宽度，中间自适应)