百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

d7-8 学习布局

作者王雨洁课程第七天到第八天:学习布局104次浏览22018-08-29 15:28

title: d7-8 学习布局
date: 2018-08-27 14:24:00

tags: [html,css,学习笔记]

这一节是大量的布局练习,猴快乐啊。

阅读

MDN打不开?又打不开?

学习CSS布局

阅读地址

1 display属性

常用的块级元素包括pform和h5的新元素:header``footer``section等。
display的属性值有:

  • block
  • inline
  • none
  • list-item
  • table
  • inline-block
  • flex

2 margin:auto与max-width

设置块级元素的width可以防止它撑满整个容器,然后设置左右外边距margin可以使其水平居中。
但是当浏览器窗口宽度窄的时候,浏览器会先使用一个水平滚动条来容纳页面。这个时候要使用max-width来代替width,从而处理小窗口情况。主流浏览器都支持max-width属性。

3 盒模型

为了方便设置css的大小【长宽】,平常我们需要计算padding+margin+border啥的,使用box-sizing:border-box;就可以令内边距和边框都不增加它的宽度。
对设置长宽非常友好,这是最好的设置盒子模型大小的办法。
同时,为了兼容其他页面,一般要写作以下形式:

{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
                box-sizing: border-box;
}

不过这个属性只支持IE8+。

4 常用布局属性position

  • static 这是默认值。设置为这个的元素不会被特殊定位。
  • relative 相对定位。在不添加其他属性时,和static表现一样。在添加了top``right``bottom``left这些属性后悔使其与它原来的位置偏移。其他元素不会受此元素影响来弥补空隙。
  • fixed 固定定位。它是相对于视窗来定位的,像个广告。【它是脱离文档流的,就是不会保留它原本在页面应有的空隙。
  • absolute 绝对定位。相对于最近的positioned的祖先元素【positioned指position值不是static的元素】,如果没有这样的元素存在,那么相对于body元素。

5 另一个常用布局属性float

可以实现文字环绕图片。

6 clear

一般被用于控制浮动。【没很理解这个属性啊,我觉得不行。
感觉就像是清除了float:left这个属性。所以元素会在下一行。

7 清除浮动(clearfix hack)

清除浮动方法可以解决div中图片溢出容器的问题。给容器加overflow: auto来让容器包括进图片。
这个方法可以在所有的主流浏览器中实现。

8 媒体查询:响应式设计

让网站针对不同的浏览器和设备呈现不同的显示效果的策略。
以下实例实现的是:用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

inline-block

通过inline-block可以实现和clear差不多的效果。【突然有点理解clear了。
使用它进行布局,要记住:

  • vertical-align属性会影响到inline-block元素,我可能会把它的值设为top。
  • 需要设置每一列的宽度。
  • 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙。

column属性:可以实现文字多列布局

IE9和opera不支持。
这是个新标准,所以需要使用前缀:

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;    /*表示列之间空隙为1em*/
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

flexbox布局模式

只能在支持==flexbox #f85d5d==的Chrome浏览器中运行。
感觉很厉害。【mark

css框架

blueprint
bootstrap

CSS布局(三)布局模型

阅读地址
讲的内容和之前差不多。这里少记一点。
三种布局模型:流动模型(Flow)【默认、浮动模型(Float)、层模型(Layer)。

流动模型(Flow)

特征:

  1. 块状元素都会在所处的包含元素内自上而下的按顺序垂直延伸分布。默认状态下,块状元素的宽度为100%,一般以行的形式占据位置。
  2. 在流动模型下,行内元素从左到右水平分布显示。

浮动模型(Float)

层模型(Layer)

这里有三种定位形式:相对定位、绝对定位、固定定位。
相对定位:仍然占据着它没偏移前的空间。
绝对定位:在文档流中不占据空间,如果设置了绝对定位,那么它在文档流中的位置会被删除。其他元素会忽略此元素并填补它原先的空间。
浮动元素还是基于正常的文档流,文字内容会围绕在浮动元素周围,它只是改变了文档流的显示,没有脱离文档流。

z-index

只对设置了定位的元素有效。
对于父子元素,如果父元素的z-index有效,那么子元素无论如何在父元素上方。
如果父元素的z-index未定位或使用默认值,那么子元素的z-index生效。

