领跑计划Day007Css

Posted 师兄白泽

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了领跑计划Day007Css相关的知识，希望对你有一定的参考价值。

文章目录

盒模型布局

1.position

CSS **position**属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

1-1.取值

  • static

    该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

  • relative

    该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

  • absolute

    元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

  • fixed

    元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

  • sticky

    元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest scrolling ancestor）*和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

    该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。

1-2.经典布局

  1. 绝对定位 absolute

    <div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

    .box {
   display: inline-block;
   background: red;
   width: 100px;
   height: 100px;
   float: left;
   margin: 20px;
   color: white;
}

#three {
   position: absolute;
   top: 20px;
   left: 20px;
}

  2. 相对定位relative

    <div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

    .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

  3. 固定定位fixed

    <div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

    .box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

  4. 粘性定位 sticky

    <div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

    * {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}

2.float 布局

  1. Float:left

    左浮动 表明元素必须浮动在其所在的块容器左侧的关键字。

  2. Float:right

    右浮动 表明元素必须浮动在其所在的块容器右侧的关键字。

  3. Clear:both

    清除浮动 清除同级元素的浮动效果

2-1.经典多栏布局

<div class="swapper">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .swapper{
            margin: 0 20%;
        }
        .left,.right,.center{
            width: 100px;
            height:500px;
        }
        .left{
            float: left;
            width: 20%;
            background-color: red;
        }
        .right{
            float:right;
            width: 60%;
            background-color: green;
        }
        .center{
            float: left;
            width: 20%;
            background-color: yellow;
        }
</style>

3.flex布局（现在所使用的布局）

3-1.父容器

  • flex-direction 主轴

    .box {
	/*
  row 主轴为水平方向，起点在左端。
  row-reverse 主轴为水平方向，起点在右端。
  column 主轴为垂直方向，起点在上沿。
  column-reverse 主轴为垂直方向，起点在下沿。
  */  
  flex-direction: row | row-reverse | column | column-reverse;
}

  • flex-wrap

    .box{
  /*
  nowrap （默认）不换行
  wrap 换行，第一行在上方。
  wrap-reverse 换行，第一行在下方。
  */
  flex-wrap: nowrap | wrap | wrap-reverse;
}

  • flex-flow

    • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    .box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

  • justify-content

    • justify-content属性定义了项目在主轴上的对齐方式。
    .box {
  /*
  flex-strat 左对齐
  flex-end 右对齐
  center 居中
  space-between 两端对齐，项目之间的间隔都相等。
  space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大								一倍。
  */
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

  • align-items

    • align-items属性定义项目在交叉轴上如何对齐。
    .box {
  /*
  flex-start 交叉轴的起点对齐。
  flex-end 交叉轴的终点对齐。
  center 交叉轴的中点对齐。
  baseline 项目的第一行文字的基线对齐。
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  */
  align-items: flex-start | flex-end | center | baseline | stretch;
}

  • align-content

    • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    .box {
  /*
  flex-start：与交叉轴的起点对齐。
	flex-end：与交叉轴的终点对齐。
	center：与交叉轴的中点对齐。
	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
	space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔	 大一倍。
	stretch（默认值）：轴线占满整个交叉轴。
  */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

3-2.子容器

  • order

    • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
    .item {
  order: <integer>;
}

  • flex-grow

    • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    .item {
  flex-grow: <number>; /* default 0 */
}

  • flex-shrink

    • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(负值无效)
    .item {
  flex-shrink: <number>; /* default 1 */
}

  • flex-basis

    • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    .item {
  flex-basis: <length> | auto; /* default auto */
}

  • flex

    • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    .item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

  • align-self

    • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

以上是关于领跑计划Day007Css的主要内容，如果未能解决你的问题，请参考以下文章

领跑计划Day004Css

领跑计划Day004Css

领跑计划Day006Css

领跑计划Day006Css

领跑计划Day005Css

领跑计划Day005Css