【4858美高梅】面试准备之CSS,基础知识1

By admin in 4858美高梅 on 2019年3月30日

前言:本文介绍各种普遍的三列布局,重如果两侧定宽,中间自适应,别的情况大致。

页面布局

4858美高梅 1

CSS是前者基础技术之一,而CSS最重庆大学的效率正是网站布局。
CSS布局情势有为数不少,从远古时期的table(表格)布局–>float(浮动)布局–>position(定位)布局–>flex(弹性)布局–>grid(网格)布局(还未正式生产),下边大家简单谈一谈种种布局的用法及其利弊。
table布局就是将网站作为叁个表单来做,那里不做展开,因为前日基本不那样用了。

页面布局

题:借使中度已知,请写出三栏布局,个中左栏右栏宽各位300px,中间自适应。
答: 7种方法
1.浮动 2.纯属定位 3.flex 4.table-cell 5.grid(网格布局) 6.圣杯布局
7.双飞翼布局。

  • 国有样式

      *{
          margin:0;padding: 0;
      }
      .container{
          margin-top: 20px;
      }
      article > div {
          min-height: 100px;
      }
      .left,.right{
          background: red;
          width: 300px;
      }
      .center{
          background: #ccc;
      }
    

 

标题1:三栏布局,中间自适应,左右两栏固定宽度300px

写出3种方案终于及格
付出5种方案,不管选拔哪一种方案,最后效果皆以:

4858美高梅 2

首先写出html结构:

    <div class="wrapper">
        <div class="left">zuo</div>
        <div class="center">左右两列固定,中间自适应</div>
        <div class="right">you</div>
    </div>
1.float

float:浮动。float刚开首并不是为着用来网页布局,而是用来缓解图像和文字消息中图纸与公事龃龉的题材的。
如下图:

4858美高梅 3

image.png

那种大规模的图文效果,没有float从前是很难达到的。有了float之后只供给加一个float:left,轻松解决。

<style>
    .content{
        margin: 100px auto;
        width: 300px;
    }
    .box{
        float: left;
    }
</style>
<body>
    <div class="content">
        <div class="box"><img src="./imgs/authority-employee.png" alt="4858美高梅 4"></div>
        <div class="text">CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表:外部样式表、内部样式表和内联样式。</div>
    </div>
</body>

‘咦,倘诺float能够处理图像和文字的题材,那用来布局不也得以吗?’,后来有人用float试着用于网页布局,还当真能够。
网页中最广泛的布局如下:

4858美高梅 5

网页常见布局.png