如果两个元素都没有设置z-index,那么定位元素覆盖未定位元素。
如果两个元素都没有定位但位置重合,或者是两个已定位元素且z-index相同,那么按文档流顺序,后面的覆盖前面的。

CSS布局(四)float详解

阅读地址
float设置的初衷是为了文字环绕效果。

float的特性

  1. 破坏性。
    原因:被设置了float的元素会脱离文档流。
    所以float会产生破坏性,也就是会使父标签的结构坍塌。也就是说,设置元素为float之后,再看他的位置就不当做父元素的子元素来看了,所以可能会跑到父元素外面去。
    但是因为它会被文字环绕,所以如果文字足够的情况下,可以把父元素撑起来,看起来就像没塌的样子。
  2. 包裹性
    如果设置了float,那么元素的大小会变成紧紧包着内容的大小。【本来的div是撑满整行的】这个想想文字环绕效果就很好理解了。
  3. 清空格
    如果设置了float属性,那么元素之间的缝隙就没了。
    原因是float使元素脱离文档流结构,所以之前空格或者换行造成的缝隙就与它无关,都往一边靠拢。

清除浮动

清除浮动是为了避免float带来的破坏性。

  1. 为父元素添加overflow:hidden这样能使得父元素有高度,所以高度不会被破坏
  2. 浮动父元素。
  3. 在所有浮动元素的下方增加一个clear:both的元素。
  4. 【最有用的】clearfix:给父元素设置一个伪元素,具体代码如下:【把.clearfix当做父元素】
    .clearfix:after
    {
     content: "";
     display: table;
     clear: both;
    }
    .clearfix
    {
     *zoom: 1;    /*兼容IE低版本*/
    }
    

    ==使用float进行网页布局 #f85d5d==

    在设置float属性后,元素会inline-block块状化

CSS布局(五)网页布局方式

阅读地址

一列布局

一般有固定的宽高,设置margin:0 auto来水平居中,用于展示标题等。

两列布局

一般用float来实现。但是需要及时清除浮动。
这是左左浮动或者左右浮动【需要确定父级元素的宽度】。

如果父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响。
对于自己相邻元素清除浮动产生的影响用:clear:both;

三列布局

两侧定宽中间自适应。
首先要设置父级元素的宽度,可以左左右设置浮动,然后中间设置margin调整间距。也可以都设置成左浮动。注意消除浮动影响。

.main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 100px;
        }
        .middle{
             background: rosybrown;
             float: left;
             width: cacl(100%-200px);    /*原来这就是自适应啊*/
         }
        .right{
            background: green;
            float: right;
            width: 100px;
        }

或者父级元素设置relative,然后子元素设置为absolute,分别定位。

混合布局

在一系列布局上,保留top和foot部分,将中间的main部分改成两列或者三列。

扩展:等分布局

比如四列等分:

body{margin: 0;}
        .parent{
            border: 1px solid red;
            overflow: hidden;
            margin-right: -10px;
        }
        .child {
            width: calc(25% - 10px);
            height: 100px;
            background: green;
            float: left;
            margin-right: 10px;
        }

CSS布局(六)对齐方式

水平居中

1)行内元素的水平居中
如果元素文本、图片等行内元素,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline-block,使子元素变为行内元素。
2)块状元素的水平居中(定宽)
当被设置元素为定宽块级元素时用text-align:center就不起作用了。可以通过设置左右margin值为auto来实现居中。
3)块状元素的水平居中(不定宽)
可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素加text-align:center来实现居中效果。
当不定宽块级元素的宽度不要占一行时,可以设置display为inline类型或inline-block。

垂直居中

设定两个条件:父元素是盒子容器,且高度已经设定。
1)子元素是行内元素,高度是由其内容撑开的。这种情况下,需要通过设定父元素的line-height为其【父元素】高度来使得子元素垂直居中。
2)子元素是块级元素但是没有设定子元素的高度。此时我们可以通过给父元素设定display:table-cell;vertical-align:middle来解决。
3)子元素是块级元素且高度已经设定。计算子元素的margin-to或margin-bottom,计算方法为父元素高度-子元素高度,然后/2。

水平垂直居中:

