Web开发学习笔记（39）-CSS3（12）弹性盒子

1）flex-direction 属性：

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值	描述
row	横向从左到右排列（左对齐），默认的排列方式。
row-reverse	反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width:200px;
            height:200px;
            border:1px solid #C3C3C3;
            display:flex;
        }
        .content2{
            flex-direction: row-reverse;/*行对齐，主轴起点与终点相反*/
        }
        .content3{
            flex-direction: column;/*列对齐，主轴起点与终点相同*/
        }
        .content4{
            flex-direction: column-reverse;/*列对齐，主轴起点与终点相反*/
        }
        .box{
            width:50px;
            height:50px;
            color:black;
        }
    </style>
</head>
<body>
    <div class="content content1">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content2">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content3">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content content4">
        <div class="box" style="background-color:#FFE5B9;">A</div>
        <div class="box" style="background-color:#EFF8FF;">B</div>
        <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
</body>
</html>

flex-direction指定了弹性子元素在父容器中的排列方向和顺序

（2）flex-wrap 属性：

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其属性值的意义如下所示：

属性值	描述
nowrap	默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse	反转 wrap 排列。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

flex-wrap指定弹性盒子子元素换行方式

（3）align-items 属性：

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

属性值	描述
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch	如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>

flex-items设置或检索弹性盒子元素在轴上对齐方式

（4）align-content 属性：

align-content 控制多行对齐方式，若只有一行则不起作用。

其语法格式为：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

其属性值的意义为：

属性值	描述
stretch	默认。各行将会伸展以占用剩余的空间。
flex-start	各行向弹性盒容器的起始位置堆叠。
flex-end	各行向弹性盒容器的结束位置堆叠。
center	各行向弹性盒容器的中间位置堆叠。
space-between	各行在弹性盒容器中平均分布。
space-around	各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1块</div>
      <div class="center">div2块</div>
      <div class="right">div3块</div>
      <div class="left">div4块</div>
      <div class="center">div5块</div>
      <div class="right">div6块</div>
      <div class="left">div7块</div>
      <div class="center">div8块</div>
      <div class="right">div9块</div>
      <div class="left">div10块</div>
      <div class="center">div11块</div>
      <div class="right">div12块</div>
    </div>
  </body>
</html>

...
#content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;/*各行向弹性盒容器的起始位置堆叠*/
      }
    ...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;/*各行向弹性盒容器的结束位置堆叠*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: center;/*各行向弹性盒容器的中间位置堆叠*/
      }
...

...
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;/*各行在弹性盒容器中平均分布*/
      }
...

      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;/*各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半*/
      }

align-content控制多行对齐方式

练习一下：

在 body 中有两对带有 id 选择器的 div 标签，分别为 container 和 content。

id 选择器名为 container 的 div 标签在页面上显示为一个长和宽为 200 个像素的带边框的正方形，并设置它的子元素居中排布。

id 选择器名为 content 的 div 标签是它的子元素，在页面上呈正圆形显示在正方形边框的中部。

完成代码，看到如下效果：

先开篇之前先提个问题：

为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？

先不要急着往下翻，大家先思考一下。

这个问题的答案，鱼头会在文章中给出，欢迎大家带着这个问题往下翻阅，如果已经知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的逻辑属性

2017年5月18日，W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中，可以抽取出共性的抽象概念(如开始位置，或行)，这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

对于前端来说，我们一直习惯于使用top 、 right 、 bottom、 left来定义我们的HTML元素，这跟我们物理上的概念是一致的。但是对于CSS这个原本是为了服务于图文展示才诞生的语言来说，其实是不匹配的，为什么这么说？

writing-mode

writing-mode：定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

writing-mode一共有以下5个改变HTML文本书写规则的值(还有几个是用在SVG上的，本文不予讨论)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定义了内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条线下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定义了内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一行的左侧。

writing-mode: vertical-lr;

writing-mode: vertical-lr定义了内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一行的右侧。

writing-mode: sideways-rl; (仅Firefox41+实现)