用float做

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
   }
   .nav li{
       float: left;
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
       float: left;
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       float: left;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>

<body>
    <!--头部start-->
    <div class="header">
        <!--导航start-->
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        <!--导航end-->
    </div>
    <!--头部end-->

    <!--主体start-->
    <div class="main">
        <!--文章start-->
        <div class="article"></div>
        <!--文章end-->

        <!--侧边栏start-->
        <div class="aside"></div>
        <!--侧边栏end-->

    </div>
    <!--主体end-->

    <!--底部start-->
    <div class="footer"></div>
    <!--底部end-->
</body>

比table布局要便于广大,可是float随之而来的带动了
“浮动中度塌陷”的标题:
倘使生成成分的父成分没有设定中度,当其子成分浮动后,父成分就因为里面没有子成分撑起从而中度变为0;
引申:网页元素一般分为
普通流,浮动流,定位流。在那之中普通流和浮动流在八个层级上,定位流>浮动流>普通流。
尔后为了消除这几个题材搞出来一文山会海清女士除“浮动中度塌陷”的策略措施,卓殊艰难。

浮动
<!-- 1.浮动三栏布局 -->
<section class="container float">
    <style>
        .float .left{
            width: 300px;
            float: left;
        }
        .float .right{
            width: 300px;
            float: right;
        }
    </style>
    <article>
        <div class="left">浮动解决方案</div>
        <div class="right">浮动解决方案</div>
        <div class="center">浮动解决方案</div>            
    </article>
</section>

  <!-- 1.浮动两栏布局 -->
<section class="container float">
    <style>
        .float .left{
            width:100px;
            float: left;/*左侧浮动覆盖右侧*/
            background: #ccc;
        }
        .float .right{
            overflow: auto;/*形成BFC,形成独立区域*/
            background: pink;
        }
    </style>
    <article>
        <div class="left">浮动两栏布局</div>
        <div class="right">浮动两栏布局</div>
        <div class="clear"></div>
    </article>
</section>

方式一:float

方案一:float

亮点:兄弟成分和父成分的变型影响处理的好的话,就是相比较简单,包容性也相比较好。
缺点:浮动是退出文书档案流的,常见的标题是扫除浮动。清除倒霉会带来很多难点,比如中度塌陷等。

     .wrapper {
        overflow: hidden;
    }

    .left {
        float: left;

        width: 300px;
        background: pink;
    }

    .right {
        float: right;

        width: 300px;
        background: pink;
    }

    .center {
        margin: 0 300px;

        background: gray;
    }

上述css样式设置实现后,效果是那样子的:

4858美高梅 6

为啥会现出这种情况吧???那是因为
html结构要改成这么:

    <div class="wrapper">
        <div class="left">zuo</div>        
        <div class="right">you</div>
        <div class="center">左右两列固定,中间自适应</div>
    </div>

延伸:你精晓什么样清除浮动的方案?种种方案的有怎样优缺点?

2.position

position:定位;顾名思义,便是规定地点。position同样可以用做网页布局。

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        /*父元素用相对定位*/
        position: relative;
   }
   .nav li{
       /*子元素用绝对定位*/
       position: absolute;
       width: 100px;
       height: 100px;
       background-color: yellowgreen;
   }
   .nav li:nth-child(1){
       left: 20px;
   }
   .nav li:nth-child(2){
       left: 140px;
   }
   .nav li:nth-child(3){
       left: 260px;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       position: relative;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
       position: absolute;
       top: 0;
       right: 0;
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>

<body>
    <!--头部start-->
    <div class="header">
        <!--导航start-->
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        <!--导航end-->
    </div>
    <!--头部end-->

    <!--主体start-->
    <div class="main">
        <!--文章start-->
        <div class="article"></div>
        <!--文章end-->

        <!--侧边栏start-->
        <div class="aside"></div>
        <!--侧边栏end-->

    </div>
    <!--主体end-->

    <!--底部start-->
    <div class="footer"></div>
    <!--底部end-->
</body>

同一的效益

4858美高梅 7

image.png

可是position供给总计每三个因素的职位,而且这几个地点是定死的,略显繁琐和笨重。实际上position笔者日常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响别的因素。
关键点:子绝父相。须要稳定的成分用absolute相对定位,其父成分用
relative相对定位。还有fixed固定定位,他是以html为父成分的固化。

相对定位
<!-- 2.绝对定位三栏布局 -->
<section class="container absolute">
    <style>
        .absolute-container .left{
            position: absolute;
            left: 0;
            width: 300px;
        }
        .absolute-container .right{
            position: absolute;
            right: 0;
            width: 300px;
        }
        .absolute-container .center{
            position: absolute;
            left: 300px;
            right: 300px;
        }
    </style>
    <article class="absolute-container">            
        <div class="left">absolute布局</div>
        <div class="center">
            absolute布局
        </div>  
        <div class="right">absolute布局</div>                 
    </article>
</section>

<!-- 2.绝对两栏定位布局 -->
<section class="container abs">
    <style>
        .abs .left{
            width:100px;    
            position: absolute;
            left: 0;    
            background: #ccc;
        }
        .abs .right{
            position: absolute;
            right: 0;
            left: 100px;
            background: pink;
        }
    </style>
    <article>
        <div class="left">绝对定位两栏布局</div>
        <div class="right">绝对定位两栏布局</div>
    </article>
</section>

HTML代码:

方案二:absolute

反正两栏absolute,中间栏设置margin值。
可取:思路简单,不便于出难题
【4858美高梅】面试准备之CSS,基础知识1。缺陷:相对定位是脱离文书档案流的,意味着全数的子成分也非得剥离文书档案流;代码较多,可利用性差。

      .wrapper {
        position:relative;
    }
    .left {
        position:absolute;
        top:0;
        left:0;

        width: 300px;
        background: pink;
    }

    .right {
        position:absolute;
        top:0;
        right:0;

        width: 300px;
        background: pink;
    }
    .center {      
        margin:0 300px;

        background: gray;
    }
3.flex(推荐)

flex:弹性;弹性布局很好的消除了float和position的标题,相当好用。
采纳方法:
在父元素使用 display:flex;鲜明弹性成效的限量。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等);垂直方向布局;