1)水平对齐+行高
text-align+line-height实现单行文本水平垂直居中
2)水平+垂直对齐
text-align+vertical-align
在父元素设置以上两个属性,并将父元素设置为table-cell元素,子元素设置为inline-block元素。

如果子元素是图像,可不适用table-cell,而是其父元素,用行高line-height代替高度【不写高度】,且字体大小设置为0。子元素本身设置vertical-align:middle
3)相对+绝对定位
使用absolute,利用绝对定位元素的盒模型特性,在偏移属性为确定的基础上,设置margin:auto。

七种实现左侧固定,右侧自适应两栏布局的方法

阅读地址
首先创建基本的HTML布局

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div120px
  </div>
</div>

两个盒子的基本样式:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

双inline-block方案

这种方法需要知道右侧盒子距离左侧的距离(包括左侧盒子的宽度和外边距等),通过width: calc(100%-左侧距离)计算右侧盒子的宽度。
同时,对于inline-block盒子,必须设置vertical-align来使其顶端对齐。
以及,为了计算宽度准确,需要消除div之间的空格,设置父容器的font-size为0。
为了计算距离方便,可以将子元素的box-sizing设为border-box。
父元素需要设定为box-sizing=content-box。否则不成功。

双float方案

由于浮动的block元素会紧贴在一起,所以不必设置inline-block也不用对齐、消除空格。
这里同样是通过动态计算宽度来令右侧盒子的宽度自适应。
缺点是一样需要知道左侧盒子的距离,父元素还需要清除浮动。

float+margin-left方案

这个方法是利用block元素的流动特性【填满父容器,并随着父容器的宽度自适应】。
由于块级元素单独占一行,所以需要使用float让他们排列在一行。由于块级元素会认为浮动元素不存在,所以让左边盒子float:left,这样可以使得两个盒子在同一行。
但是我们需要让右侧盒子给左边盒子留出足够的位置,所以给右侧盒子设置margin-left,这个数值为左侧盒子的宽度+盒子之间的路基。
注意:要记得给父元素清除浮动。

absolute+margin-left方法

这个方法也是利用block元素的流动特性。
所以同样我们需要让右侧盒子和左边盒子到同一行中。这里我们使用将左边盒子设置为position:absolute,也可以令右边盒子无视它。
对于右边盒子,和上面的方法一样需要设置margin-left
缺点:如果左侧盒子比右边盒子高,会超出父容器的高度。只能通过设置父容器的min-height来防止这种情况。

float+BFC方法

此方法不需要计算宽度,只需要设置两个盒子之间的间隔。
首先,利用左侧盒子float:left来让两个盒子能够并列一行。
给右侧盒子设置overflow:auto来形成==BFC #f85d5d==【块级格式化上下文】,所以右侧盒子不会与浮动元素重叠。
此时我们只需要给左侧盒子设置margin-right来控制两个盒子之间的距离。右侧盒子是块级元素,所以宽度能够实现自适应。
最后,给父元素清除浮动。

flex方案【大概是最好的方案了

flex容器的一个默认属性值align-items:stretch这个属性导致了列等高的效果,为了让盒子高度自动,需要设置align-items:flex-start

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

grid方案

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;    /*grid也有列等高效果,所以需要设置这个*/
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

双飞翼布局介绍-始于淘宝UED

阅读地址
这个写的不是很好啊。没咋看。

圣杯布局和双飞翼布局(前端面试必看)

阅读地址

圣杯布局和双飞翼布局都是实现三栏布局,两个盒子宽度固定,中间的盒子自适应。固比固布局。差别在于实现的思想。

圣杯布局

圣杯布局来自于a list part的文章In Search of the Holy Grail
双飞翼布局源于淘宝UED:缩放页面时可以发现中间盒子先渲染,两边盒子固定不变。所以当网页宽度变小,也不影响浏览。【但是最好给body设置最小宽度。
圣杯布局的实现

  • 一 HTML部分:

    <header><h4>Header内容区</h4></header>
    <div class="container">
      <div class="middle"><h4>中间弹性区</h4></div> 
      <div class="left"><h4>左边栏</h4></div> 
      <div class="right"><h4>右边栏</h4></div>
    </div>
    <footer><h4>Footer内容区</h4></footer>
    

    这里结构一定要先写中间的盒子再写左右,因为我们要优先渲染中间。
    并且给中间盒子设置自适应宽度,width:100%

    • 二 给每个盒子设置样式【这里只设置大小和背景色】
      header{width: 100%;height: 40px;background-color: darkseagreen;}
      .container{ height:200px;}
      .middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
      .left{ width: 200px;height: 200px;background-color: blue;float:left;}
      .right{width: 200px;height: 200px;background-color: darkorchid;float:left;}
      footer{width: 100%; height: 30px;background-color: darkslategray;}
      
      这里做了一点小改动,原文给.container这个三个盒子的父元素设置了overflow:hidden就看不见左右两个盒子了。所以我这里删去这句。
      此时效果图也不同,如下:

