css02

轮廓和圆角、阴影：

                        outline:用来设置轮廓线，用法和border一样，不同点是轮廓不会影响可见框的大小

                        box-shadow:用来设置阴影。

                                用法： box-shadow:10px 0px  10px red;

                                第一个值， 水平偏移量，正值右移，负值左移

                                第二个值，垂直偏移量，正值下移，负值上移

                                第三个值，阴影的模糊半径            

                                第四个值，阴影的颜色

                        border-radius:可以分别设置方向的圆角

                               设置圆角：border-radius:50%

                                border-top-left-randius:50px 100px

                                border-top-right-randius:

                                border-bottm-right-randius:

                                border-bottm-left-randius:

浮动：可以使一个元素向其父元素的左侧或者右侧移动，通过float属性来设置

        float：

        可选值：

                        node 默认值

                        left 元素左移

                        right 元素右移

                        注意：元素设置浮动后，水平布局不需要强制满足等式

                                        元素设置浮动后，元素和从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素灰自动向上移动

                                浮动的特点：

                                                -浮动的元素完全脱离文档，不再占据文档流的位置

                                                -设置浮动后的元素会向父元素左侧或右侧移动

                                                -浮动元素默认不会从父元素中溢出

                                                -浮动元素左移右移不会超过他前面的其他浮动元素

                

        

                                脱离文档流的特点：

                                        -块元素不再独占页面一行

                                        -块元素的高宽默认都是倍内容撑开的

                                        行内元素脱离文档流会变成块元素，特点和块元素一样

                                脱离文档流后就在不区分块元素和行内元素了

简单布局：

                header 设置头部

                main     设置主题

                footer    设置底部

line-height：设置行高，可以将文字在元素中垂直居中

text-decoration:none  去除下划线

高度塌陷：是浮动布局的一个常见的问题，必须解决

        BFC(block formatting content):块级格式化

                开启BFC该元素会变成一个独立的布局区域

                        特点：

                                -开启FBC的元素不会被浮动元素所覆盖

                                -开启FBC的元素的子元素和父元素外边距不要慌重叠

                                -开启BFC的元素可以包含浮动的元素

                开启BFC的方式：

                                        -设置元素的浮动（不推荐）float:left

                                        -将元素设置为行内块元素（不推荐）display:inline-block

                                        -将元素的overflow设置为一个非visible的值(推荐)

                                                   overflow:scroll

                                                   overflow:auto（推荐）

                                                    overflow:hiden（推荐）

                                               

clear:的作用是清除浮动元素对当前元素的影响而改变位置

        -可选值：

                left 清除左侧浮动元素对当前元素的产生的影响

                right 清除右侧浮动元素对当前元素产生的影响

                both 清除右侧或左侧影响较大的一侧

        原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距来使其位置不收到其他元素的影响

高度塌陷的最终解决方案：使用伪元素

                ::after{

                        content:"":

                        display:block;

                        clear:both

                }

        

     

解决外边距重叠：

               ::before{

                       content:"";

                        display:table

                }

同时解决高度塌陷和外边距重叠：

        .clearfix::before,

        .clearfix::after{

                content:"";

                display:table;

                clear:both

        }