水平居中设置

定宽块状元素：

    首先满足定宽和块状  即块状标签和width值确定

            然后通过设置margin左右的值为auto  实现居中

不定宽块状元素

操作竖轴

align-items属性

align-items：flex-start

                       flex-end

                        center

                        baseline

                         stretch

与操作横轴类似

具体图片见课程

操作横轴

为什么要操作横轴？

答：因为多个div这个块级元素被flex属性整理到了一行上，所以我们要对这一行div元素进行所谓的美化工作

操作横轴的属性:

  justify-content:flex-start

  justify-content:flex-end

  justify-content:center 

  justify-content:space-between 

  justify-content:space-around

 例：.div{

                background:red;

                 weight:400px;

                 height:400px;

                 display:flex;

                  justify-content:flex-start;}交叉轴的起点对齐

也是与flex属性一样写在父级代码中

<form   method="传送方式"   action="服务器文件">
示例：
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

transform：translate （ 数值1，数值2）

数值1为X ,数值2 为Y，意为x轴y轴

设置 

    已知宽高实现盒子水平垂直居中

1  、 

  设置父display : flex;

            justify-content:center;  左右水平居中

            align-items:center  上下水平居中

2 、 

   设置父position：relative；相对定位

          子postion：absolute；绝对定位

            设置水平上左50%

            上下的上50%

           设置下外边距 margin，就OK了

块状元素分为定宽块状元素和不定宽块状元素。

定宽块级元素要设置水平居中时，可以设置margin ： auto；

行内元素是文字、图片时，居中要用

text-align：center；

当父元素设置display：flex

子元素可以设置flex ：数字

用于占父元素比例。

设置竖轴，可以用align-items 属性

align-items ： flex-start | flex-end | center | baseline | stretch

                        开头           结尾         中间                      不设置高度时，

                                                                                         可以占满容器高度

设置项目在主轴上的对齐方式。

justify-content ：flex-start |  flex-end  | center |  space-between | space-around

flex布局可设置块级元素在一排显示。

14.1

弹性盒子

flex属性

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

4.给子元素设置相对于父元素的比例，且只能是整数，表示占比多少，设置flex后其宽度属性会失效。

    例：

                                                      .box2 {

                                                                    flex: 3;

                                                                    background: orange;}

例：

php文本

<div class="box">

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</div>

.box{background-color: white;

height: 400px;

width: 400px;

display: flex;

}

css文本

.box1{ 

background-color: red;

height: 200px;

width: 200px;

}

.box2{background-color: black;

height:200px;

width: 200px;}

.box3{

height: 200px;

width: 200px;

background-color:green;

}

css布局模型有三种：流动模型（flow）浮动模型（float） 层模型（layer）

层模型

1. 绝对定位：position：asolute；相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

   position:absolute;
      left:100px;
      top:50px;
   

2. 相对定位：它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动

   position:relative;
      left:100px;
      top:50px;

3. 固定定位：随着浏览器窗口变化随着变化

    position:fixed;

          bottom:0;

           right:0;            固定在窗口右下角

4. relative 和 absolute 组合使用可以相对于由自己设定的元素改变其position    

   1、参照定位的元素必须是相对定位元素的前辈元素：

    <div id="box1"><!--参照定位的元素-->
   <div id="box2">相对参照元素进行定位</div><!--相对定位元素--></div>

2、参照定位的元素必须加入position:relative;

    #box1{
                   width:200px;
                   height:200px;

                   position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

        #box2{    position:absolute;
           top:20px;
           left:30px;         }

12.1

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

12.2

 a{display:block;}可以将内联元素变成块级元素。div{     display:inline;}可以将块级元素变成内联元素。display:inline-block可以将元素变为内联块元素。
块级元素就是一整个被他包含的元素都会改变  ，使用background可以很清楚地验证两者（块级和内联）区别，

1.    块级元素：

    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

2.    

       1.内联元素：元素的高度、宽度及顶部和底部边距不可设置；

       2.和其他元素都在一行上

3.    内联块元素： 

            1、和其他元素都在一行上；

            2、元素的高度、宽度、行高以及顶和底边距都可设置。

12.5

            display: none;可以使标签内元素消失

12.6

            盒子模型

                padding margin border

border

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick

4.border-radius  可以改变四角的圆角效果

div{border-radius:20px 10px 15px 30px;}分别为左上角，右上角，右下角，左下角（顺时针方向）

如果单独修改某个角    border-top-left-radius  50px    此为设置左上角为50px

需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形

padding

1.div{padding:20px 10px 15px 30px;}分别为 上  右  下  左（顺时针    ） 

如果单独修改某一边    padding-top:20px;               此为设置上边20px

margin

1.div{margin:20px 10px 15px 30px;}分别为上 右 下 左（顺时针）

如果单独修改某一边    margin-top:20px;               此为设置上边20px