前端学习第十课（css浮动和定位）

1圆角边框（css3）

语法：border-radius:数值/百分比；

例如使用div画圆：border-radius: 50%;或border-radius:div宽度;

也可以使用border-radius: 100px 75px 50px 25px;来设置不同方向的圆角。

2.盒子阴影（css3）

语法：box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

例如：

/* box-shadow:水平偏移值、竖直偏移值、blur、spread、color、内部阴影 */

box-shadow:outset 10px 10px 20px 10px #aaa ;

//默认为outset，可选择inset为内部阴影；

实现效果：

3.浮动（float）

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。 

语法：选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

3.1作用：

1）文字包围图片

2）解决空白间隔问题

3）方向和排序问题

4）使得块级标签和行级标签，都会变成类似行块元素效果，多个元素可以并在一排，可以拥有行高，例如a标签。

3.2特性：

1）浮：float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。

2）漏：把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

3）特：任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。 （浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐 ）

3.3清除浮动：

1）额外添加标签专门清除浮动

语法：

选择器{clear:属性值;}   clear 清除 

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both（常用）	同时清除左右两侧浮动的影响

或通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
2）父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

3）使用伪元素清除浮动

before方式实现：

例：

  <style>

.di{

            width: 300px;

            height: 300px;

            border: 1px solid #ccc;

        }

.di::before{

            /* 设定conten */

            content: "hello world！";

            display: inline-block;

            width: 100px;

            width: 100px;

            background-color: rgb(185, 185, 206);

        }

 </style>

实现效果

before为在元素之前添加伪元素，after为在元素之后添加伪元素。

使用after方式伪元素清除浮动（全部搞定，最多，最好用的方式）

.clear::after{content: ""; display: block; height: 0; clear: both; visibility: hidden;}

4.定位（position）

将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

 4.1定位组成

定位 = 定位模式 + 边偏移

边偏移：

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距

定位模式：

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

4.1.1相对定位(relative)

• 相对于 自己原来在标准流中位置来移动的

• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

例如：

.d1{

            background-color: purple;

            /* 相对于当前自身

               不会影响其他排版内容，只是移动自身，原先位置依然占据。

            */

            position: relative;

            left: 150px;

            top: 100px;

        }

实现效果：

4.1.2绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置

1. 完全脱标 —— 完全不占位置；

2. 父元素没有定位，则以浏览器为准定位（Document 文档）

3. 父元素要有定位

   将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位特点：

• 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置

• 不保留原来的位置，完全是脱标的

例如：

<style>

        .parent{

            width: 400px;

            height: 300px;

            margin: 50px auto;

            border: 1px solid #ccc;

            position: relative;/*父级元素定位*/

        }

        .child{

            width: 100px;

            height: 100px;

            background-color: khaki;

            /* 绝对定位，相对于父元素、或者祖先元素设置了定位的进行定位

            会脱离文档流，影响其他元素布局*/

            position: absolute;

            left: 100px;

            top: 100px;

        }

        .child2{

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

实现效果：

4.1.3固定定位(fixed)

 固定定位相对于浏览器进行定位。

例：

.ad{

            width: 200px;

            height: 100px;

            background-color: red;

            border: 2px solid orangered;

            /* 设置绝对定位 */

            position: fixed;

            top: 100px;

            right: 100px;

        }

实现效果：

 

 4.1.4粘性定位

粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持。

例：

.nav{

            width: 600px;

            height: 50px;

            background-color: paleturquoise;

            /* 粘性定位 */

            position: sticky;

            top: 10px; /*导航栏会随页面滑动固定至距上边框10px处。*/

        }

实现效果：