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实现三列布局（左右固定宽度，中间自适应)
网友评论