writing-mode: sideways-rl定义了内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在右侧。

writing-mode: sideways-lr;(仅Firefox41+实现)

writing-mode: sideways-lr内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在左侧。

源码如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>

图示如下：

从上图可以发现，当我们设置了padding-right: 100px;的时候，不同的书写规则，展示效果是不一样的。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

在最开始的时候，HTML与CSS只服务于英语国家，但是随着互联网的发展，逐渐各个不同书写规则的国家也开始流行了起来。

我们原来的CSS逻辑属性是按照物理逻辑，从上(top)、右(right)、下(bottom)、左(left)划分的。

那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。

大概也是基于这个原因，所以W3C发布了新的逻辑属性与值。

新旧逻辑属性对比

CSS新旧逻辑属性是完全不同的两种模型。

我们首先来看看新旧有的逻辑属性的对比图示：

左旧右新

通过上图可以得知新旧逻辑属性对应关系如下：

旧的逻辑属性新的逻辑属性 margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start width inline-size height block-size

由上表可以得知，把Y轴方向的属性都改为了block，X轴方向的属性都改为了inline。

对于不同语系的国家，书写顺序会可能有很大的差异，意思就是block跟inline的方向不同。例如：

在英语国家 padding-inline-start=padding-left
在阿拉伯padding-inline-start=padding-right
在日本 padding-inline-start=padding-top

这就意味着旧的逻辑属性，在某些国家里会变得不合常理。

CSS定位

CSS的定位属性变化如下：

旧的逻辑属性新的逻辑属性 top inset-block-start bottom inset-block-end left inset-inline-start right inset-inline-end

例子如下：