<style>
    body,ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   .header{
       height: 100px;
       background-color: hotpink;
   }
   .nav{
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: flex;
   }
   .nav li{
       /*子元素用绝对定位*/
       width: 100px;
       height: 100px;
       margin-left: 20px;
       background-color: yellowgreen;
   }
   .main{
       width: 1000px;
       height: 500px;
       margin: 0 auto;
       display: flex;
   }
   .article{
       width: 800px;
       height: 500px;
       background-color:yellow; 
   }
   .aside{
       width: 200px;
       height: 500px;
       background-color:skyblue; 
   }
   .footer{
       height: 100px;
       background-color: greenyellow;
   }
</style>

<body>
    <!--头部start-->
    <div class="header">
        <!--导航start-->
        <ul class="nav">
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
        </ul>
        <!--导航end-->
    </div>
    <!--头部end-->

    <!--主体start-->
    <div class="main">
        <!--文章start-->
        <div class="article"></div>
        <!--文章end-->

        <!--侧边栏start-->
        <div class="aside"></div>
        <!--侧边栏end-->

    </div>
    <!--主体end-->

    <!--底部start-->
    <div class="footer"></div>
    <!--底部end-->
</body>

唯独flex不包容IE8及以下的浏览器。

flex布局
<!-- 3.flex三栏布局 -->
<section class="container flex">
    <style>
        .flex-container{
            display: flex;
        }
        .flex-container .left,.flex-container .right{
            width: 300px;               
        }
        .flex-container .center{
            flex: 1;
        }
    </style>
    <article class="flex-container">            
        <div class="left">flex布局</div>
        <div class="center">
            flex布局
        </div>  
        <div class="right">flex布局</div>                 
    </article>
</section>

  <!-- 3.flex两栏布局 -->
<section class="container flex">
    <style>
        .flexbox{
            display: flex;
        }
        .flex .left{
            flex: 0 0 100px;
            background: #ccc;
        }
        .flex .right{
            flex: 1;
            background: pink;
        }
    </style>
    <article class="flexbox">
        <div class="left">flex两栏布局</div>
        <div class="right">flex两栏布局</div>
    </article>
</section>
<div class="layout-float">
    <div class="left">左边</div>
    <div class="right">右边</div>
  <div class="center">中间</div>

</div>

方案三:flex布局

优点:相对完善的方案。
缺点:不包容IE8及以下浏览器,而且三栏同时抓好。

    .wrapper {
        display:flex;
    }
    .left,.right {
        flex:0 0 300px;

        width: 300px;
        background: pink;
    }
    .center {      
        flex:1;

        background: gray;
    }
4.grid(未正式推出)

多数情状下flex布局已经能满足急需,但是flex只好用作一维布局,也等于说,flex一回只可以功能于一条线。假诺想要进行二维布局,必须翻转坐标叁遍弹性,那样会显得不够优雅,那时候grid(网格)布局就发展兴起了。
grid布局用法和flex相似,可是效果于二维布局。
先在父成分使用 display:grid;显著网格效率范围;
然后
grid-template-columns: 40px 50px auto 50px 40px;(行)
grid-template-rows: 25% 100px auto;(列)
等等属性,那里只简单介绍,我们驾驭有其一东西就行。

在切实工作功效用,以flex为主,position协助已经丰硕应对具有毛病。

table-cell布局
<!--4. table三栏布局 -->
<section class="container table">
    <style>
        .table-container{
            display: table;
            height: 100px;
            width: 100%;
        }
        .table-container > div{
            display: table-cell;
        }
    </style>
    <article class="table-container">           
        <div class="left">table布局</div>
        <div class="center">
            table布局
        </div>  
        <div class="right">table布局</div>                    
    </article>
