CSS 基础进阶

CSS2

引言：学习前端基础知识。第二课 CSS。

时间：2017年11月23日

作者：JustDo23

html_css_js

01. 三种布局模型

流动模型 Flow
- 默认的网页布局模式
- 块级元素以行的形式，自上而下按顺序垂直延伸分布
- 内联元素从左至右水平分布

浮动模型 Float

<head>
  <style type="text/css">
    div {
      width: 70px;
      height: 30px;
      border: 10px solid red;
    }

    .divLeft {
      float: left;/*两个并排且靠左*/
    }

    .divRight {
      float: right;/*两个并排且靠右*/
    }
  </style>
</head>

<body>
  <div class="divLeft">靠左悬浮</div>
  <div class="divRight">靠右悬浮</div>
</body>

实现了两个块级元素在流动模型中并排一个靠左一个靠右的浮动模型

css_float

层模型 Layer

层模型类似 PhotoShop 中的图层

层模型三种定位方式：
- 绝对定位 position: absolute
- 相对定位 position: relative
- 固定定位 position: fixed

层模型之绝对定位

<head>
  <style type="text/css">
    .divHead {
      width: 300px;
      height: 2000px;
      border: 2px solid blue;
    }

    .divAbsolute {
      width: 50px;
      height: 50px;
      position: absolute;/*绝对定位*/
      border: 5px solid green;
      left: 50px;
      bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="divAbsolute">左下角</div>
  <div class="divHead"></div>
</body>

将元素从文档流中拖出来，然后使用left right top bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
元素将随body大小位置变化而改变。
同时，元素会随这网页内容滑动而滑动。

css_absolute

层模型之相对定位

<head>
  <style type="text/css">
    .divHead {
      width: 300px;
      height: 2000px;
      border: 2px solid blue;
    }

    .divRelative {
      width: 50px;
      height: 50px;
      border: 5px solid green;
      position: relative;/*相对定位*/
      left: 200px;
      top: 30px;
    }
  </style>
</head>

<body>
  <div class="divRelative"><span>偏移后</span></div>
  <div class="divHead"></div>
</body>

相对定位完成过程：首先将元素按 float 浮起来，然后使用left right top bottom属性确定元素在浮起位置的偏移位置。
偏移前的位置保留不动，即后边元素相对偏移前的元素进行定位。
元素将随着网页内容的滑动而滑动。

css_relative

层模型之固定定位

<head>
  <style type="text/css">
    .divFixed {
      width: 50px;
      height: 50px;
      border: 3px solid blue;
      position: fixed;/*固定定位*/
      right: 10px;
      bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="divFixed">悬浮在右下角</div>
</body>

固定定位相对于浏览器窗口，不随网页内容滑动而改变，受浏览器窗口大小及位置影响。

css_fixed

层模型之小结
- absolute 相对于浏览器页面的绝对移动，不仅影响自身元素，还影响后续元素。
- relative 相对于自己原先位置移动，影响自身元素，但不影响后续元素，可能会和后续元素重叠。
- fixed 相对于浏览器窗口固定，用户滚动窗口时保持位置不变。

02. 相对某元素定位

<head>
  <style type="text/css">
    .divFather {
      width: 200px;
      height: 100px;
      border: 1px solid red;
      position: relative;/*父元素必须使用 relative */
    }

    .divChild {
      width: 90%;
      border: 1px solid blue;
      position: absolute;/*子元素必须使用 absolute */
      left: 5%;
      bottom: 5px;
    }
  </style>
</head>

<body>
  <div class="divFather">
    <div class="divChild">
      相对于父元素进行定位。定位在父元素底部。
    </div>
  </div>
</body>

css_examples

03. 开发技巧

缩写

<head>
  <style type="text/css">
    p {
      margin: 5px;/*上右下左边距*/
      padding: 10px 20px;/*上下相等左右相等*/
      margin: 35px 45px 55px;/*上右下边距左等于右*/

      font-size: 12px;/*字体尺寸*/
      line-height: 1.5em;/*字体行高*/
      font: 12px/1.5em;/*两者简写*/

      color: red;/*颜色*/
      color: rgb(10, 200, 55);/*颜色RGB*/
      color: rgb(10%, 20%, 30%);/*百分比单位*/
      color: #336699;/*颜色十六进制*/
      color: #369;/*颜色十六进制简写*/
    }
  </style>
</head>

字体及边框及背景等的缩写类比

水平居中

<head>
  <style type="text/css">
    .contentCenter {/*行内元素居中*/
      text-align: center;
    }

    .divCenter {/*定宽块级元素居中*/
      border: green solid 2px;
      width: 30%;
      margin-left: auto;
      margin-right: auto;
    }

    table {/*定宽块级*/
      margin: 0 auto;
    }

    .contentCenter div {/*不定宽度块级*/
      display: inline;
    }

    .divFather {/*不定宽度块级*/
      float: left;
      position: relative;
      left: 50%;
    }
    .divChild {
      position: relative;
      left: -50%;
      background: #CCC;
    }
  </style>
</head>

<body>
  <div class="contentCenter"><span>行内元素要居中</span></div>
  <div class="divCenter">定宽块级元素要居中</div>
  <table><tr><td>
        <div style="background-color: gray;">不定宽度块级元素利用 table 实现居中</div>
  </td></tr></table>
  <div class="contentCenter">
    <div style="border: pink solid 2px;">不定宽度块级元素变身行内元素并居中</div>
  </div>
  <div class="divFather">
    <div class="divChild">不定宽度块级元素通过悬浮和相对位置实现居中</div>
  </div>
</body>

css_horizontal_center

垂直居中

<head>
  <style type="text/css">
    .verticalCenter {
      width: 300px;
      border: purple solid 2px;
      height: 60px;
      line-height: 60px;
    }

    table td {
      height: 60px;
      background: #ccc;
    }
  </style>
</head>

<body>
  <div class="verticalCenter">父元素高度确定单行文本垂直居中</div>

  <table><tr><td>
        <div>
          父元素高度确定多行文本<br>利用table标签默认属性"vertical-align:middle"实现垂直居中
        </div>
  </td></tr></table>
</body>

css_vertical_center

隐性改变 display 类型

设置元素布局模型 position:absolute 或 float:left|right 两者只要出现一个，元素的显示类型会自动变为 display:inline-block ，同时可以设置元素宽度，且宽度默认不占满符元素。

04. 小结

在盒模型的基础上使用布局模型来进行各种布局排版
注意实战