金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 面试准备之CSS,最核心的几个概念

面试准备之CSS,最核心的几个概念

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:47

盒模型

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

图片 1

可以显而易见的看出盒模型由 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。

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>

效果:

图片 2

由上图可知,float有一个特性,就是当右边的高度高于左边时(110>100),右边会继续渲染左边没有float的元素,也就是左边与浮动元素的box发生重叠。解决办法,就是给右边这个元素创建一个BFC,代码如下:

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

这时,BFC元素的区域不会与浮动元素的box重叠,效果见图:

图片 3

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

效果:

图片 4

可以看到,包裹父元素并没有背景色,并且height是0,这是为什么呢???
因为浮动元素是脱离文档流的,它的高度并不会计算到包裹div的高度里。这个怎么解决呢???就是给wrapper创建一个BFC:

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

图片 5

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

图片 6

自行了解IFC(内联元素格式化上下文)

元素类型

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 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。

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

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 值 达到效果。

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

计算width和height的不同:

  • 标准模型的width和height,指的是content的宽度和高度,不包含padding、border、margin
  • IE模型的width和height,指的是content+padding+border的宽度和高度

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

延伸提问

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

CSS 最核心的几个概念

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

原文出处: GeekPlux   

本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。

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

写出3种方案算是及格
给出5种方案,不管使用哪种方案,最终效果都是:

图片 9

首先写出html结构:

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

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

图片 10

图片 11

图片 12

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

考点3:CSS如何设置这两种模型?

一个元素默认的模型是什么?如何设置为另一种?
CSS3的一个box-sizing属性:
语法:box-sizing:content-box | border-box | inherit:
content-box是标准模型,浏览器默认的模型。
border-box是IE模型。

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

图片 13

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>

效果:

图片 14

垂直方向上的边距重叠消除了,但是2的背景色却消失了,上下边距都变成了16px,1和3的边距都是5px和15px。

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

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

方案一: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样式设置完成后,效果是这样子的:

图片 15

为什么会出现这种情况呢???这是因为
html结构要改成这样:

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

延伸:你知道哪些清除浮动的方案?每种方案的有什么优缺点?

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

页面布局

图片 16

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

图片 17

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

图片 18

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

方案三:grid布局

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

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

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

方案一:使用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;来替代。

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

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

图片 19

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

上下高度固定,中间自适应:APP用的非常多,上边是header,中间是内容,随着内容的增多会出现滚动条,下边是导航,比如美团、淘宝、京东。
先来看一下效果:

图片 20

首先写出html结构:

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

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:面试准备之CSS,最核心的几个概念

关键词: