今天面试题 记录

今天主要问的都是一些基础的知识，自己心里知道大概是那样，但是就是答不好，还是自己没研究深刻。

 如何实现 左侧 200px  右侧200px 中间响应式布局？？

display:box

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             *{
 9                 margin: 0;
10                 padding: 0;
11             }
12             #content {
13                 display: -webkit-box;
14                 display: -moz-box;
15                 width: 100%;
16                 height: 200px;
17             }
18             
19             #left {
20                 width: 200px;
21                 height: 200px;
22                 background-color: saddlebrown;                
23             }
24             #middle{
25                 -webkit-box-flex: 1;
26                 -moz-box-flex: 1;
27                 background-color: blue;
28                 word-wrap: break-word;
29             }
30                 
31             #right {
32                 width: 200px;
33                 height: 200px;
34                 background-color: saddlebrown;
35             
36             }
37         </style>
38     </head>
39 
40     <body>
41         <div id="content">
42             <div id="left">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </div>
43             <div id="middle">PasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadP为让对手阿萨德刚回家后</div>
44             <div id="right">fggfgf</div>
45         </div>
46     </body>
47 
48 </html>
View Code

 display:flex

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    background-color: lightgrey;
    justify-content: flex-start;
}

.flex-item1 {
    background-color: cornflowerblue;
    width: 100px;
    margin: 20px;
    
}

.flex-item2 {
    background-color: cornflowerblue;
    flex: 1;
    margin: 20px;
}

.flex-item3 {
    background-color: cornflowerblue;
    width: 100px;
    margin: 20px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item1">flex item 1</div>
  <div class="flex-item2">flex item 2</div>
  <div class="flex-item3">flex item 3</div>  
</div>

</body>
</html>
View Code

 

 

标准盒模型和ie盒模型

 

3:border-box和content-box的区别

1.盒子模型尺寸基准有两种，分别是content-box和border-box  （默认是content-box）

2.理论上说，content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。

3.新建两个不同背景填充的div,

(con1设置为box-sizing：border-box，con为默认的content-box)
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        .con{width: 100px; height: 100px;background-color:royalblue;  
            border:1px solid red; padding: 10px;}  
        .con1{box-sizing: border-box;}  
    </style>  
</head>  
<body>  
    <div class="con"></div>  
    <div class="con con1"></div>  
</body>

效果图如下：

 

其他的暂时想不起来了。。。

 

posted @ 2017-01-18 12:46  raocheng  阅读(137)  评论(0)  编辑  收藏  举报