/* 旧的逻辑属性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的逻辑属性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的逻辑属性支持简写 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮动

浮动float的属性也改了。

旧的逻辑属性新的逻辑属性 float: left float: inline-start float: right float: inline-end

text-align

文本text-align的属性也改了。

旧的逻辑属性新的逻辑属性 text-align: left text-align: start text-align: right text-align: end

direction

除了writing-mode，还有一个排版属性就是direction，跟writing-mode类似，不一样的是writing-mode是控住网页布局方向的，而direction是控制文本对齐方向的。属性如下：

direction: ltr;

默认值，让文本和其他元素从左到右显示。

direction: rtl;

让文本和其他元素从右到左显示。

吐槽一下，看到这里的切图仔们，抓紧跑路重构吧，等哪天此属性正式被启用，就真的GG了。不过我想应该会立个属性来选择性开启物理属性还是逻辑属性，不然这对前端来说将会是一场灾难！

CSS的盒子模型

基础盒模型(CSS basic box model)

当浏览器对一个render tree进行渲染时，浏览器的渲染引擎就会根据基础盒模型(CSS basic box model)，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。

我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子

$$('*').forEach(e=> {
  e.style.border='1px solid';
})

图示如下：

每个盒子都由四个部分组成：

内容(content)

盒子(box) 的内容，显示标签内一切的文本，图案或者别的内容。

内边距(padding)

盒子(box) 内的填充物，样式为透明，主要负责扩展盒子内区域大小。

外边距(margin)

盒子(box) 外部的区域，样式为透明，负责隔离相邻的元素。

边框(border)

盒子(box) 的边界，负责隔离外边距以及内边距。

盒子模型的值

盒子模型一共有三个值：

content-box

content-box为标准的盒子模型。盒子的width跟height只包括盒子本身的width与height属性。

计算法则：

width=width

height=height

border-box

border-box为盒子模型可选的属性之一。盒子的width跟height包括content、padding跟border。这也是当文档处于 Quirks模式时Internet Explorer使用的盒模型。

计算法则：

width=width + border + padding

height=height + border + padding

padding-box

padding-box为非标准属性，曾经在Firefox中实现过，但是在Firefox 50中被删除。padding-box的width和height 属性包括内容和内边距，但是不包括边框和外边距。

图示：

这里吐槽一下，不知道为何没有margin-box，虽然并没有太大意义，当真实现了效果估计也很诡异，但是作为一个强迫症患者晚期，少了一个属性总感觉好不舒服。

视觉格式化模型(visual formatting model)

CSS的视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。
官方说法就是：它规定了用户端在媒介中如何处理文档树( document tree )。

每个盒子的布局由以下因素决定：

盒子的尺寸
盒子的类型：行内盒子 (inline)、行内级盒子 (inline-level)、原子行内级盒子 (atomic inline-level)、块盒子 (block)
定位：普通流、浮动、绝对定位
文档树中当前盒子的子元素 或 兄弟元素
视口(viewport) 的尺寸和位置
盒子内部图片的尺寸
其他某些外部因素

视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代码为例，div 和 table 都是包含块。div 是 table 的包含块，同时 table 又是 td 的包含块，不是绝对的。

盒子的生成

盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于CSS display 属性。

块级元素当元素的display 为 block、list-item 或 table 时，它就是块级元素。
块级盒子块级盒子用于描述它与父、兄弟元素之间的关系。每个块级盒子都会参与块格式化上下文（block formatting context）的创建。每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box） 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。一个同时是块容器盒子的块级盒子称为块盒子（block box）。
匿名盒子某些情况下需要进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能被CSS 选择器选中，也就是所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。因此称为匿名盒子(anonymous boxes)。
行内元素当元素的display 为 inline、inline-block 或 inline-table 时，它就是行内级元素。显示时可以与其他行内级内容一起显示为多行。
行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。
匿名行内盒子类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。
行盒子行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
run-in 盒子（在CSS 2.1的标准中移除了） run-in盒子可以通过display: run-in来设置，它既可以是块盒子，又可以是行内盒子，这取决于它后面的盒子的类型。

定位规则

一旦形成了盒子，CSS引擎就需要定位它们来完成布局。

定位所使用的规则如下：

普通流在普通流中，盒子会依次放置。在块格式化上下文（block formatting context）中，盒子在垂直方向依次排列。在行内格式化上下文（inline formatting context） 中，盒子则水平摆列。
浮动：当一个盒子的float不为none，并且position为static或relative时，该盒子为浮动定位。 float: left：盒子会定位到当前行盒子的开始位置（左侧）。 float: right：盒子会定位到当前行盒子的尾部位置（右侧）。
绝对定位：如果元素的position 为 absolute 或 fixed，该元素为绝对定位。在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系。

作者：大前端世界
链接：https://www.jianshu.com/p/3446dd9b22a6

二部分 CSS

第八章 css基础知识

css基础知识：
css样式表的定义
css：（Cascading Style Sheets）层叠样式表；
分类及位置：内部样式-head区域style标签里面
外部样式-link调用
内联样式-标签元素里面
css内的注释：/*注释内容*/
css样式表的语法
CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。
盒子名或者标签名{属性:值;}
CSS中几种颜色的表示方法
用颜色名表示
有17个预先确定的颜色，它们是
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow
用十六进制的颜色值表示(红、绿、蓝)
#FF0000或者#F00
用rgb(r,g,b)函数表示
如：rgb(255,255,0)
用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)
如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表
蓝色
用rgba(r,g,b,a)函数表示
其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函数表示
色调、饱和度、亮度、透明度
例子

 <div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#F00;">background-color:#F00</div>
	<div style="background-color:#ffff00;">background-color:#ffff00</div>
	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>

内部样式表
当单个页面需要设置样式时，就应该使用内部样式表。
使用 <style></style>标签在文档<head></head>里面定义内部样式表

<head>
 <style type="text/css" >
 p{color:red;}
 </style>
</head>

从外部引入到样式分为两种：（注意写在head标签里面）
当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。
Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html式： <style type="text/css">@import url("css.css");></style>
内联样式表（优先级高）
写在标签里面的样式
如：<p style="color:red;"></p>
表示给p标签里面的文字颜色设置为红色
区别：外链样式与导入样式
link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。
兼容性的区别，因@import``CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。
在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。

