这是我参与笔记创作活动的第5天

一、本堂课重点内容：

本堂课的知识要点有哪些？
基础知识
布局和定位

二、详细知识点介绍：

一、基础知识

1.1Casading规则、选择器、继承、值和单位、盒模型

二、布局和定位

块级元素和行内元素

HTML里的元素可以分为块级元素和行内元素两大类：

块级元素： 块级元素典型特点就是它要独占一行，它后面跟随的其它元素都会被挤到下一行，可以将块级元素理解为一个矩形容器，有自己的宽度和高度。比如：

等都是块级元素。

行内元素： 行内元素与块级元素相反，在宽度允许的情况下，一行可以容纳多个行内元素，它没有固定形状，无法设置高度与宽度。比如：<span><a><input><img><strong><em>等都是行内元素。

相互转换： 我们可以使用display:inline将块级元素转换为行内元素，可以使用display:block将行内元素转换为块级元素。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*为每个元素加上不同的背景色加以区分*/
        div { background-color:#00FFFF;}
        span { background-color: #66FF33;}
        strong { background-color:#CC9900;}
        p { background-color:#CC99FF; }
        a { background-color:#ADFF2F; }

        #p1 { display:inline;}
        #span1 { display:block;}
    </style>
</head>
<body>
    <div id="div1">块元素div独占一行</div>
    <p>块元素p独占一行</p>
    <span>行内元素span</span>
    <a>行内元素a</a>
    <strong>行内元素strong</strong>
    <p id="p1">块元素p转换为行内元素</p>
    <span id="span1">行内元素span转换为块级元素,独占一行</span>
</body>
</html>

流动布局

流动布局就是元素按照正常文档流自上而下的排列，所有元素按先后顺序逐行往下排序，块级元素独占一行，行内元素在每行中按照从左到右的顺序依次排列。流动布局是网页默认的显示规则。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*为每个元素加上不同的背景色加以区分*/
        div { background-color:#00FFFF;}
        span { background-color: #66FF33;}
        strong { background-color:#CC9900;}
        p { background-color:#CC99FF; }
        i { background-color:#ADFF2F; }
        em { 
            background-color:#D19275; 
            display:block;/*将em转换为块级元素*/
        }
    </style>
</head>
<body><!--正常文档流，按先后顺序依次排列-->
    <div>div块级元素（独占一行）</div>
    <span>span1行内元素</span><strong>strong行内元素</strong>
    <p>p块级元素（独占一行）</p>
    <i>i行内元素</i><em>em行内元素(转换为块级元素，独占一行)</em>
</body>
</html>

浮动布局

浮动布局是利用CSS完成网页布局最重要的方式，使用极其灵活多变，这里仅说明基本的概念，要熟练掌握还需多看、多练。在上面的流动布局我们了解到以div为首的块级元素会独占一行，在网页布局中，最常用的就是div，通常把div当做一个盒子，再来把一个个div盒子进行排列。但是div独占一行，我们想在一行并列放置两个、甚至三个div盒子怎么办呢？浮动就可以完成这个事情。看个例子： ```

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outside {/*外层div样式*/
            width:280px;
            height:160px;
            background-color:#F0E68C;
            border:1px solid red;
        }
        #div1 {/*div1样式，不浮动*/
            height:25px;
            padding:10px;
            margin:5px;
            border:2px dashed red;
        }
        #div2 {/*div2样式，左浮动*/
            padding:10px;
            margin:5px;
            width:120px;
            height:60px;
            background-color:green;
            float:left;/*设置左浮动*/
        }
        #div3 {/*div3样式，右浮动*/
            padding:10px;
            margin:5px;
            background-color:red;
            float:right;/*设置右浮动*/
        }
    </style>
</head>
<body>
    <div id="outside"><!--外层div-->
        <div id="div1">div1未设置浮动，独占一行</div>
        <div id="div2">div2左浮动,设置了宽和高</div>
        <div id="div3">div3右浮动</div>
    </div>
</body>
</html>

定位布局

浮动布局比较灵活，不易控制。定位布局相对而言较易使用，当然，在实际开发中，往往是两者配合使用，以满足布局的个性需求。定位布局主要是通过为 【position】 属性设置不同的值来完成布局的。该值主要有以下三种：

1、值fixed（固定定位）： 以浏览器为基准，指定定位元素与浏览器4条边的距离完成定位，分别通过top、bottom、left和right这四个属性的设置来完成。其实，这4个属性未必全部都需要设置，只需要设置top和left即可。当元素设置了固定定位，如果页面过长出现滚动条，它也不会随滚动条的滚动而移动。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1
        {
            width:220px;
            height:600px;
            background-color:#DDA0DD;
        }
        #div2
        {
            position:fixed;/*设置元素为固定定位*/
            top:40px;/*与浏览器顶部边框距离40px*/
            left:150px;/*与浏览器左部边框距离150px*/
            width:120px;
            height:100px;
            background-color:#DAA520;
        }
    </style>
</head>
<body>
    <div id="div1">div1:未定位<br />第二行<br />第三行<br />第四行</div>
    <div id="div2">div2：设置固定定位，距离浏览器上边框40px,左边框150px</div>
</body>
</html>

2、值relative（相对定位）： 以需定位元素按正常文档流所在位置为参照，然后使定位元素相对于它在原本的正常文档流的位置偏移指定的距离。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{/*将三个div设置相同的边距、边框和尺寸*/
            margin:20px;
            padding:10px;
            border:2px dashed red;
            width:100px;
            height:34px;
        }
        /*将三个div设置不同的背景*/
        #div1{background-color:#98FB98;}
        #div2{
            background-color:#87CEEB;
            position:relative;/*设置相对定位*/
            top:30px;
            left:40px;
        }
        #div3{background-color:#FF00FF;}
    </style>
</head>
<body>
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
    <div id="div3">第三个盒子</div>
</body>
</html>

3、值absolute（绝对定位）： 绝对定位的元素是相对于离它最近的一个已定位的父元素为参照进行定位的（默认是body）。下面的示例有两个div，可以理解为父盒子和子盒子，父盒子设置绝对定位，以body为参照设置位置。子盒子也是绝对定位，以父盒子为定位参照。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #father{/*外层父盒子*/
          width: 200px;
          height: 170px;
          background-color: orange;
          position: absolute;/*绝对定位*/
          top:30px;/*顶部距离body上边框30px*/
          left:50px;/*左侧距离body左边框50px*/
        }
        #son{/*里层盒子*/
          width: 100px;
          height: 80px;
          background-color: pink;
          position: absolute;/*绝对定位*/
          top:40px;/*顶部距离父盒子上边框40px*/
          left:60px;/*左侧距离父盒子左边框60px*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

弹性布局

1. 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

图：Flex 容器

提示：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。 CSS 中提供了以下属性来实现 Flex 布局：

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

按照作用范围的不同，这些属性可以分为两类，分别为容器属性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和项目属性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。下面就来介绍一下这些属性的使用。

2. 容器属性

1) flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
            position: relative;
        }
        .row, .row_reverse, .column, .column_reverse{
            display: flex;
            margin-bottom: 5px;
        }
        .row {
            flex-direction: row;
        }
        .row_reverse {
            flex-direction: row-reverse;
        }
        .column {
            flex-direction: column;
        }
        .column_reverse {
            flex-direction: column-reverse;
            position: absolute;
            top: 120px;
            left: 400px;
        }
        .row div, .row_reverse div, .column div, .column_reverse div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="row">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="row_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="column">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
        <div class="column_reverse">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </div>
</body>
</html>

运行结果如下图所示：
flex-direction 属性演示

2) flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .nowrap, .wrap, .wrap_reverse {
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .nowrap {
            flex-wrap: nowrap;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap_reverse {
            flex-wrap: wrap-reverse;
        }
        .nowrap div, .wrap div, .wrap_reverse div {
            width: 70px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="nowrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
        <div class="wrap_reverse">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
    </div>
</body>
</html>

运行结果如下图所示：
flex-wrap 属性演示

3) flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

    flex-flow: flex-direction flex-wrap;

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex_flow {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .flex_flow div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="flex_flow">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
    </div>
</body>
</html>

运行结果如下图所示：

图：flex-flow 属性演示

4) justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex-start {
            justify-content: flex-start;
        }
        .flex-end {
            justify-content: flex-end;
        }
        .center {
            justify-content: center;
        }
        .space-between {
            justify-content: space-between;
        }
        .space-around  {
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="flex flex-start">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="flex flex-end">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="flex center">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="flex space-between">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div class="flex space-around">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
</body>
</html>

运行结果如下图所示：

图：justify-content 属性演示

#### 5) align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

#### 6) align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承该属性的值

## 3. 项目属性

1) order

order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：

    order: number;

其中 number 就是项目在容器中的位置，默认值为 0。

2) align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

值	描述
auto	默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch	项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

3) flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：

flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值）或者以具体的值加 "%"、"px"、"em" 等单位的形式。另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

三、课后个人总结：

本章有什么知识点不容易掌握？

1.css知识的难点为布局方式
什么地方容易与其他内容混淆？

1.flex布局的项目属性容易搞错

深入理解CSS ｜ 青训营笔记

这是我参与笔记创作活动的第5天

一、基础知识

1.1Casading规则、选择器、继承、值和单位、盒模型

二、布局和定位

块级元素和行内元素

流动布局

浮动布局

定位布局

弹性布局

1. 基本概念

2. 容器属性

1) flex-direction

2) flex-wrap

3) flex-flow

4) justify-content

1) order

2) align-self

3) flex

深入理解CSS ｜青训营笔记