效果一
此时离我们要实现的目标还有距离。我们需要呈现三列的格式。但是根据文档流,我们的块级元素顺序是:中左右。并且由于中间盒子宽度是100%,所以左右被挤在下一行。

  • 三 利用负边距布局

    • 让左边的盒子到中间盒子的左边。设置.left{margin-left:-100%}
    • 设置右边盒子的左边距为负的自己的宽度,.right{margin-left:-200px}
      此时效果如图【我改了父元素高度,不知道为啥原来的200太大了
  • 四 让中间盒子安全显示
    左右盒子到上边去的原因只是位置改变,并没有占据对应的空间,所以其实中间盒子还是占满了整行的宽度。只不过部分内容被左右盒子盖住了不显示而已。
    此时我们需要让父元素设置左右内边距,把左右盒子的空间预留出来:.container{padding: 0 200px;}

此时效果是这样
这里左右盒子也被往里边挤了。也就是说,中间的盒子的一些部分依然被左右两个盒子盖住。
所以需要将左右盒子固定在左右两边。
给他们分别定位

.left
{
    position: relative;
    left:-200px;
}
.right
{
    position:relative;
    right: -200px;
}

成功完成圣杯布局。
但是发现如果页面过小会导致布局崩溃,所以我给body加上了min-width为600px。可以让页面缩小时保持布局。

CSS深入理解流体特性和BFC特性下多栏自适应布局

阅读地址

块状元素的流体特性与自适应布局

流体特性【之前其他文章也提到过】:块状元素在默认情况(不是浮动、绝对定位)下,水平方向会自动填满外部的容器。【就是占满整行】如果有margin、padding、border等设置,可用宽度会减少,内容会随着这些宽度自动填满剩余空间。

所以我们可以利用流体特性来实现自适应效果。
比如,两栏自适应效果,可以利用margin-left来实现。
为了不影响本身的流体特性,我们可以适应破坏性属性来设置,比如浮动或者绝对定位。
还是贴代码吧,感觉好理解:

<div class="flow-box">
    <img src="mm1.jpg" width="128" style="float:left;">
    <div class="flow-content"><img src="mm1.jpg" width="100%" height="190"></div>
</div>

<style>
.flow-box {
    width: 500px; background-color: #eee; overflow:auto; resize:horizontal;
}
.flow-content {
    margin-left: 150px;    /*这里设置了左边的固定宽度,让两栏不会重叠*/
}
</style>

其中float:left可以改成position:absolute,效果一致。
同样的原理,我们可以实现多栏自适应效果。

但是有个缺点:需要知道浮动或者绝对定位内容的尺寸,这样才能用margin、padding、border来控制流体部分的位置。

所以可以利用块状元素的BFC特性实现更智能的多栏自适应布局。

元素的BFC特性与自适应布局

BFC:Block Formatting Context,块级格式化上下文。
==原则是:内部子元素不影响外部元素。 #f85d5d==

触发BFC的条件

  • float的值不为none;
  • overflow的值为auto、scroll、hidden。
  • display的值为table-cell、table-caption、inline-block中的任何一个。
  • position的值不为relative和static。

满足以上任意一个就会触发BFC。【说得和奇遇一样……
如果是上面的流体【块级元素】与浮动元素当兄弟【……并列一层】的时候,是覆盖的关系,就是如果不写margin之类的两个元素会重叠。
但是BFC不会。
普通流体元素【块级元素】BFC后,为了浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文。【不打扰是我的温柔】同时还保留了元素的流体特性。非常适合自适应布局。

自适应布局模块间的间距
BFC元素设置margin后有可能因为数值不够而不产生变化。
所以一般情况我们使用浮动元素的margin-right或者padding来实现间距效果。
于是有了一个自适应的固定搭配:

