三、CSS标签（下）

1.圆角边框：

    （1）在CSS3中，新增了圆角边框样式，终于盒子就可以变圆角了。
    （2）border-radius属性用于设置元素的外边框圆角。
        border-radius: 10px;
    （3)如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或直接写50%。
        border-radius: 50%;
    （4）如果是个矩形，设置为高度的一半就可以做。
    （5）可以设置不同的圆角，四个值分别代表顺时针的顺序。

2.盒子阴影：

    （1）box-shadow：
        值：

•         h-shadow。必须要写水平阴影的位置（左右），负值在左边。
•         v-shadow。必写，垂直阴影的位置。（上下），负值在左。
•         blur。模糊距离。影子的虚实。
•         spread。影子的大小。
•         color。影子的颜色。
•         insert。将外部阴影改为内部阴影。

    （2）outset是默认的外阴影，但是不可以写这个单词，否则导致阴影无效。
    （3）text-shadow设置文字阴影。

3.浮动：

    （1）传统网页布局的三种方式：
        普通流（标准流）：标签按照规定好默认方式排列。（行内元素、块级元素）
        浮动
        定位
    （2）为什么需要浮动？
        有很多的布局效果标准流没办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
        浮动最典型的应用：可以让多个块级元素一行内排列显示。
        网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
    （3）什么是浮动？
        float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
            float: left;

    （4）浮动特性：
        浮动元素会脱离标准流（脱标）。
            脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
            浮动的盒子不再保留原先的位置。
        浮动的元素会一行内显示并且元素顶步对齐。
            浮动的元素是互相贴靠在一起的（不会有缝隙）。如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
        浮动的元素会具有行内块元素的特性。
            任何元素都可以浮动，添加浮动后元素具有行内块的特性了。

    （5）浮动元素经常和标准流父级搭配使用。
    （6）网页布局第二准则：先设置盒子大小，之后设置盒子位置。
    （7）浮动的两个注意点：
        浮动和标准流的父盒子搭配。
            先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
        一个元素浮动了，理论上其余的兄弟元素也要浮动。（一浮全浮）
            一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题。
            浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

    （8）为什么清除浮动？
        由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
        由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
    （9）清除浮动的本质：清除浮动元素造成的影响。
        如果父盒子本身有高度，则不需要清除浮动。
        清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
        清除浮动的策略：闭合浮动，只让浮动的父盒子内部影响，不影响父盒子外面的其他盒子。
        清除浮动语法：clear:both;

    （10）清除浮动方法：

•         额外标签法/隔墙法：在浮动元素末尾添加一个空的标签。例如：<div style="clear:both"></div>

            优点：通俗易懂，书写方便；缺点：添加许多无意义的标签，结构化较差。
            新添加的空标签必须是块级元素。

•         父级添加overflow：给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll。

            优点：代码简洁；缺点：无法显示溢出的部分。

•         :after伪元素法，额外标签法的升级版。也是给父元素添加。

            优点：没有增加标签，结构简单；缺点：照顾低版本浏览器。

•         双伪元素清除浮动：用了before和after这两个伪元素来清除。

            优点：代码更简洁；缺点：照顾低版本浏览器。

4.定位：

    （1）为什么需要定位？
        有些效果标准流或浮动都无法快速实现，此时需要用到定位。
        浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
        定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
    （2）定位组成：
        定位：将盒子定在某一个盒子，所以定位也是在摆放盒子，按照定位的方式移动盒子。
        定位=定位模式+边偏移。
            定位模式：用于指定一个元素在文档中的定位方式。
            边偏移：决定了该元素的最终位置。

    （3）定位模式：决定元素的定位方式，它通过CSS的position属性来设置，其值有四个：

•         静态定位/无定位：static。

            静态定位按照标准流特性摆放位置，它没有边偏移。
            静态定位在布局时很少用到。

•         相对定位：relative。

            元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
            原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

•         绝对定位：absolute。

            绝对定位：元素的移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
            如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
            如果祖先元素有定位（相对/绝对/固定定位），则以最近一级的有定位祖先元素作为参考位置。
            绝对定位不占有原先位置（脱标）。
            子绝父相的由来：子级是绝对定位的话，父级要用相对定位。
                总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
                如果父元素不需要占有位置，子绝父绝也会遇到。

•         固定定位：fixed。

            固定定位：元素固定于浏览器可视区的位置。
            主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
            固定定位的特点：
                1.以浏览器的可视窗口为参照点移动元素。
                    跟父元素没有任何关系。
                    不随滚动而滚动。
                2.固定定位不在占有原先的位置。
                    固定定位也是脱标的。固定定位可以看作是一种特殊的绝对定位。
                    固定定位小技巧：固定在版心右侧位置。
                        让固定定位的盒子left:50%。走到浏览器可视区（版心）的一半位置。
                        让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置，就要可以让固定定位的盒子贴着版心右侧对齐了。

position: fixed;
left: 50%;
margin-left: 400px;

•         粘性定位：sticky。

            粘性定位：可以被认为是相对定位和固定定位的混合。
            粘性定位的特点：
                以浏览器的可视窗口为参照点移动元素（固定定位特点）。
                粘性定位占有原先的位置（相对定位特点）。
                必须添加四个方位名词的其中一个才有效。
    （4）边偏移：定位的盒子移动到最终位置。有4个属性。（方位词）

    （5）定位叠放次序：
        在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。（z轴）
        z-index: 1;数值可以是正整数/负整数/0。默认是auto，数值越大，盒子越靠上。
        如果属性值相同，则按照书写顺序，后来居上。
        数值后面不能加单位。
        只有定位的盒子才有z-index属性。

    （6）绝对定位的盒子居中算法：
        加了绝对定位的盒子不能通过margin:0 auto水平居中，可以通过以下方法实现：

left:50%;                 //让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;       //让盒子向左移动自身宽度的一半。
top: 50%;
margin-top: -100px;

    （7）定位的特殊性：
        行内元素添加绝对或固定定位后，可以直接设置高度和宽度。
        块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。
        脱标的元素都不会触发外边距合并的问题。
    （8）定位的拓展：
        绝对定位（固定定位）会完全压住盒子。
        浮动元素不同，它只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文件/图片。
            浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

5.元素的显示与隐藏：

•         display显示隐藏：设置一个元素应如何显示。

            display:none; 隐藏对象。（重点）
            display:block;除了转换为块级元素之外，同时还有显示元素的意思。
            display隐藏元素后，不再占有原来的位置。

•         visibility显示隐藏：用于指定一个元素应该是可见的还是隐藏的。

            visibility: hidden;元素隐藏
                隐藏元素后，继续占有原来的位置。
            visibility: visible; 元素可见。

•         overflow溢出显示隐藏：

            overflow: visible;不剪切内容也不添加滚动条。
            overflow: hidden;不显示超过对象尺寸的内容，超出的部分隐藏掉。
                有定位的盒子的话，慎用。
            overflow: scroll;不管超过内容否，总是显示滚动条。
            overflow: auto;超出自动显示滚动条，不超出不显示滚动条。