【亚洲必赢官网】面试准备之CSS,最基本的多少个概念

CSS 最中央的几个概念

2015/08/26 · CSS · 5
评论 ·
CSS

原文出处:
GeekPlux   

正文将讲述 CSS
中最基本的多少个概念,包涵:盒模型、position、float等。那些是 CSS
的基本功,也是最常用的多少个特性,它们中间似乎独立却又相辅相成。为了操纵它们,有须求写出来研究一下,如有错误欢迎指正。

CSS 最焦点的多少个概念

【亚洲必赢官网】面试准备之CSS,最基本的多少个概念。2017/07/14 · CSS ·
CSS

原稿出处:
geekplux.   

正文将讲述 CSS
中最基本的多少个概念,包含:盒模型、position、float等。那么些是 CSS
的底子,也是最常用的多少个特性,它们之间似乎独立却又相辅相成。为了操纵它们,有必不可少写出来钻探一下,如有错误欢迎指正。

页面布局

亚洲必赢官网 1

本文将讲述 CSS
中最基本的多少个概念,包蕴:盒模型、position、float等。这一个是 CSS
的根基,也是最常用的多少个特性,它们中间就像独立却又相辅相成。为了操纵它们,有须要写出来探讨一下,如有错误欢迎指正。

要素类型

HTML 的因素得以分为两种:

  • 块级元素(block level element)
  • 内联元素(inline element 有的人也叫它行内元素)

两岸的分别在于以下三点:

  1. 块级元素会占据一行(即无法与任何因素彰显在一如既往行内,除非您显式修改元素的
    display 属性),而内联元素则都会在一行内显示。
  2. 块级元素得以设置 width、height 属性,而内联元素设置无效。
  3. 块级元素的 width 默许为
    100%,而内联元素则是依照其自我的内容或子元平素决定其调幅。

最常见块级元素应该是 <div> 吧,内联元素有 ``<img>
等等,完整的元素列表可以谷歌(谷歌)时而。

具体来说一下吗,

CSS

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

 

我们为 <div> 设置方面的体裁,是有效应的,因为其是块级元素,而对
设置上面的样式是没用的。要想让
也得以改变宽高,可以经过设置 display: block; 来达到效果。当 display
的值设为 block 时,元素将以块级方式突显;当 display 值设为 inline
时,元素将以内联格局表现。

若既想让要素在行内突显,又能安装宽高,可以设置:

CSS

display: inline-block;

1
display: inline-block;

 

inline-block
在我看来就是让要素对外呈内联元素,可以和其他因素共处与一行内;对内则让要素呈块级元素,可转移其宽高。


HTML 代码是各类执行的,一份无任何 CSS 样式的 HTML
代码最后显示出的页面是根据元素现身的顺序和序列排列的。块级元素就从上到下排列,碰到内联元素则从左到右排列。那种无样式的情事下,元素的遍布叫普通流,元素出现的岗位应该叫正常任务(那是我瞎起的),同时富有因素会在页面上占据一个上空,空间尺寸由其盒模型决定。

要素类型

HTML 的因素得以分成三种:

  • 块级元素(block level element)
  • 内联元素(inline element 有的人也叫它行内元素)

互相的区分在于以下三点:

  1. 块级元素会占据一行(即不可以与任何因素彰显在同样行内,除非你显式修改元素的
    display 属性),而内联元素则都会在一行内呈现。
  2. 块级元素得以安装 width、height 属性,而内联元素设置无效。
  3. 块级元素的 width 默许为
    100%,而内联元素则是基于其自我的内容或子元一直支配其调幅。

最常见块级元素应该是 ``<div>呢,内联元素有 ``<img>
“““等等,完整的要素列表可以谷歌(谷歌)时而。

具体来说一下吧,

JavaScript

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

我们为 `<div>`
设置上面的样式,是有效果的,因为其是块级元素,而对
设置上面的样式是没用的。要想让 ` 也可以改变宽高,可以通过设置display: block;` 来达到效果。当 display 的值设为 block
时,元素将以块级方式显示;当 display 值设为 inline
时,元素将以内联方式显示。
若既想让要素在行内展现,又能设置宽高,能够安装:

JavaScript

display: inline-block;

1
display: inline-block;

inline-block
在我看来就是让要素对外呈内联元素,可以和其余因素共处与一行内;对内则让要素呈块级元素,可转移其宽高。