.l{float: left;}
.ovh {overflow: hidden;}

与纯流体特性布局的优势
1、BFC的自适应内容不会与外界产生矛盾。而纯流体布局为了消除浮动设置clear:both可能会让后面的内容与float元素不再一个水平上,产生布局问题。
2、自适应内容自动填满浮动元素以外的区域,不需要关心浮动元素的宽度,可以整站大规模应用。

所以说BFC这么牛批为啥没有天天看见呢
因为BFC的触发和流体特性要同时兼顾比较难。【还真的像奇遇??

  • float:left。浮动元素本身BFC化,但是浮动元素具有破坏性和包裹性,就失去了元素本身的流体自适应性。因为无法用来实现自适应布局。
  • position:absolute。这个与文档流严重脱节,所以不好安置。
  • overflow:hidden。原文夸你超棒的哦。所以它超好用。【吃下安利了。但是还是有时候不能用,因为怕有啥东西超出被裁剪掉了。所以这个float+overflow的自适应布局可以在局部使用。【不怕裁剪时
  • display:inline-block。在低版本浏览器里,可以得到自适应效果。IE8+以后现代浏览器没得了。元素尺寸包裹收缩,没有水平流动特性。
  • display:table-cell。让元素像单元格一样。它和inline-block一样会跟随内部元素的宽度显示。但是它有个特性:你宽度再大都不会超过容器的宽度。所以我们可以通过给它设置一个很大的宽度来让它产生自适应效果。比较难过的是它只支持IE8+,而且需要控制英文字符换行。

总结【哪些能用呢】

  1. overfl:auto/hidden IE7+
  2. display:inline-block IE6/IE7
  3. display:table-cell IE8+

我熟知的三种三栏网页宽度自适应布局方法

阅读地址
这三种方法的优点是:简洁实用,没有兼容性问题。

绝对定位法

优点:三个div的顺序可以随意调换。而且受内部元素影响概率低。
缺点:如果中间栏有最小宽度限制或者内部含有宽度的元素,当浏览器缩小到一定程度会发生重叠现象。【我感觉这个可以通过给父元素设置最小宽度来避免】
代码如下:【自己测试了下,下面是成功的代码】

<style>
    body
    {
        margin: 0;
        height: 100%;
    }
    .left
    {
        position:  absolute;
        width: 200px;
        height: 100%;
        top: 0;
        left: 0;
        background: #a0b3d6;
    }
    .right
    {
        position:absolute;
        width: 200px;
        height: 100%;
        top: 0;
        right: 0;
        background: #a0b3d6;
    }
    .middle
    {
        height: 100%;
        margin: 0 20px;
        top: 0;
        background: #ffe6b8;
    }
</style>

<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>

margin负值法

首先,中间主体需要使用双层标签,外层div用100%宽度,并且浮动。内层div为真正的主体。
左侧盒子左浮动,margin-left为-100%。【这个数值时因为前面div的宽度是100%,这样刚好能使左侧盒子在中间盒子的左边】
右侧盒子左浮动,margin-left数值为自己的宽度的负数。
代码如下:

<style>
body
{
    height: 100%;
    margin: 0;
}
#main
{
    width: 100%;
    height: 100%;
    float: left;
}
#main .middle
{
    background-color: #ffe6b8;
    height: 100%;
}
.left
{
    margin-left: -100%;

    width: 200px;
    height: 100%;
    float: left;
    background-color: #a0b3d6;
}
.right
{
    margin-left: -200px;

    width: 200px;
    height: 100%;
    float: left;
    background-color: #a0b3d6;
}

</style>

<body>
    <div id="main">
        <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

注意:此方法div设置必须按照此顺序。

自身浮动法

HTML中要把中间模块放到最后。
左侧盒子左浮动,右侧盒子右浮动。代码如下:

<style>
body
{
    height: 100%;
    margin: 0;
}
.middle
{
    height: 100%;
    background-color: #ffe6b8;
}
.left
{
    float: left;
    width: 200px;
    height: 100%;
    background-color: #a0b3d6;
}
.right
{
    float: right;
    width: 200px;
    height: 100%;
    background-color: #a0b3d6;
}

</style>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</body>

练习作业

1 两栏布局,左侧占30%宽度,右侧占70%宽度

这里我使用了三种方法:float、position:absolute、flex方法。
不知道有没有自动高度的方法,我给div设置了固定高度才能显示。【好的可以直接设置100%
经过检测:改变窗口大小,仍旧可以实现宽度比例。
实现效果

2 两栏布局,左侧固定宽度,右侧根据浏览器宽度进行自适应变化

直接用了上面阅读部分学到的七种方法。
其中在使用width: calc(100% - 200px);要注意。减号前后要打空格,我没打效果就出错。【神坑。
实现效果

3 实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变化

我觉得这个和上面一样,所以直接复制第二题进行修改。

  1. 双float:只是把自适应宽度的属性赋予左边盒子,没有问题。
  2. 【第二种】position+margin有问题。无法使两个元素在同一行上。右侧盒子一直在下一行。
  3. flexbox:调换了一下左右两个盒子的属性。可行
  4. 双inline-block:和第一种方法一样,把自适应宽度属性赋予左边盒子,可行。
  5. 【float+margin-right】:和第二种一个问题,右侧盒子无法与左侧盒子同一行。
  6. 【float+BFC】:也不能做到同行。
  7. gird:更改父元素中列宽的设置即可。

所以我实现的是4种方法。另外有三种没有实现。
实现效果

4 实现一个三栏布局,左侧固定宽度,右侧固定宽度,中间部分宽度随浏览器宽度变化而自适应变化

  1. 试图使用之前阅读内的圣杯布局【负边距方法】,但是发现实现不了,不明白为什么。如果用三栏那篇博文的方法,我也实现不了。右侧盒子一直在左边。不明白。==高亮吧,负边距方法不会 #f85d5d==
  2. 全float+宽度calc成功实现。
  3. flex布局,简单又成功。
  4. position+calc成功实现。
  5. 【BFC+float】出现和第三题一样的问题,右侧盒子无法与左侧在同一行。
  6. BFC之table-cell刚开始没有成功,因为中间部分会遮盖左右盒子的某部分。如果将左侧盒子设为浮动,右侧与中间设为table-cell那么左侧与中间盒子正确显示,右侧盒子没有完全显示200px宽度。参考链接参考这个博客发现应该是需要给父元素设置宽度与display: table才能正确显示。
  7. 纯position实现。
  8. 纯float实现。代码非常简单。【简直不敢相信……
    综上,最后实现的是六种方法。
    实现效果

    5 实现一个三栏布局,左侧固定宽度,中间固定宽度,右侧根据浏览器宽度变化而自适应变化

  9. 纯position方法:不需要设置右侧盒子的位置,一设置就会不显示【宽度为0】,原因我没有搞懂。
  10. flex方法:我最喜欢它了!简单又好用。方便理解。【兼容性是什么我不知道!
  11. 纯float方法:给左边和中间盒子左浮动就OK了。右侧盒子不能动。【好了第一个方法那里我也懂了,因为破坏了流动性……刚学的怎么会忘得这么快】
    没有再用其他方法,是因为发现好像很多会包含以上的三种方法之一,然后其他属性设置就显得多余了。暂时就先写这三种。
    实现效果

    6 作业:完成设计稿

    做起来比较容易,算是检验了自己学习的一个成果吧。
    但是我有个问题没解决:就是主要导航部分当前选项卡应该是白色的底边,但是我没办法遮挡下面的灰色线条。所以我很麻烦地写了一个伪元素来遮挡,想看看其他同学们有没更好的解决办法。
    但是发现其他浏览器会出现其他状况,于是我把hr线条设为绝对定位,被导航底部遮挡这样来解决。

    预览的时候还有一个问题,因为我是将很多宽度设为100%的,所以在浏览器窗口变小时,头部、banner、底部都是只充满窗口宽度,将滚动条左右拉动后发现有一部分空白。
    于是我决定给body设定最小宽度1000px解决了这个问题。

    代码地址
    效果预览

总结

用时较长。
这里大概给自己定下缺漏的地方:
1、负边距实现布局不会使用,需要再看。
2、关于flex和grid现代化布局只是会简单使用,了解得不够,要再去自己收集些资料看。
3、圣杯布局与双翼布局,找个机会自己总结一下。

0条评论