样式的优先级补充
相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
层叠优先级是:
浏览器缺省< 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级
另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

第九章 css选择器(上)

css选择器：
class类选择器可以重复利用
id选择器唯一
标签选择器
什么是选择器：css选择器就是要改变样式的对象
选择器{属性:值;属性:值;}
标签选择器：页面中所有的标签都是一个选择器 p{color:red;}
ID选择器
选择id命名的元素以 # 开头 #p1{color:#0f0;}
类选择器
class选择器，选择clas命名的元素以.开头 .first{color:#00f;}
css代码写完后上线前要经过压缩处理
本地和服务器分两个css版本（备份）
压缩后注释都清除，空间体积减少
群组选择器
选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
包含选择器
选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
span{color:red;}
属性选择器
选择包含某一属性的元素
a[title]{color:red;} 选择包含title的a标签
a[title][href]{color:red;} 选择包含title和href的a标签
> + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）
p > span{color:red;}
相邻兄弟选择器：只选择后面的相邻兄弟元素
p + span{color:red;}

第十章 css选择器(下)

<a>伪类选择器
a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
a:hover {color:#FF00FF;}/* 鼠标移动到链接上
*/（可和其他标签结合一起用）
a:active {color:#0000FF;} / 选定的链接 /
注意
伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha
输入伪类选择器（针对表单）
input:focus{color:red;} / 键盘输入焦点 /
其他伪类选择器
p:first-child{color:red;} /* 第一个p */
:before 在元素之前添加内容。
:after 在元素之后添加内容。
css优先规则
内联样式表-> ID 选择器—> Class 类选择器->标签选择器

第十一章背景属性

背景属性：
背景的添加：
背景颜色的添加:
background:red;
backgronnd-color:red;
背景图片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平铺
什么是平铺？平铺就是图片是否重复出现
不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺
背景图片的定位
背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
background-position的取值可为英文单词或者数值和百分值。
background-positon的英文单词取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的数值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景图片的大小
背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
background-size的数值取值
background-size:x y;
background-size的数值取值
background-size:x% y%;
背景图片的滚动
背景图片是否随着内容的滚动而滚动由background-attachment设置
background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动

第十二章文字文本属性

css文字文本属性：
文字属性
color:red; 文字颜色
font-size:12px; 文字大小
font-weight:“bold” 文字粗细(bold/normal)
font-family:“宋体” 文字字体
font-variant:small-caps小写字母以大写字母显示
文本属性
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through)
letter-spacing: 字间距

第十三章盒子模型

盒子模型
盒子模型就是一个有高度和宽度的矩形区域
所有html标签都是盒子模型
div标签自定义盒子模型
所有的标签都是盒子模型
class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。
盒子模型的组成
盒子模型组成部分：
自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin外边距
内容+内边距+边框+外边距=面积
border 边框
常见写法 border:1px solid #f00;
单独属性：
border-width:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color (颜色)
padding 内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（设置4个点–>顺时针方向）
单独属性：
padding-top:
padding-right:
padding-bottom:
padding-left:
当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
margin 外边距
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

补充盒子模型内容

标准盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content部分不包含其他部分
IE盒子模型

从上图可以看到 ie盒子模型的范围也包括 margin、border、padding、content
和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width=padding+border+内容
标准盒子模型=内容的宽度（不包含border+padding）
例：
一个盒子的 margin为 20px，border 为 1px，padding为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px
那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。
假如不加doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie浏览器会采用 ie 盒子模型去解释你的盒子，而 ff会采用标准w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。
反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

用 jquery 做的例子来证实一下

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox=$.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代码没有加上 doctype 声明，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox=$.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代码2 与代码1 唯一的不同的就是顶部加了 doctype声明。在所有浏览器中都显示“标准 w3c盒子模型”
所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型
扩展
学会使用box-sizing布局

第十四章块元素、行元素与溢出

基本概念
块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；
行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距
行块转换
display:none; 不显示
display:block; 变成块级元素
display:inline; 变成行级元素
display:inline-block; 以块级元素样式展示，以行级元素样式排列
溢出
overflow:hidden; 溢出隐藏
overflow:scroll; 内容会被修剪，浏览器会显示滚动条
overflow:auto; 如果内容被修剪，则产生滚动条
文本不换行：white-space:nowrap;
长单词换行：word-wrap:break-word;
行内元素和快级元素小结
一、块级元素：block element
每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；
块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。
DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
二、行内元素：inline element
也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。
三、block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
四、inline元素的特点
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下:
设置宽度width 无效。设置高度height无效，可以通过line-height来设置。设置margin
只有左右margin有效，上下无效。
设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
五、常见的块状元素
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
六、常见的内联元素
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
七，可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del- 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本
八、行内元素与块级元素有什么不同
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right;
padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四：
块级：display:block;
行内：display:inline;
替换元素有如下：（和img一样的设置方法）
<img>、<input>、<textarea>、<select>
<object>都是替换元素，这些元素都没有实际的内容
可以通过修改display属性来切换块级元素和行内元素

第十五章定位

static静态定位（不对它的位置进行改变，在哪里就在那里）
默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者 z-index 声明）。
fixed固定定位（参照物–浏览器窗口）—做弹窗广告用到
生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。
relative（相对定位）（参照物以他本身）
生成相对定位的元素，相对于其正常位置进行定位。
absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left", "top", "right" 以及 "bottom" 属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
块级元素: div、h1或p元素即：显示为一块内容称之为 “块框“ ;
行内元素: span,strong,a等元素即：内容显示在行中称 “行内框”;
使用display属性改变成框的类型即：display:block; 让行内元素设置为块级元素，display:none; 没有框
相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
.adv_relative { position: relative; left: 30px; top: 20px; }
绝对定位：
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
<frameset> —- 用来定义一个框架；双标签
不能和 <body> 一起使用
rows、cols属性
rows 定义行表示框架有多少行（取值 px/%/ * ）
cols 定义列表示框架有多少列（取值px/ %/ * ）
frame子框架
<frame> —- 表示框架中的某一个部分；单标签，要跟结束标志
src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）
<noframes>属性
<noframes> 提供不支持框架的浏览器显示body的内容；双标签

<frameset>
 <frame src=“” />
 <frame src=“” />
 <frame src=“” />
 <noframes>
 <body>内容</body>
 </noframes>
</frameset>

<iframe>内联框架
iframe元素会创建包含另外一个文档的内联框架（即行内框架）
允许和 body 一起使用
width 宽（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 边框线（取值 0 / 1）
src 显示的网页的路径

第十七章 css高级属性

opacity透明属性
opacity
对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100
对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1
对于早期火狐，使用-moz-opacity:值; 值为0-1
所以写透明属性时，一般写法是

 {	
 opacity:0.5;
 filter:alpha(opacity：50);/*0-100*/
 -moz-opacity:0.5;	/*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}

border-radius圆角边框属性
向 div 元素添加圆角边框
border-radius:10px;
box-shadow阴影属性
box-shadow属性向框添加阴影效果,后面跟4个参数。
box-shadow:0px 0px 10px #000;
<embed>属性
是HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等

CSS部分导图总结

css常见简写

在线咨询

上一篇：微信应用号开启内测，Html5技术将彻底颠覆APP
下一篇：Python+selenium自动化之table操作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web开发学习笔记（39）-CSS3（12）弹性盒子

练习一下：

CSS的逻辑属性

writing-mode

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: vertical-lr;

writing-mode: sideways-rl; (仅Firefox41+实现)

writing-mode: sideways-lr;(仅Firefox41+实现)

新旧逻辑属性对比

CSS定位

CSS浮动

text-align

direction

direction: ltr;

direction: rtl;

CSS的盒子模型

基础盒模型(CSS basic box model)

内容(content)

内边距(padding)

外边距(margin)

边框(border)

盒子模型的值

content-box

border-box

padding-box

视觉格式化模型(visual formatting model)

盒子的生成

定位规则

您的项目需求