</section>  

    <!--4. table两栏布局 -->
<section class="container table">
    <style>
        .tablebox{
            display: table;
            width: 100%;
            height: 100%;
        }
        .table .left{
            display: table-cell;
            width: 100px;
            background: #ccc;
        }
        .table .right{
            display: table-cell;
            background: pink;
        }
    </style>
    <article class="tablebox">
        <div class="left">table两栏布局</div>
        <div class="right">table两栏布局</div>
    </article>
</section>

注:center要放最终。center那么些元素是块级成分,占据一行,假使center放中间,right成分会在下一行向右浮动

方案四:table布局

亮点:包容性好,适用于广大情状。在flex布局不协作的时候,能够选取table布局。
缺点:处于一行的单元格table-cell会同时抓牢,有时大家并不想要那种功用。

    .wrapper {
        display:table;
        width:100%;   //撑满整个屏幕的宽
    }
    .wrapper >div{
       display:table-cell;
    }
     .left,.right {
        width: 300px;
        background: pink;
    }
    .center {
        background: gray;
    }
grid布局
<!-- 5.grid三栏布局 -->
<section class="container grid">
    <style>
        .grid-container{
            display: grid;
            width: 100%;
            grid-template-rows:100px;
            grid-template-columns:300px auto 300px;             
        }
    </style>
    <article class="grid-container">            
        <div class="left">grid布局</div>
        <div class="center">
            grid布局
        </div>  
        <div class="right">grid布局</div>                 
    </article>
</section>

  <!-- 5.grid两栏布局 -->
<section class="container grid">
    <style>
        .gridbox{
            display: grid;
            grid-template-rows: 100px;/*高*/
            grid-template-columns: 100px auto;
        }
    </style>
    <article class="gridbox">
        <div class="left">grid两栏布局</div>
        <div class="right">grid两栏布局</div>
    </article>
</section>

CSS代码:

方案五:grid布局

可取:新的技能,代码量简化
缺点:浏览器对其援助很弱,而且三栏同时抓牢

步骤:

  • 安装display的值为grid,证明容器是3个网格容器
  • 设置网格行和列,我们能够透过grid-template-columns和grid-template-rows
    教程—>>>CSS
    Grid布局:快捷入门

    .wrapper {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }
     .left, .right {
        background: pink;
    }
    .center {
        background: gray;
    }
圣杯布局
<!-- 6.圣杯布局 -->
<section class="container grail">
    <style type="text/css">
        .f-left{
            float: left;
        }
        .grail-container{
            padding: 0 300px 0 300px;
            overflow: hidden;
        }
        .grail .left,.grail .right{
            width: 300px;
            position: relative;
        } 
        .grail .left{
            margin-left: -100%;
            left: -300px;
        }
        .grail .right{
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
        .grail .center{
            width: 100%;
        }
    </style>
    <article class="grail-container">
        <div class="center f-left">圣杯解决方案</div> 
        <div class="left f-left">圣杯解决方案</div>
        <div class="right f-left">圣杯解决方案</div>                  
    </article>
</section>
<style>
    .left {
        float: left;
        width: 300px;
        background-color: blue;
    }
    .right {
        float: right;
        width: 300px;
        background-color: blue;
    }
     .center {
        background-color: red;
    }
</style>            

延长提问

答完题后,面试官会延伸提问
1)5中方案各自的优缺点
2)假设考虑纵向,哪个种类方案就不再适用

  • 当高度未知时
    动用flex布局、table布局和grid布局,当我们中间栏的可观随着故事情节充实时,别的两栏也同时坚实。效果:
