学习html5的第八天课堂笔记

1.行级布局

2.列级布局 （float布局）
float:left;
A.脱离文档流：从原来的文档流中脱离出来，不再占据位置，宽度由内容决定
B.不脱离文档流：占据原来的位置，宽度默认为100%

3.定位布局
position:static/relative/absolute/fixed
当position的取值有后三个的时候，说明当前元素为定位元素，而定位元素可以使用left,right,top,bottom来定位。
1）相对定位
position:relative;
相对于原来的位置，不脱离文档流
2）绝对定位
position:absolute;
相对于距离它最近的父定位元素，如果父元素中不存在定位元素，则相对于浏览器视口；脱离文档流

   覆盖位置：z-index:0;

3）固定定位
position:fixed
相对于浏览器视口，不随页面的滚动而滚动

4.flex 伸缩盒布局
列级别布局，一般用于手机端的布局、用于后台部分布局

主轴/交叉轴

  flex-direction:row;
   主轴为x轴，交叉轴为y轴
     子元素横向排列，左中右排列

  flex-direction:colum;
   主轴为y轴，交叉轴为x轴
     子元素纵向排列，上中下排列

使用方法：
1)父元素
display:flex; （伸缩盒布局）

    flex-direction：（定义主轴）
                   row    x轴
                   colum  y轴

    justify-content: ( 定义主轴上的内容排列方式)
       space-around 空白环绕
       space-between
       flex-start 默认
       flex-end
       center
    align-items: (定义交叉轴上的内容排列方式)
       stretch  默认拉伸
       flex-start 
       flex-end
       center
    flex-wrap:
       nowrap  默认
       wrap    换行（当容器无法容纳子元素的时候）

day09/2018.08.08

---

2）子元素  
  flex-basic

---

5.盒子居中

方案1
.content {
width:1090px;
height: 100px;
background-color: #336666;
margin:0 auto;
}

方案2、3
.content {
width: 1090px;
height: 100px;
background-color: #336666;
position: relative;//absolute;
left: 50%;
margin-left: -545px;
}

方案4
body {
display: flex;
justify-content: center;
}
.content {
width: 1090px;
height: 100px;
background-color: #336666;
}

6.边框阴影
box-shadow 接收一个由5个部分组成的值
x轴 y轴 雾化面积 扩大 颜色

box-shadow: offset-x offset-y blur spread color position;

1） offset-x：第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边，而负值使阴影出现在元素的左边。

  .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
  .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

2）offset-y：第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边，而负值使阴影出现在元素的下边。

   .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
   .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

3）blur：第三个长度值代表阴影的模糊半径，举例说明，就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的，没有任何模糊。模糊数值越大，尖锐度越小，阴影越朦胧和模糊。负值是不被允许的，并会被处理成0。

4）spread：第四个，同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

5）color：颜色值，正如你期望的，是阴影的颜色。它可以是任何颜色单位。

6）position：box-shadow属性的最后一个值是一个可选的关键字，它代表着阴影的位置。默认情况下，这个值并而没有给出，这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影。

  .left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
  .right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

7）多重阴影：box-shadow属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

8）圆形阴影box-shadow 属性的边界半径是通过该元素的 border-radius 属性来控制的。

 .foo {
      box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
      border-radius: 50%;
   } 

9）弹出效果

10）浮动效果

---

.left 浮动
.right 不浮动
overfloat:auto;
右侧显示