HTML 代码是逐一执行的,一份无其余 CSS 样式的 HTML
代码最后呈现出的页面是按照元素出现的依次和项目排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。那种无样式的景况下,元素的遍布叫普通流,元素出现的任务应该叫健康职责(那是自身瞎起的),同时有着因素会在页面上占有一个空中,空间尺寸由其盒模型决定。

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

写出3种方案终于及格
交由5种方案,不管采纳哪一类方案,最终效果都是:

亚洲必赢官网 2

先是写出html结构:

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

要素类型

盒模型

页面上出示的各种元素(包括内联元素)都可以当做一个盒子,即盒模型( box
model )。请看 Chrome DevTools 里的截图:

亚洲必赢官网 3

可以鲜明的看看盒模型由 4 部分组成。从内到外分别是:

content -> padding -> border -> margin

1
content -> padding -> border -> margin

按理说来说一个元素的宽窄(高度以此类推)应该那样测算:

总宽度 = margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right

1
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

唯独分歧浏览器(你从未猜错,就是老大特殊的浏览器)对步长的笺注不均等。符合
W3C 标准的浏览器认为一个要素的拉长率只万分其 content
的小幅,其他都要相当算。于是你规定一个因素:

CSS

.example { width: 200px; padding: 10px; border: 5px solid #000; margin:
20px; }

1
2
3
4
5
6
.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

则他最终的肥瘦应为:

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) +
margin(20px * 2) = 270px;

1
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) =  270px;

而在 IE(低于IE9) 下,最后涨幅为:

宽度 = width(200px) + margin(20px * 2) = 240px;

1
宽度 = width(200px) + margin(20px * 2) = 240px;

自己个人觉得 IE 的更切合人类思维,毕竟 padding
叫内边距,边框算作额外的肥瘦也说不下去。W3C 最后为了缓解这么些难题,在
CSS3 中加了 box-sizing 那一个特性。当大家设置 box-sizing: border-box;  时,border 和 padding
就被含有在了宽高之内,和 IE 从前的正经是均等的。所以,为了避免你同样份
css 在差距浏览器下表现各异,最好增进:

CSS

*, *:before, *:after { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

 

此间还有二种卓殊情形:

  • 无宽度 —— 绝对定位(position: absolute;) 元素
  • 无宽度 —— 浮动(float) 元素

它们在页面上的显示均不占用空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其余因素的一贯)。那就提到到此外七个为主概念
position 和 float。

盒模型

页面上突显的每个元素(包涵内联元素)都可以作为一个盒子,即盒模型( box
model )。请看 Chrome DevTools 里的截图:

亚洲必赢官网 4

可以肯定的收看盒模型由 4 部分构成。从内到外分别是:

JavaScript

content -> padding -> border -> margin

1
content -> padding -> border -> margin

按理说来说一个元素的升幅(中度以此类推)应该那样计算:

JavaScript

总宽度 = margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right

1
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而是差异浏览器(你未曾猜错,就是至极特殊的浏览器)对步长的笺注分裂。符合
W3C 标准的浏览器认为一个要素的增幅只相当于其 content
的增幅,其他都要格外算。于是你确定一个因素:

JavaScript

.example { width: 200px; padding: 10px; border: 5px solid #000; margin:
20px; }

1
2
3
4
5
6
.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

则他最终的宽度应为:

JavaScript

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) +
margin(20px * 2) = 270px;

1
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最后涨幅为:

JavaScript

宽度 = width(200px) + margin(20px * 2) = 240px;

1
宽度 = width(200px) + margin(20px * 2) = 240px;

本人个人认为 IE 的更适合人类思想,毕竟 padding
叫内边距,边框算作额外的小幅也说不下去。W3C 最后为了化解这几个标题,在
CSS3 中加了 box-sizing 那几个特性。当大家设置 box-sizing: border-box;
时,border 和 padding 就被含有在了宽高之内,和 IE
从前的业内是同一的。所以,为了防止你同样份 css
在差别浏览器下显现不相同,最好拉长:

JavaScript

*, *:before, *:after { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

那里还有三种特有处境:

  • 无宽度 —— 相对定位(position: absolute;) 元素
  • 无宽度 —— 浮动(float) 元素

它们在页面上的显现均不占用空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其余因素的定点)。那就关系到其它八个要旨概念
position 和 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样式设置达成后,效果是那样子的:

亚洲必赢官网 5

怎么会并发那种状态吧???这是因为
html结构要改成这么:

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

延长:你知道怎么清除浮动的方案?每种方案的有何样优缺点?

HTML 的要素得以分为三种:

position

position 那一个特性决定了元素将何以定位。它的值大致有以下各个:

position 值 如何定位
static position的默认值。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative 相对定位,相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute 绝对定位,相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。
fixed 绝对定位,相对于浏览器窗口来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。
inherit 从父元素继承 position 属性的值。

具体功用可以参见w3school的实例,或者自己写一下就清楚了。

每个网页都足以当做是由一层一层页面堆叠起来的,如下图所示。

亚洲必赢官网 6

position 设置为 relative
的时候,元素如故在平常流中,地点是正常地点,你可以由此 left right
等移动元素。会影响其余因素的职位。

而当一个要素的 position 值为 absolute 或 fixed 的时候,会发生三件事:

  1. 把该因素往 Z
    轴方向移了一层,要素脱离了普通流,所以不再占据原来那层的上空,还会覆盖下层的要素。
  2. 该因素将改为块级元素,相当于给该因素设置了
    display: block;(给一个内联元素,如 “ ,设置 absolute
    之后发现它可以安装宽高了)。
  3. 一经该因素是块级元素,元素的增进率由原来的 width:
    100%(占据一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没须要设置 display 为
block 了。而且假设你不想覆盖下层的要素,可以设置 z-index 值 达到效果。

position

position 这些特性决定了元素将什么稳定。它的值大致有以下四种:

position 值 如何定位
static position的默认值。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative 相对定位,相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute 绝对定位,相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。
fixed 绝对定位,相对于浏览器窗口来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。
inherit 从父元素继承 position 属性的值。

切实成效可以参见w3school的实例,或者自己写一下就知道了。

每个网页都得以用作是由一层一层页面堆叠起来的,如下图所示。

亚洲必赢官网 7

position 设置为 relative
的时候,元素依旧在一般流中,地方是常规职分,你可以通过 left right
等活动元素。会影响其余因素的地点。

而当一个因素的 position 值为 absolute 或 fixed 的时候,会生出三件事:

  1. 把该因素往 Z
    轴方向移了一层,要素脱离了普通流,所以不再占据原来那层的半空中,还会覆盖下层的元素。
  2. 该因素将改为块级元素,相当于给该因素设置了
    display: block;(给一个内联元素,如 “ ,设置 absolute
    之后察觉它可以安装宽高了)。
  3. 若果该因素是块级元素,元素的小幅由原本的 width:
    100%(占据一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没须要设置 display 为
block 了。而且如若您不想覆盖下层的要素,可以安装 z-index 值 达到效果。

方案二:absolute

左右两栏absolute,中间栏设置margin值。
可取:思路不难,不便于出难题
缺陷:相对定位是脱离文档流的,意味着所有的子元素也非得剥离文档流;代码较多,可选用性差。

      .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;
    }
  • 块级元素(block level element)

  • 内联元素(inline element 有的人也叫它行内元素)

float

float 顾名思义,就是把元素浮动,它的取值一共有七个:left right none
inherit,光看名字就懂了,无需多言。

最初的 float 只是用来促成文字环绕图片的机能,仅此而已。而前日 float
的拔取已连发那个,前辈们也是写了广大博文来深刻浅出的教学它。
浅如:
经验分享:CSS浮动(float,clear)通俗讲解
篇幅不长,通俗易懂,可以看完那篇文章再回过头来看本文。
深如:
CSS
float浮动的尖锐切磋、详解及举办(一)
CSS
float浮动的时刻不忘钻研、详解及举办(二)
从精神上教学了 float 的原理。

自家就不卖弄本领写原理了,只说说 float 的多少个要点就行了:

  1. 唯有左右变迁,没有前后变动。
  2. 要素设置 float 之后,它会剥离普通流(和 position: absolute;
    一样),不再占据原来那层的空间,还会覆盖下一层的元素。
  3. 变迁不会对该因素的上一个小兄弟元素有任何影响。
  4. 变动之后,该因素的下一个哥们元素会紧贴到该因素以前没有安装 float
    的元素之后(很好了然,因为该因素脱离普通流了,或者说不在这一层了,所以它的下一个元素当然要补上它的义务)。
  5. 假设该因素的下一个兄弟元素中有内联元素(寻常是文字),则会围绕该因素展现,形成类似「文字围绕图片」的法力。(可参看CSS
    float浮动的深透钻研、详解及举行(一)中的讲解)。那么些自家要么执行了弹指间的:
    实际代码参考
  6. 下一个哥们元素若是也设置了一致方向的 float,则会紧随该因素之后显得。
  7. 该因素将成为块级元素,相当于给该因素设置了
    display: block;(和position: absolute; 一样)。

此地还有个东西,就是红得发紫的——铲除浮动。具体的主意两种各类,可以看那篇:那多少个年大家一起清除过的成形,我就不多说了。

写完本文后,脑子中又并发了一层层难点,借使 position 和 float
同时安装相会世什么样难题?包容性如何?哪个属性会被掩盖?还没来得及实践,改天以排列组合的章程看看到底是如何意义……借使有人实践过可以私自告诉我^_^

2 赞 32 收藏 5
评论

亚洲必赢官网 8

float

float 顾名思义,就是把元素浮动,它的取值一共有多个:left right none
inherit,光看名字就懂了,无需多言。

最初的 float 只是用来完毕文字环绕图片的职能,仅此而已。而现行 float
的运用已持续那一个,前辈们也是写了成百上千博文来长远浅出的执教它。
浅如:
经验分享:CSS浮动(float,clear)通俗讲解
篇幅不长,通俗易懂,可以看完那篇小说再回过头来看本文。
亚洲必赢官网,深如:
CSS
float浮动的中肯商讨、详解及开展(一)
CSS
float浮动的深深切磋、详解及开展(二)
从本质上上课了 float 的规律。

我就不卖弄本领写原理了,只说说 float 的多少个要点就行了:

  1. 唯有左右变化,没有前后变动。
  2. 要素设置 float 之后,它会脱离普通流(和 position: absolute;
    一样),不再占据原来那层的半空中,还会覆盖下一层的要素。
  3. 变迁不会对该因素的上一个小兄弟元素有其余影响。
  4. 变动之后,该因素的下一个小兄弟元素会紧贴到该因素以前并未设置 float
    的要素之后(很好通晓,因为该因素脱离普通流了,或者说不在这一层了,所以它的下一个因素当然要补上它的职分)。
  5. 倘若该因素的下一个哥们元素中有内联元素(平时是文字),则会围绕该因素展现,形成类似「文字围绕图片」的成效。(可参考CSS
    float浮动的耿耿于怀钻研、详解及开展(一)中的讲解)。那几个我要么执行了瞬间的:Demo
  6. 下一个哥们元素若是也安装了一致方向的 float,则会紧随该因素之后显得。
  7. 该因素将改为块级元素,相当于给该因素设置了
    display: block;(和position: absolute; 一样)。

那边还有个东西,就是大名鼎鼎的——扫除浮动。具体的点子种种八种,可以看那篇:那个年我们联合清除过的变更,我就不多说了。

写完本文后,脑子中又出现了一文山会海题材,如若 position 和 float
同时设置会见世哪些难题?包容性怎么着?哪个属性会被遮住?还没赶趟实践,改天以排列组合的法门看看究竟是怎么着成效……若是有人实践过可以私自告诉我^_^


本作品使用文化共享 署名-非商业性利用-禁止演绎 4.0 国际
许可商榷进展许可。

1 赞 7 收藏
评论

亚洲必赢官网 9

方案三:flex布局

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

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

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

        background: gray;
    }