![](https://upload-images.jianshu.io/upload_images/8059334-e6ce25e9e32e2280.png)
  • 当低度已知时
    flex布局、table布局照旧会同时增强,而grid布局中间的情节会溢出来,效果:
![](https://upload-images.jianshu.io/upload_images/8059334-1bff532bf1d039a2.png)

3)5种方案的包容性,哪一类是最优的方案?
显然是flex布局、table布局。

双飞翼布局
<!-- 7.双飞翼布局 -->
<section class="container wind">
    <style type="text/css">
        .f-left{
            float: left;
        }
        .wind-container{
            /*padding: 0 300px 0 300px;*/
            overflow: hidden;
        }
        .wind .left,.wind .right{
            width: 300px;
        } 
        .wind .left{
            margin-left: -100%;             
        }
        .wind .right{
            margin-left: -300px;

        }
        .wind .center{
            width: 100%;
        }
        .inner{
            margin: 0 300px 0;
        }
    </style>
    <article class="wind-container">
        <div class="center f-left">
            <div class="inner">双飞翼布局</div>  
        </div>  
        <div class="left f-left">双飞翼布局</div>
        <div class="right f-left">双飞翼布局</div>                   
    </article>
</section>
  • 优缺点

    • 变更布局
      1.center只可以放在最下边,而文书档案的渲染形式是由上而下的,常常center中的内容最重要,应该放在最下面,所以有了圣杯布局和双飞翼布局。
      2.扭转影响周围的要素,且脱离文书档案流,处理好转变成分和广泛成分的涉嫌。
      3.不补助不定高列表的变更。
      4.包容性好

    • 相对定位
      1.脱离文书档案流,子成分也脱离文书档案流,可适用性较差
      2.快

    • flex
      css3属性,移动端多用

    • table
      1.里边一个单元格中度超越,两侧的也会增高,有时候不需求
      2.势须要等到页面加载成功后才能渲染
      3.适用以表格

    • grid
      代码量少,新技巧

    • 圣杯布局
      宽窄太小,会变形

    • 双飞翼布局
      IE6+兼容性好

  • 去掉中度,flex 和 table 可以用

语义化,不要通篇div

页面布局理解要深远

css基础要实在

寻思灵活且主动升高(新技巧要关怀)

代码书写规范

方式二:table布局,非HTML中<table>标签

标题2:上下两栏固定,中间滚动

上下中度稳定,中间自适应:APP用的很是多,上面是header,中间是内容,随着剧情的扩张会并发滚动条,上边是导航,比如美团、天猫商城、京东。
先来看一下功效:

4858美高梅 8

先是写出html结构:

    <div class="wrapper">
        <div class="header">header</div>
        <div class="content">
            上下两栏固定,中间滚动<br/>
            上下两栏固定,中间滚动<br/>
            <!-- 此处省略n个-->
        </div>
        <div class="footer">footer</div>
    </div>

什么让让三个不定宽高的DIV,垂直水平居中?

  • css3 transform方法

公共样式
<style>
    .uncertainty-box{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid red;      
    }
</style>

<section class="uncertainty-box css3-translate">
    <style>
        .css3-translate{
            position: relative;
        }
        .css3-translate .uncertainty{
            transform: translate(-50%,-50%);
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;

        }
    </style>
    <article class="uncertainty">不确定宽高的div</article>
</section>
  • flex方法

<section class="uncertainty-box flex">
    <style>
        .flex{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <article class="uncertainty">不确定宽高的div</article>
</section>
  • table-cell方法

<section class="uncertainty-box table-cell">
    <style>
        .table-cell{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .table-cell .tabbox{
            vertical-align: middle;

        }
    </style>
    <article class="uncertainty">table-cell不确定宽高的div</article>
</section>

HTML代码:

方案一:使用position

    .wrapper {
        position:relative;
        height: 100%;
    }
    .header {
        height: 100px;
        background: pink;
    }
    .content {
        position:absolute;
        top:100px;
        bottom:25px;
        overflow: auto;

        width:100%;
        background: green;
    }
    .footer {
        position:fixed;
        left:0;
        bottom:0;

        width:100%;
        height: 25px;
        background: grey;
    }

此地须求注解的是:凡是给元素position为absolute/fixed和float后,元素脱离文书档案流后会导致不恐怕测算本身的宽窄和高度,display属性会隐式的成为inline-block,所以需求设置width。注意一点的是,position:relative并不可见转移display的体系。
设若不帮忙 position:fixed ,能够用position:absolute;来顶替。

<div class="layout-table">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

方案二:flex布局

    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header {
        height: 100px;

        background: pink;
    }
    .content {
        flex: 1;
        overflow: auto;//滚动条

        background: green;
    }
    .footer {
        height: 25px;

        background: grey;
    }

CSS代码:

方案三:grid布局

    .wrapper {
        display:grid;
        grid-template-rows: 100px auto 25px; 
        height: 100%;
    }
    .header {
        background: pink;
    }
    .content {
        overflow: auto;        
        background: green;
    }
    .footer {        
        background: grey;
    }
<style>
    .layout-table{
        width: 100%;
        display: table;
        height: 100px;
    }
    .layout-table div {
        display: table-cell;
    }
    .left {
        width: 300px;
        background-color: blue;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .center {
        background-color: blue;
    }
</style>    

方案四:calc()函数

您认识calc()函数吗?那货其实正是3个乘除长度值的。

    .wrapper {
        height: 100%;
    }

    .header {
        height: 100px;
        background: pink;
    }

    .content {
        height: calc(100% - 100px - 25px);
        overflow: auto;
        background: green;
    }

    .footer {
        height: 25px;
        background: grey;
    }

 

CSS盒模型:谈谈您对盒模型的认识

4858美高梅 9

方式三:flex布局

考试场点1:基本概念:标准盒模型+IE盒模型

概念:在CSS中,文书档案中的各样HTML元素能够被作为一个盒子,这一个模型描述了一个因素所占据的空中。它包含:content(内容)、padding(填充,内容到边框的距离)、border(边框)、margin(外边距)多少个部分。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型

box-sizing属性的效益
在IE8及以下的浏览器中只匡助IE盒模型,在IE8+及其它主流浏览器中,通过CSS3新增的box-sizing属性能够安装浏览器的盒模型。box-sizing属性的暗中认可值是content-box,即W3C标准盒模型;而将box-sizing值设置为border-box时,则会转移为IE盒模型。使用box-sizing属性能够统一IE和非IE浏览器之间的差别。

4858美高梅 10

4858美高梅 11

4858美高梅 12

HTML代码:

考试场点2:标准盒模型和IE盒模型的差别

计算width和height的不同:

  • 标准模型的width和height,指的是content的大幅度和惊人,不带有padding、border、margin
  • IE模型的width和height,指的是content+padding+border的增进率和惊人
<div class="layout-flexbox">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

考试场点3:CSS怎么着设置那二种模型?

3个要素默许的模型是什么?怎么样设置为另一种?
CSS3的一个box-sizing属性:
语法:box-sizing:content-box | border-box | inherit:
content-box是明媒正娶模型,浏览器私下认可的模子。
border-box是IE模型。

 

考试场点4:JS如何设置获取盒模型对应的宽和高

  • 方法一:dom节点.style.width/height
    获取这些dom节点,然后依据它的style属性来获得,那种艺术有早晚的局限性:
    只可以得到CSS样式是内联式的,<style>嵌入式和由此link引入的外联式均不能够赢获得的

  • 方法二:dom节点.currentStyle.width/height
    不管CSS样式是三种中的哪个种类,得到的是渲染未来的、即时的width/height,结果相对可信赖。
    缺点:只有IE支持
    为了同盟其余浏览器,能够运用window.getComputedStyle(dom节点).currentStyle.width/height

  • 方法三:dom节点.getBoundingClientRect().width/height
    获得的是渲染现在的、即时的width/height,
    适用于:依照视窗viewport的左上角,总括成分的断然地方,getBoundingClientRect()获得的是多少个要素top、left、width、height

CSS代码:

考试场点5:根据实例题,解释盒模型如何是边距重叠

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper{
        overflow: hidden;
        background:green;
    }
    .child{
        margin-top: 10px;
        height:100px;
        background:pink;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="child"></div>
    </div>
</body>

</html>

4858美高梅 13

父成分中度为100px,加上overflow:hidden后,中度成为110px,效果:

4858美高梅 14

这是干吗捏???
给父成分添加overflow:hidden,相当于创设了多少个BFC

<style>
    .layout-flexbox{
        display: flex;
    }

    .left {
        width: 300px;
        background-color: blue;
    }

    .center {
        flex: 1;
        background-color: green;
    }

    .right {
        width: 300px;
        background-color: blue;
    }
</style>

考试场点6:BFC(边距重叠消除方案)

4858美高梅, 

BFC的基本概念:块级成分格式化上下文

方式四:grid布局

BFC的法则(渲染规则)

1)BFC成分的垂直方向上会暴发边距重叠
2)BFC成分的区域不会与变化成分的box重叠
3)BFC成分在页面上是四个独自的器皿,BFC里面包车型大巴要素与外界的成分互不影响
4)总括BFC高度的时候,浮动成分也会到场总计

  • 如何去创制叁个BFC
    1)overflow(不是暗许值visible),hidden/auto都得以
    2)创制float(值不是私下认可值none)
    3)成立position(值不是暗中同意值为static)
    4)display属性为inline-box、table相关
    来看三个板栗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        overflow: hidden;
        background-color: pink;
    }
    .wrapper>p {
        margin: 5px auto 25px;
        background-color: red;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
</html>

上面包车型地铁栗子,父成分overflow:
hidden;成立了BFC,包蕴的多少个p标签会在笔直方向上会产生边距重叠。效果见图:

4858美高梅 15

1的上面距和2的上面距爆发了margin重叠,遵照margin重叠总计规则,间距取最大值25px。
怎么化解p标签它们之间的交汇呢???给自由四个子成分添加贰个打包父成分,给那么些父成分创设3个BFC就能够裁撤。
代码奉上:

    <div class="wrapper">
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </div>

效果:

4858美高梅 16

笔直方向上的边距重叠化解了,但是2的背景象却消失了,上上边距都改成了16px,1和3的边距都是5px和15px。

 

BFC的运用情况

  • BFC在布局上的选用
    栗子:左侧固定宽度,右侧自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        background-color: red;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .right {
        height: 110px;
        background-color: green;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果:

4858美高梅 17

由上海教室可以,float有三个风味,就是当左侧的冲天超过左边时(110>100),右侧会持续渲染左侧没有float的因素,也正是左侧与转变成分的box产生重叠。消除办法,正是给左边这么些因素创制二个BFC,代码如下:

    .right {
        height: 110px;
        overflow: auto;
        background-color: green;
    }

那会儿,BFC成分的区域不会与变化成分的box重叠,效果见图:

4858美高梅 18

  • BFC清除浮动
    栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        background-color: red;
    }
    .float {
        float: left;
        font-size:30px;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="float">我是浮动元素</div>
    </div>
</body>
</html>

效果:

4858美高梅 19

能够见见,包裹父成分并从未背景象,并且height是0,那是干吗吗???
因为变化成分是退出文书档案流的,它的冲天并不会计算到包裹div的冲天里。这么些怎么消除吧???正是给wrapper创设3个BFC:

    .wrapper {
        background-color: red;
        float:left;
    }

4858美高梅 20

    .wrapper {
        background-color: red;
        /*overflow: auto;*/
        overflow: hidden;
    }

4858美高梅 21

电动领悟IFC(内联成分格式化上下文)

HTML代码:

<div class="layout-grid">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码:

<style>
    .layout-grid{
        display: grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-colums:300px auto 300px;
    }
    .left {
        background-color: blue;
    }
    .center {
        background-color: green;
    }
    .right {
        background-color: blue;
    }
</style>

 

 

艺术五:相对布局

 

HTML代码:

<div class="layout-absolute">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码:

<style>
    .layout-absolute div{
        position: absolute;
    }
    .left {
        left:0;
        width:300px;
        background-color: blue;
    }
    .center {
        left:300px;
        right:300px;
        background-color: green;
    }
    .right {
        width:300px;
        right:0;
        background-color: blue;
    }
</style>        

 各种方法的利害:

float:兼容性较好,一般要求免去浮动

table:包容性较好,SEO不太友好

grid:新技巧,对旧浏览器包容不太好,代码简洁

absolute:方便易用,脱离文书档案流,可使用性较差

flex:没什么明显缺陷,且活动端友好

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有