目录

1. 圆角边框（border-radius）

2. 盒子阴影（box-shadow）

3. 文字阴影（text-shadow）

4. 浮动（float）

        4.1 传统网页布局的三种方式

        4.1.1 标准流

        4.2 浮动流

        4.2.1 为什么需要浮动

        4.2.2 什么是浮动？

        4.2.3 浮动特性（重难点）

4.2.4 浮动元素经常和标准流父级搭配使用

4.3 常见的网页布局

        4.4 浮动布局注意点

        4.5 清除浮动

        4.5.1 为什要清除浮动

        4.5.2 清除浮动的本质

        4.5.3 清除浮动

       1. 语法 

        2.清除浮动的方法

               1.额外标签法

                2.清除浮动---父级添加overflow

                3.清除浮动---：after伪元素法

4.5.4 清除浮动 总结

        在css3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

        语法：

        border-radius ： length；

        实现原理：

        注意：

        css中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

        语法：

        box-shadow ： h-shadow        v-shadow        blur        spread        color        inset；

注意：

        1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

        2.盒子阴影不占用空间，不会影响其他盒子的排列。

        在css3中，我们可以使用text-shadow属性将阴影应用于文本

        语法

        text-shadow ： h-shadow  v-shadow  blur  color；

        网页布局的本质———用css来摆放盒子。把盒子摆放到相应位置

        css提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）；

        所谓的标准流：就是标签按照规定好默认方式排列。

        1.块级元素会独占一行，从上向下排列。

        2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适为止，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局

        总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

        浮动最典型的应用：可以让多个块级元素一行内排列显示。

        网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动流。

        float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框。

        语法：

        选择器 { float：属性值；}

        加了浮动之后的元素，会具有很多特性，需要我们掌握。

        1.浮动元素会脱离标准流（脱标）

        2.浮动的元素会一行内显示并且元素顶部对齐

        3.浮动的元素会具有行内块元素的特性

        设置了浮动（float）的元素最重要特性

        1.脱离标准普通流的控制（浮）移动到指定的位置（动），（俗称拖标）

        2.浮动的盒子不再保留原先的位置。

        演示：

        如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

注意：浮动元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

        3.浮动元素具有行内块元素的特性。

        任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

        如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

        浮动的盒子中间没有缝隙的，是紧挨着一起的

        行内元素同理。

        为了约束浮动元素位置，我们网页布局一般采用的策略是：

        先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

        1.浮动和标准流的父盒子搭配。

        先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

        2.一个元素浮动了，理论上其余的兄弟元素也要浮动

        一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

        浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流。

        我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的

        但是，所有父元素都是有高度的吗？

        理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高。

        清除浮动的本质就是清除浮动元素造成的影响

        如果父盒子本身有高度，则不需要清除浮动

        清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流

                选择器 { clear :属性值;}

        我们实际工作中，几乎只用到clear：both;

                额外标签法也称为隔墙法，是W3C推荐的做法。

                额外标签法会在浮动元素末尾添加一个空的标签。例如

        或者其他标签(如等)。

                优点：通俗易懂，书写方便

                缺点：添加许多无意义的标签，结构化比较差

                可以给父级添加overflow属性，将其属性值设置为hidden，auto或scroll。

                子不教父之过，注意是给父元素添加代码

                优点:代码简介

                缺点：无法显示溢出部分

                ：after 方式是额外标签法的升级版。也是给父元素添加的

                优点：没有增加标签，结构更简单

                缺点：照顾低版本浏览器

                4. 清除浮动---双伪元素清除浮动

                给父元素添加

优点：代码更简洁

缺点：照顾低版本的浏览器

        为什么需要清除浮动

        1.父级没高度

        2.子盒子浮动了

        3.影响下面布局了，我们就应该清除浮动