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

要素类型

HTML 的成分得以分为二种:

  • 块级成分(block level element卡塔 尔(英语:State of Qatar)
  • 内联成分(inline element 有的人也叫它行内成分卡塔 尔(英语:State of Qatar)

二者的差距在于以下三点:

  1. 块级成分会攻下豆蔻梢头行(即不大概与任何因素显示在同风华正茂行内,除非您显式改过元素的 display 属性卡塔 尔(阿拉伯语:قطر‎,而内联元素则都会在黄金年代行内展现。
  2. 块级成分得以设置 width、height 属性,而内联成分设置无效。
  3. 块级成分的 width 默认为百分之百,而内联成分则是依照其自己的剧情或子成分来决定其调幅。

最平淡无奇块级成分应该是 <div> 吧,内联成分有 ``<img> 等等,完整的成分列表能够Google时而。

具体来讲一下啊,

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 代码最后呈现出的页面是依据成分现身的相继和项目排列的。块级成分就从上到下排列,遭遇内联成分则从左到右排列。这种无样式的气象下,成分的布满叫普通流,元素现身的地点应该叫例行职责(那是自己瞎起的卡塔 尔(英语:State of Qatar),相同的时间不无因素会在页面上据有叁个空间,空间大小由其盒模型决定。

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

CSS 最大旨的几个概念

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

初藳出处: GeekPlux   

本文将陈说 CSS 中最中央的多少个概念,包蕴:盒模型、position、float等。这么些是 CSS 的底蕴,也是最常用的多少个属性,它们之间就如独立却又相得益彰。为了调节它们,有供给写出来商量一下,如有错误款待指正。

考试之处3:CSS如何设置那二种模型?

叁个元素私下认可的模子是怎样?怎样设置为另大器晚成种?
CSS3的一个box-sizing属性:
语法:box-sizing:content-box | border-box | inherit:
content-box是正规模型,浏览器暗许的模子。
border-box是IE模型。

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的实例,或然自身写一下就领悟了。

每种网页都得以用作是由生机勃勃层风度翩翩层页面堆放起来的,如下图所示。

图片 1

position 设置为 relative 的时候,成分如故在平日流中,地方是常规地方,你可以通过 left right 等移动成分。会耳熟能详别的因素的岗位。

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

  1. 把该因素往 Z 轴方向移了生机勃勃层,要素脱离了普通流,所以不再攻下原本那层的空间,还有恐怕会覆盖下层的成分。
  2. 该因素将化为块级成分,也正是给该因素设置了 display: block;(给二个内联成分,如 `` ,设置 absolute 之后察觉它能够安装宽高了卡塔尔。
  3. 假定该因素是块级成分,成分的增进率由原本的 width: 百分百(吞没风流倜傥行卡塔尔国,变为了 auto。

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

页面布局

图片 2

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 的要素之后(很好掌握,因为该因素脱离普通流了,大概说不在这里风流倜傥层了,所以它的下二个因素当然要补上它之处卡塔 尔(英语:State of Qatar)。
  5. 若果该因素的下三个小伙子元素中有内联成分(平常是文字卡塔尔,则会围绕该因素展现,形成相像「文字围绕图片」的遵守。(可参看CSS float浮动的深刻钻研、详细明白及进行(风度翩翩)中的讲授卡塔 尔(阿拉伯语:قطر‎。那个自身也许举办了风流倜傥晃的:
    现实代码参考
  6. 下叁个弟兄成分就算也设置了扳平方向的 float,则会紧随该因素之后显得。
  7. 该因素将化为块级成分,也就是给该因素设置了 display: block;(和position: absolute; 一样)。

此处还也会有个东西,正是远近著名的——撤消浮动。具体的法子各种各个,能够看那篇:那个年我们一块消逝过的转移,作者就相当的少说了。

写完本文后,脑子中又出新了意气风发多种难题,假使 position 和 float 同期安装会晤世什么难点?包容性如何?哪个属性会被蒙蔽?尚未来得及施行,改天以排列组合的主意看看见底是怎么着效果……假如有人实践过能够私下告诉作者^_^

2 赞 32 收藏 5 评论

图片 3

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

图片 4

盒模型

页面上出示的各样成分(包涵内联成分卡塔 尔(英语:State of Qatar)都能够看作二个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:

图片 5

可以料定的看出盒模型由 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。

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

图片 6

干什么会现身这种气象吧???那是因为
html结构要改成这么:

    <div class="wrapper">
        <div class="left">zuo</div>        
        <div class="right">you</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;
    }

考试的场合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>

图片 7

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

图片 8

这是怎么捏???
给父成分增加overflow:hidden,相当于创设了三个BFC

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

BFC的原理(渲染准则卡塔尔

1卡塔尔BFC成分的垂直方向上会爆发边距重叠
2卡塔 尔(阿拉伯语:قطر‎BFC成分的区域不会与转换成分的box重叠
3卡塔 尔(英语:State of Qatar)BFC成分在页面上是三个单独的容器,BFC里面的成分与外部的因素互不影响
4卡塔尔总括BFC中度的时候,浮动成分也会到场总结

  • 怎么样去创建三个BFC
    1卡塔尔overflow(不是暗中认可值visible卡塔 尔(阿拉伯语:قطر‎,hidden/auto都能够
    2卡塔 尔(英语:State of Qatar)成立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标签会在笔直方向上会发生边距重叠。效果见图:

图片 9

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>

效果:

图片 10

垂直方向上的边距重叠消灭了,可是2的背景观却消失了,上下面距都形成了16px,1和3的边距都以5px和15px。

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

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

图片 11

第风度翩翩写出html结构:

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

方案三:grid布局

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

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

方案四:table布局

优点:包容性好,适用于广大景观。在flex布局不包容的时候,能够运用table布局。
缺欠:处于生机勃勃行的单元格table-cell会同有时间进步,一时大家并不想要这种效应。

    .wrapper {
        display:table;
        width:100%;   //撑满整个屏幕的宽
    }
    .wrapper >div{
       display:table-cell;
    }
     .left,.right {
        width: 300px;
        background: pink;
    }
    .center {
        background: gray;
    }

考试之处2:规范盒模型和IE盒模型的界别

计算width和height的不同:

  • 正规模型的width和height,指的是content的小幅度和冲天,不分包padding、border、margin
  • IE模型的width和height,指的是content+padding+border的肥瘦和冲天

方案一:使用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布局

    .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;
    }

考试的地点6:BFC(边距重叠实施方案卡塔 尔(阿拉伯语:قطر‎

主题材料2:上下两栏固定,中间滚动

左右中度稳固,中间自适应:APP用的不行多,上面是header,中间是内容,随着剧情的增添会身不由己滚动条,上面是导航,例如美团、Taobao、京东。
先来看一下效果:

图片 12

先是写出html结构:

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

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>

效果:

图片 13

由上航海用教室能够,float有二个特点,正是当左侧的莫斯中国科学技术大学学超越侧边时(110>100卡塔尔,侧边会继续渲染左侧未有float的因素,也正是左边手与变化成分的box发生重叠。消除办法,正是给右侧这一个成分创立多个BFC,代码如下:

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

此刻,BFC成分的区域不会与调换成分的box重叠,效果见图:

图片 14

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

效果:

图片 15

能够见到,包裹父成分并未背景象,而且height是0,那是干吗呢???
因为变化成分是脱离文书档案流的,它的惊人并不会简政放权到包裹div的可观里。那个怎么解除呢???正是给wrapper创立三个BFC:

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

图片 16

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

图片 17

机动通晓IFC(内联成分格式化上下文卡塔尔

延长提问

答完题后,面试官会延伸提问
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卡塔 尔(英语:State of Qatar)5种方案的宽容性,哪一种是最优的方案?
显然是flex布局、table布局。

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

概念:在CSS中,文书档案中的每一种HTML成分能够被作为三个盒子,这一个模型描述了二个成分所占用的长空。它满含:content(内容卡塔尔、padding(填充,内容到边框的离开卡塔尔、border(边框卡塔尔、margin(外边距卡塔 尔(英语:State of Qatar)多少个部分。

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

box-sizing属性的成效
在IE8及以下的浏览器中只支持IE盒模型,在IE8+及其余主流浏览器中,通过CSS3新扩展的box-sizing属性能够设置浏览器的盒模型。box-sizing属性的默许值是content-box,即W3C标准盒模型;而将box-sizing值设置为border-box时,则会转移为IE盒模型。使用box-sizing属性能够统黄金年代IE和非IE浏览器之间的间距。

图片 18

图片 19

图片 20

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

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

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:面试准备之CSS,最核心的几个概念

相关阅读