两岸的界别在于以下三点:

方案四:table布局

亮点:兼容性好,适用于广大景色。在flex布局不同盟的时候,可以采取table布局。
缺点:处于一行的单元格table-cell会同时抓实,有时大家并不想要这种功用。

    .wrapper {
        display:table;
        width:100%;   //撑满整个屏幕的宽
    }
    .wrapper >div{
       display:table-cell;
    }
     .left,.right {
        width: 300px;
        background: pink;
    }
    .center {
        background: gray;
    }
  1. 块级元素会把持一行(即不能与其余因素突显在平等行内,除非你显式修改元素的
    display 属性),而内联元素则都会在一行内彰显。

  2. 块级元素得以安装 width、height 属性,而内联元素设置无效。

  3. 块级元素的 width 默许为
    100%,而内联元素则是依照其本人的情节或子元平素决定其调幅。

方案五:grid布局

可取:新的技术,代码量简化
缺点:浏览器对其辅助很弱,而且三栏同时压实

步骤:

  • 安装display的值为grid,申明容器是一个网格容器
  • 设置网格行和列,大家能够通过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;
    }

最常见块级元素应该是 <div> 吧,内联元素有 <span> <a>
<img> 等等,完整的要素列表可以谷歌(谷歌(Google))时而。

延长提问

答完题后,面试官会延伸提问
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布局。

具体来说一下呢,

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

左右高度稳定,中间自适应:APP用的格外多,上边是header,中间是内容,随着情节的增加会晤世滚动条,上面是导航,比如美团、天猫商城、京东。
先来看一下效益:

亚洲必赢官网 10

第一写出html结构:

    <div class="wrapper">
        <div class="header">header</div>
        <div class="content">
            上下两栏固定,中间滚动<br/>
            上下两栏固定,中间滚动<br/>
            <!-- 此处省略n个-->
        </div>
        <div class="footer">footer</div>
    </div>
.example {
    width: 100px;
    height: 100px;}

方案一:使用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>设置方面的样式,是有功能的,因为其是块级元素,而对
<span> 设置方面的体裁是没用的。要想让
<span>也得以转移宽高,可以通过安装display: block; 来达到效果。当
display 的值设为 block 时,元素将以块级方式表现;当 display 值设为
inline 时,元素将以内联方式显示。

方案二: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;
    }

若既想让要素在行内显示,又能安装宽高,可以设置:

方案三:grid布局

    .wrapper {
        display:grid;
        grid-template-rows: 100px auto 25px; 
        height: 100%;
    }
    .header {
        background: pink;
    }
    .content {
        overflow: auto;        
        background: green;
    }
    .footer {        
        background: grey;
    }
display: inline-block;

方案四:calc()函数

您认识calc()函数吗?那货其实就是一个总计长度值的。

    .wrapper {
        height: 100%;
    }

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

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

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

inline-block
在我看来就是让要素对外呈内联元素,可以和此外因素共处与一行内;对内则让要素呈块级元素,可改变其宽高。

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

亚洲必赢官网 11

HTML 代码是逐一执行的,一份无其余 CSS 样式的 HTML
代码最后突显出的页面是依照元素出现的种种和类型排列的。块级元素就从上到下排列,境遇内联元素则从左到右排列。那种无样式的事态下,元素的遍布叫普通流,元素现身的地点应该叫正常地点(那是自个儿瞎起的),同时拥有因素会在页面上占有一个空间,空间尺寸由其盒模型决定。

考点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浏览器之间的歧异。

亚洲必赢官网 12

亚洲必赢官网 13

亚洲必赢官网 14

盒模型

考点2:标准盒模型和IE盒模型的区分

计算width和height的不同:

  • 正式模型的width和height,指的是content的宽度和冲天,不分包padding、border、margin
  • IE模型的width和height,指的是content+padding+border的大幅度和可观

页面上显得的每个元素(包涵内联元素)都得以用作一个盒子,即盒模型( box
model )。请看 Chrome DevTools 里的截图:

考点3:CSS如何设置那二种模型?

一个因素默许的模型是哪些?怎么样设置为另一种?
CSS3的一个box-sizing属性:
语法:box-sizing:content-box | border-box | inherit:
content-box是正规模型,浏览器默许的模子。
border-box是IE模型。

亚洲必赢官网 15

考点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

可以鲜明的见到盒模型由 4 部分构成。从内到外分别是:

考点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>

亚洲必赢官网 16

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

亚洲必赢官网 17

那是怎么捏???
给父元素添加overflow:hidden,相当于创建了一个BFC

content -> padding -> border -> margin

考点6:BFC(边距重叠解决方案)

按理来说一个要素的幅度(中度以此类推)应该这么测算:

BFC的基本概念:块级元素格式化上下文

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

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标签会在笔直方向上会暴发边距重叠。效果见图:

亚洲必赢官网 18

1的下边距和2的顶端距发生了margin重叠,依据margin重叠总括规则,间距取最大值25px。
怎样清除p标签它们中间的交汇呢???给自由一个子元素添加一个卷入父元素,给那些父元素成立一个BFC就足避防去。
代码奉上:

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

效果:

亚洲必赢官网 19

垂直方向上的边距重叠消除了,不过2的背景象却没有了,上下面距都变成了16px,1和3的边距都是5px和15px。

然则差别浏览器(你从未猜错,就是那些特殊的浏览器)对步长的注释不等同。符合
W3C 标准的浏览器认为一个要素的宽度只至极其 content
的宽度,其他都要非凡算。于是你确定一个要素:

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>

效果:

亚洲必赢官网 20

由上图能够,float有一个特色,就是当右侧的可观超越右边时(110>100),右侧会一连渲染右边没有float的元素,也就是左边与变化元素的box暴发重叠。解决办法,就是给左边这么些元素创建一个BFC,代码如下:

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

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

亚洲必赢官网 21

  • 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>

效果:

亚洲必赢官网 22

可以见见,包裹父元素并从未背景象,并且height是0,那是干吗吗???
因为变化元素是退出文档流的,它的冲天并不会估摸到包裹div的万丈里。那么些怎么化解吧???就是给wrapper创立一个BFC:

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

亚洲必赢官网 23

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

亚洲必赢官网 24

机关精通IFC(内联元素格式化上下文)

.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;}

则他最后的小幅应为:

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最后涨幅为:

宽度 = width(200px) + margin(20px * 2) = 240px;

我个人觉得 IE 的更契合人类思维,毕竟 padding
叫内边距,边框算作额外的小幅也说不下去。W3C 末了为了化解那一个标题,在
CSS3 中加了box-sizing这几个特性。当大家设置box-sizing:
border-box;时,border 和 padding 就被含有在了宽高之内,和 IE
以前的正规化是一模一样的。所以,为了避免你同样份 css
在差距浏览器下显现分裂,最好拉长:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;}

那里还有二种更加情况:

  • 无宽度 —— 相对定位(position: absolute;) 元素

  • 无宽度 —— 浮动(float) 元素

它们在页面上的表现均不占用空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响此外因素的定势)。那就涉及到其余三个要旨概念
position 和 float。

position

position 这一个特性决定了元素将什么定位。它的值几乎有以下七种:

亚洲必赢官网 25

具体功用可以参考w3school的实例,或者自己写一下就了然了。

各样网页都可以当作是由一层一层页面堆叠起来的,如下图所示。

亚洲必赢官网 26

position 设置为 relative
的时候,元素如故在普通流中,地方是例行职务,你能够由此 left right
等活动元素。会影响其他因素的地点。

而当一个因素的 position 值为 absolute 或 fixed 的时候,会暴发三件事:

  1. 把该因素往 Z
    轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空中,还会覆盖下层的要素。

  2. 该因素将改为块级元素,相当于给该因素设置了 display:
    block;(给一个内联元素,如 <span> ,设置absolute
    随后察觉它可以设置宽高了)。

  3. 假如该因素是块级元素,元素的幅度由原本的 width:
    100%(占据一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没须要设置 display 为
block 了。而且一旦您不想覆盖下层的要素,可以安装 z-index 值 达到效果。

float

float 顾名思义,就是把元素浮动,它的取值一共有多少个:left right none
inherit,光看名字就懂了,无需多言。

最初的 float 只是用来达成文字环绕图片的效劳,仅此而已。而近年来 float
的应用已连发那几个,前辈们也是写了很多博文来深远浅出的讲解它。

从实质上教学了 float 的规律。

我就不班门弄斧写原理了,只说说 float 的多少个要点就行了:

  1. 唯有左右生成,没有前后变动。

  2. 要素设置 float 之后,它会脱离普通流(和 position:
    absolute;一样),不再占据原来这层的长空,还会覆盖下一层的要素。

  3. 变迁不会对该因素的上一个小兄弟元素有其它影响。

  4. 变动之后,该因素的下一个哥们元素会紧贴到该因素以前并未安装 float
    的要素之后(很好驾驭,因为该因素脱离普通流了,或者说不在这一层了,所以它的下一个要素当然要补上它的职位)。

  5. 要是该因素的下一个兄弟元素中有内联元素(日常是文字),则会围绕该因素展现,形成类似「文字围绕图片」的机能。

  6. 下一个小兄弟元素即使也安装了一样方向的 float,则会紧随该因素之后显得。

  7. 该因素将变为块级元素,相当于给该因素设置了 display:
    block;(和position: absolute; 一样)。

此间还有个东西,就是闻明的——清除浮动。具体的措施三种三种,能够看那篇:这几个年大家一块清除过的生成,我就不多说了。

写完本文后,脑子中又并发了一名目繁多题材,若是 position 和 float
同时设置会师世什么难点?包容性如何?哪个属性会被遮盖?还没赶趟实践,改天以排列组合的措施看看究竟是何等成效……如若有人实践过可以私自告诉我^_^

作者:GeekPlux
文章源自:

网站地图xml地图